How to show shipping costs for various shipping zones on WooCommerce product page?

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 their shipping costs for different zones 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>';
}

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?

Easily Set Fees & Discounts For Payment Gateways

Finding it difficult to manage all payment gateway fees and adjusting your product pricing accordingly?

The Payment Gateway Based Fees & Discounts plugin is designed to set up fees & discounts for each of your payment modes and simplify your payment process.

Learn More

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?

Conclusion

Implementation of the above code will display all the shipping rates for various shipping zones on the 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.