WooCommerce: Show Shipping Class ID @ Shipping Class Admin Table

You can use WooCommerce shipping classes to customize shipping rates for a defined group of products. You can manually add shipping classes via the /wp-admin/admin.php?page=wc-settings&tab=shipping&section=classes URL (i.e. WooCommerce > Settings > Shipping > Shipping Classes).

We’ve often worked with snippets requiring a shipping class ID, and I explained there were a couple of ways to figure that out, all involving the “Inspect” tool of the browser.

But what if you need to actually display the IDs inside the shipping class table, so that it’s easier for the store admin to get and use such data?

Well, the snippet below will help you do that. And thanks to Peter for sharing most of the code!

PHP Snippet: Get Shipping Class ID and Print It In A Custom Column @ WooCommerce Shipping Class Settings

This code snippet adds a new column named “Class ID” to the WooCommerce shipping classes table in the admin area. Here’s a breakdown of how it works:

1. add_filter Hook:
   • The first line add_filter( 'woocommerce_shipping_classes_columns', 'bbloomer_shipping_class_id_column' ); utilizes a WordPress hook named add_filter.
   • This hook allows you to modify the data displayed in the admin area. In this specific case, it’s targeting the woocommerce_shipping_classes_columns filter, which controls the columns within the shipping classes table.
   • The second argument, bbloomer_shipping_class_id_column, is the name of the function that will be executed when the filter is applied.
2. bbloomer_shipping_class_id_column Function:
   • This function, bbloomer_shipping_class_id_column, takes a single argument, $shipping_class_columns, which is an array containing the existing columns for the shipping classes table.
   • Inside the function, a new element is added to the $shipping_class_columns array. The key for this new element is set to 'id', and the value is set to 'Class ID'.
   • This essentially creates a new column with the key id and displays the header text “Class ID” in the table.
   • Finally, the modified $shipping_class_columns array is returned by the function.
3. add_action Hook:
   • The next line add_action( 'woocommerce_shipping_classes_column_id', 'bbloomer_shipping_class_id_column_value' ); employs another WordPress hook, add_action.
   • This hook is used to execute a function when a specific action occurs. In this case, the action being targeted is woocommerce_shipping_classes_column_id.
   • The second argument, bbloomer_shipping_class_id_column_value, specifies the function that will be called when this action is triggered.
4. bbloomer_shipping_class_id_column_value Function:
   • This function, bbloomer_shipping_class_id_column_value, doesn’t take any arguments.
   • Its purpose is to display the content for the “Class ID” column that was added earlier.
   • It utilizes a template tag (indicated by the double curly braces {{ }}) to echo the term_id of the current shipping class. This would display the unique identifier for each shipping class within the “Class ID” column.

Overall, this code snippet effectively adds a new column to the WooCommerce shipping classes table, allowing you to view the ID for each shipping class alongside other existing information.

/**
 * @snippet       Show Shipping Class ID @ Woo Settings
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     Join https://businessbloomer.com/club/
 */

add_filter( 'woocommerce_shipping_classes_columns', 'bbloomer_shipping_class_id_column' );

function bbloomer_shipping_class_id_column( $shipping_class_columns ) {
	$shipping_class_columns['id'] = 'Class ID';
	return $shipping_class_columns;
}

add_action( 'woocommerce_shipping_classes_column_id', 'bbloomer_shipping_class_id_column_value' );

function bbloomer_shipping_class_id_column_value() {
	echo '<div class="view">{{ data.term_id }}</div>';
}