Adding column to WooCommerce order page

Today I would like to share something easy to develop and helpful for your clients. WooCommerce is an awesome and powerful WordPress plugin. I personally tried other shopping carts but always made my way back to WooCommerce.

The tutorial for today is to add a column to your WooCommerce frontend order table. There are a lot of reasons why you want to make an extra column, but it all comes down to user/customer experience.

In this tutorial, we are going to create an extra billing field and then going to show it in the Order table. This is a fast and easy tutorial to make your customers happy.

First, create the extra billing field. You can read about WooCommerce filters and hooks in the documentation, the more you read and understand it the more you be able to develop custom functions like this. Beleive me it can get fun <- geek šŸ™‚ You can also read more about Checkout fields here.

We are going to add a billing field called “Website URL”.Ā  We are going to add a Filter with the name “woocommerce_checkout_fields”. You do not have to add it to the billing fields but I am going to add it there for now.

We are also going to give this billing field a unique meta field name, let usĀ call it “billing_wp_url“. Make the field also a required field. See the Action Filter below.

add_filter('woocommerce_checkout_fields', 'custom_woocommerce_billing_field');
function custom_woocommerce_billing_field($fields)
{
    $fields['billing']['billing_wp_url'] = array(
        'label' => __('WordPress URL', 'woocommerce'), // Add Label
        'placeholder' => _x('https://', 'placeholder', 'woocommerce'), // Add placeholder
        'required' => true, // is required or not
        'clear' => false, // add clear or not
        'type' => 'text', // add  type
        'class' => array('my-url')   // add css class name
    );
    return $fields;
}

Awesome, that was it! Now we are going to add this WooCommerce checkout field to the Order table.

The first filter is to add the columnĀ and name it WordPress URL. I want it next to “Order total” and give the column a name. Again so easy, WooCommerce explains all this in their documentation.

function wp_url_order_column( $columns ) {
    $new_columns = array();
    foreach ( $columns as $key => $name ) {
        $new_columns[ $key ] = $name;
        if ( 'order-total' === $key ) {
            $new_columns['my_wp_url'] = __( 'WordPress URL', 'textdomain' );
        }
    }
    return $new_columns;
}
add_filter( 'woocommerce_my_account_my_orders_columns', 'wp_url_order_column' );

The next filter is to link this column that we created with its data. Now we are going to call the “billing_wp_url” meta fieldĀ we created on the checkout page and add it. We call this data in 2 lines of code.

function wp_url_order_column_data( $order ) {
 $wpurl =  get_post_meta( $order->id, '_billing_wp_url', true );
  echo $wpurl;
}
add_action( 'woocommerce_my_account_my_orders_column_my_wp_url', 'wp_url_order_column_data' );

All done! How easy was that? So you can call other billing fields also, WooCommerce really made it so easy. Read about it here. For example show the user Billing First Name: “$getfirstname = = $order->get_billing_first_name();

Please let me know how this helped you, and how you improved your customers experience.

order table
Once a week we send a digest with the most popular articles.

We are more than just a Hosting company!

AdminWP Host, Maintain (Site-care), Secure and Backup WordPress websites.