1. Home
  2. Documentation
  3. WooCommerce Product Table
  4. Developer Documentation
  5. Adding a custom column to the product table

Adding a custom column to the product table

Please note that this code is aimed at developers and if you don’t know how to use it then you should ask your developer. If you don’t have one, we recommend posting a job on Codeable. We have partnered with them to provide plugin customizations for our customers.


To add a custom column to your table you need to do the following:

  1. Add your column to the “columns” option used in the product table. This can be via the plugin settings page, or directly in the shortcode using the columns option. The column can be called anything you like, e.g. sale_price, wholesale_stock, media_type, etc. It doesn’t matter what the name of the column is as long as you don’t use an existing column name already provided by the plugin.
  2. Create a new class which implements the Product_Table_Data interface. This is the class that will retrieve the actual data for your custom column.
  3. Add a hook to your theme or custom plugin which creates and returns the data class created in Step 2.

Example

For this example we’re going to assume the custom column we’re adding is called wholesale_stock.

1. Adding the column to the options or shortcode

In this example, we’re going to add the column directly in our shortcode. So our shortcode will be:

[product_table columns="name,short-description,wholesale_stock,price,add-to-cart"]

2. Creating the data class

Each column in the table has an associated object which implements the Product_Table_Data interface. This has 3 functions, but the main one that you’ll be implementing is the get_data() function. To simplify creating this class, and provide base implementations for the other 2 functions, your class can extend the Abstract_Product_Table_Data class.

Here’s an example of a data class for our wholesale_stock column:

if ( ! class_exists( 'Abstract_Product_Table_Data' ) ) {
	return;
}

/**
 * Gets data for the 'wholesale_stock' column to use in the product table.
 *
 * @license   GPL-3.0
 */
class Product_Table_Data_Wholesale_Stock extends Abstract_Product_Table_Data {

    public function get_data() {
        // Retrieve the stock from somewhere.
        $stock = $product->get_meta( '_wholesale_stock' );

        // Return the stock.
	return apply_filters( 'wc_product_table_data_wholesale_stock', $stock, $this->product );
    }

}

You’ll notice in the above example, we run the returning data through a custom filter (wc_product_table_data_wholesale_stock). You don’t have to do this, but the other data in the table follows this convention so it’s good practice.

3. Adding the data retrieval hook

The hook you need to add is wc_product_table_custom_table_data_<your_column>. So if your column is called wholesale_stock, then you would register this hook:

add_filter( 'wc_product_table_custom_table_data_wholesale_stock', function( $data_obj, $product, $args ) { 
    return new Product_Table_Data_Wholesale_Stock( $product ); 
}, 10, 3 );

This filter accepts 3 arguments:  the data object to return (defaults to false), the current product object (WC_Product) and the product table arguments (WC_Product_Table_Args)

You could put the callback and the data class in the same file if you want, or keep these separate. Once you’ve added your callback and data object, you should now see your custom column in the table.

Changing the heading for the custom column

Product Table will give your column a heading based on its name. So in our example for wholesale_stock, the heading would be “Wholesale Stock”. If you want a different column heading, you can do this in the usual way by adding a : (colon) after the column followed by the heading. E.g:

[product_table columns="name,short-description,wholesale_stock:Stock,price,add-to-cart"]

Was this article helpful?

Related Articles