How to Display Shipping Costs on Product Page in WooCommerce?

The absence of mentioning shipping costs early in the conversion funnel can sometimes prompt customers to look for alternative choices. This can be avoided by showing the shipping rates right on the product page. It helps customers to complete purchases, especially those who shop from different geographical locations.

This post helps you to display shipping methods and shipping class with their costs on the WooCommerce product page.

Where to Add Custom Code in WooCommerce

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Preliminary Steps

1. Make sure to configure the required shipping zones and shipping methods in your store from WooCommerce → Settings → Shipping section. 

2. Set the rates of each specific shipping zone and the shipping methods as per your need. The below 3 images represent the example configurations.

Solution: Show shipping costs for various shipping zones on the WooCommerce product page

Imagine a customer browsing an online store that sells home decor items, and the customer has selected the product “LED Metal Wall Art”. The code below extracts and displays the shipping information of that product based on shipping zones and methods configured in the WooCommerce settings of the store.

add_action( 'woocommerce_after_add_to_cart_form', 'ts_shipping_rates_single_product' );

function ts_shipping_rates_single_product() {
   global $product;
   if ( ! $product->needs_shipping() ) return;
   $zones = WC_Shipping_Zones::get_zones();
   echo '<div><i class="fas fa-truck"></i> ' . __( 'Shipping', 'woocommerce' );
   echo '<table>';
   foreach ( $zones as $zone_id => $zone ) {
      echo '<tr><td>';
      echo $zone['zone_name'] . '</td><td>';
      $zone_shipping_methods = $zone['shipping_methods'];
      foreach ( $zone_shipping_methods as $index => $method ) {
         $instance = $method->instance_settings;
         $cost = isset($instance['cost']) ? $instance['cost'] : (isset($instance['min_amount']) ? $instance['min_amount'] : 0);
         echo $instance['title'] . ' ' . wc_price( $cost ) . '<br>';
      }
      echo '</td></tr>';
   }
   echo '</table></div>';
}

Planning to add a LOCAL PICKUP option or let the user choose their delivery date on your WooCommerce store?

Meet Order Delivery Date Pro that lets you set delivery date and time based on product category, shipping methods, pickup methods etc.

Let your customer choose a convenient delivery date and time set by you so that you can handle order fulfillment without any worries. It’s a win-win for both.

Learn More

Output 

On the product page of “LED Metal Wall Art”, the provided code shows different shipping methods and rates associated with that specific product page for the countries India, Germany, and the United States.

Read related Post: How to Limit Shipping to Only One State With WooCommerce?

Code Explanation

1. The add_action function is attached to the function ts_shipping_rates_single_product hooked to the woocommerce_after_add_to_cart_form action. This means that the code in the function will run and display information after the add-to-cart form in WooCommerce.
2. The function ts_shipping_rates_single_product()  function will display shipping rates information on the product page.
3. The $product variable refers to the current WooCommerce product being displayed.
4. if ( ! $product->needs_shipping() ) return;This line checks whether the product needs shipping. If it doesn’t, the function returns, which means that the shipping rates won’t be displayed for this product.
5. $zones = WC_Shipping_Zones::get_zones(); retrieves all the shipping zones using the get_zones() method from the WC_Shipping_Zones class.
6. echo ‘<div><i class=”fas fa-truck”></i> ‘ . __( ‘Shipping’, ‘woocommerce’ ); This line displays the heading “Shipping” along with a truck icon using Font Awesome. The __(‘Shipping’, ‘woocommerce’) part is used to translate the word “Shipping” to the appropriate language if WooCommerce localization is used.
7. echo ‘<table>’ starts an HTML table where the shipping rates will be displayed.
8. foreach ( $zones as $zone_id => $zone )  starts a loop that iterates through each shipping zone and its associated information.
9. Inside the loop: echo ‘<tr><td>’ starts a table row and cell for each zone name.
10. echo $zone[‘zone_name’] . ‘</td><td>’ displays the name of the current zone in the first cell of the row.
11. $zone_shipping_methods = $zone[‘shipping_methods’]; retrieves the shipping methods available within the current zone.
12. foreach ( $zone_shipping_methods as $index => $method )  starts another loop that iterates through each shipping method within the zone.
13. echo $instance[‘title’] . ‘ ‘ . wc_price( $cost ) . ‘<br>’ displays the shipping method’s title along with its corresponding cost or minimum amount, using the previously calculated $cost.
14. echo ‘</td></tr>’ ends the table row for the current zone.
15. echo ‘</table></div>’ ends the table and div containers.

Read Related Article: How to display a $0.00 amount for free shipping methods in WooCommerce?

Solution: Display Shipping Class Cost of Shipping Methods on WooCommerce Product Page

To display the cost of shipping classes you must know how to set up woocommerce shipping classes, options and zones. These preliminary steps must be done to:
1. Create shipping classes.
2. Assign shipping classes to products.
3. Set the cost of these shipping classes to shipping method.
Follow these steps as shown in the images given below.

Create shipping classes from WooCommerce > Settings > Shipping > Shipping Classes. Select Add shipping class and create one and save the shipping class.

Navigate to WooCommerce > Products. Select a product and click on edit. In Edit product, select shipping and assign a shipping class as shown in the image.

In the example below, we have set up different flat rate shipping costs for each class.

Imagine an online store that is set up with distinct shipping classes like large, small, and light packages, each with its associated cost for a product, these shipping class costs are typically applied directly on the cart page. However, if you wish to clearly showcase these costs on each individual product page, you can use the following code snippet.

add_action('woocommerce_after_add_to_cart_form', 'ts_shipping_rates_single_product');

function ts_shipping_rates_single_product()
{
    global $product;

    // Check if the product requires shipping
    if (!$product->needs_shipping()) return;

    // Get shipping zones
    $zones = WC_Shipping_Zones::get_zones();

    // Get the product shipping class ID
    $product_shipping_class_id = $product->get_shipping_class_id();

    // Display shipping information
    echo '<div><i class="fas fa-truck"></i> ' . __('Shipping', 'woocommerce');
    echo '<table>';

    // Loop through shipping zones
    foreach ($zones as $zone_id => $zone) {
        echo '<tr><td>';
        echo $zone['zone_name'] . '</td><td>';
        $zone_shipping_methods = $zone['shipping_methods'];

        // Loop through shipping methods within the zone
        foreach ($zone_shipping_methods as $index => $method) {
            $instance = $method->instance_settings;
            $cost = isset($instance['cost']) ? $instance['cost'] : (isset($instance['min_amount']) ? $instance['min_amount'] : 0);

            echo $instance['title'] . ' ' . wc_price($cost) . '<br>';

            // Check if shipping method has shipping classes
            if (isset($instance['type']) && $instance['type'] === 'class') {
                echo '<ul>';
                // Loop through individual class costs
                foreach ($instance as $key => $value) {
                    // Check if the key is a class_cost key
                    if (strpos($key, 'class_cost_') === 0) {
                        $class_id = str_replace('class_cost_', '', $key);

                        // Check if the class is assigned to the product
                        if ($class_id == $product_shipping_class_id) {
                            $class_term = get_term($class_id, 'product_shipping_class');
                            echo '<li>' . $class_term->name . ': ' . wc_price($value) . '</li>';
                        }
                    }
                }
                echo '</ul>';
            }
        }

        echo '</td></tr>';
    }

    echo '</table></div>';
}

Output

Let’s take a television product as an example, assigned to the shipping class ‘Big package’ with a configured cost of $10 for this specific shipping class. When you view this product, in addition to displaying the shipping method rates, it will also show the shipping class cost associated with this particular product.

Conclusion

Implementation of the above codes will display shipping methods and shipping class with their costs on the WooCommerce product page.. An additional feature to this code can be done by introducing conditional shipping rates based on the quantity or weight of items in the cart.

Drop your suggestions on how the code was useful or any other feedback in the comment.