Add a new column to the WooCommerce Products admin page.
A member of the WooCommerce Community Facebook asked for help adding a Shipping classes column to the Products listing page in the Dashboard. I knew it was a reasonably simple task and I had a few minutes spare so I wrote the code. I later enhanced it a bit. As a product can only have one shipping class the column title is the singular ‘Shipping class‘.
The basic process
Adding a column is a two step process – use a filter to add the column key and title, and an action to echo the column data. It was over 10 years since I last added a custom column so I did a quick web search for the filter and action required and found one that used an ACF field as the custom column.
Where to add the column
The simplest thing is to add the new column at the end of the row array but I enhanced the code to insert it after a column of your choosing (using array_search() and array_splice()). As a fallback, if that column does not exist then the column is added to the end. I gave the new column a key of ‘shipping_class‘.
Adding the shipping class data
After adding the column title you must of course add the corresponding data. This is done via an add_action() call. The column key and post ID are passed to the function. When the key is ‘shipping_key‘ I use the post ID to get the product object. The WC_Product class has a get_shipping_class() member function but it returns the class slug. This wasn’t much help to me as I wanted the class name. I copied the get_shipping_class() code and modified one line to access the name.
If the product does not have a shipping class I echo a dash (actually a ‘ndash’ character like in the Tags column).
How it looks
Turning off columns
You could use code to remove some of the columns but the pull down Screen Options panel is much more versatile. The Shipping classes column is automatically added to this list.
Column width
Quick note about the width of the new column – it’s not set. On smaller screens the new column can get squashed. For example, on an iPad the Shipping class column looks terrible with one letter on each line.
The Categories and Tags columns have CSS to set their width to 11%.
To fix the issue I copied the CSS that the Categories and Tags columns use, only loading it on the Products page.
table.wp-list-table .column-shipping_class { width: 11% !important; }
Leave a Reply