Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins

How to Customize the Shipping Classes Section in WooCommerce?

If you want to customize the user interface for managing shipping classes in a WooCommerce setting within the WordPress admin area i.e. WooCommerce-> Settings->Shipping->Shipping classes, there is a code snippet you can use. To customize the section, you need to edit the html-admin-page-shipping-classes.php file in the woocommerce/includes/admin/settings/views/html-admin-page-shipping-classes.php.

You must insert the code provided below at line 13 in the file. After making the necessary changes, you need to save the template file.

<h2 style="color: mediumblue;">
	<?php esc_html_e( 'Create your own Shipping classes', 'woocommerce' ); ?>
	<?php echo wc_help_tip( __( 'Shipping classes can be used to group products of similar type and can be used by some Shipping Methods (such as "Flat rate shipping") to provide different rates to different classes of product.', 'woocommerce' ) ); ?>

<table class="wc-shipping-classes widefat">
            <?php foreach ( $shipping_class_columns as $class => $heading ) : ?>
                <th class="<?php echo esc_attr( $class ); ?>" style="background-color: mediumblue; font-weight: 500; color: #fff;"><?php echo esc_html( $heading ); ?></th>
            <?php endforeach; ?>
            <td colspan="<?php echo absint( count( $shipping_class_columns ) ); ?>">
                <button type="submit" name="save" class="button button-primary wc-shipping-class-save" style=" padding: 0px 5px 0px 5px; font-size: 14px; background-color: #4caf50; color: #fff; border: 2px solid #4caf50; border-radius: 25px;" disabled><?php esc_attr_e( 'Save shipping classes', 'woocommerce' ); ?></button>
                <a class="button button-secondary wc-shipping-class-add" href="#" style="padding: 0px 5px 0px 5px; font-size: 14px; background-color: mediumblue; color: #fff; border: 2px solid mediumblue; border-radius: 25px;"><?php esc_html_e( 'Add shipping class', 'woocommerce' ); ?></a>
    <tbody class="wc-shipping-class-rows"></tbody>


The following output indicates that the backend of WooCommerce Shipping, specifically the shipping classes tab within the shipping section, has been customized. This customization includes styling adjustments to elements such as the shipping classes title and the shipping classes table.

How to Customize the Shipping Classes Section in WooCommerce? - Tyche Softwares

The image below shows how the default WooCommerce shipping classes table appears before implementing the code.

How to Customize the Shipping Classes Section in WooCommerce? - Tyche Softwares

If you want to add short description fields for a particular shipping method from the admin side, you can follow this guide that will add the short descriptions for WooCommerce shipping methods below each title. This will create a new description field on the backend.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x