How to display shipping cost on product page in WooCommerce?

display shipping cost on product page woocommerce
Author Bartosz Gajewski
Updated:
2022-08-10
Reading time:
4 minutes read
Category:
Blog

Displaying shipping costs on a product page is an important element influencing customers’ purchase decision in eCommerce. WooCommerce doesn’t have that option, but fortunately, there is an easy and free solution for this. In this article, I’ll show you how to do this. 

Why should you show shipping cost on product page?

Displaying the shipping cost on the product page is not the default option in WooCommerce. The shipping cost, or in fact the shipping cost calculator, is only available in two places: on the shopping cart page and on the checkout page. To enable the shipping cost calculator on the product page, you’ll need an external solution. But why is it worth it?

Based on a study conducted by Baymard Institute, 21% of respondents abandoned orders because they “weren’t able to see the total order cost upfront before initiating the checkout”. What’s more, 64% of the test subjects looked for shipping costs on the product page, before deciding to add a product to the cart. 

This clearly shows that enabling the shipping cost calculator on the product page makes it much easier to make a buying decision for your customers. In this simple way, you can improve the shipping experience and reduce the number of abandoned carts in your store.

Shipping Cost on Product Page Calculator plugin

One of the easiest solutions to display the shipping cost is to use a custom-made plugin: Shipping Cost on Product Page Calculator. As the name implies, its main functionality is just to enable the calculation of shipping cost on a product page. 

The plugin is constantly being developed by Octolize. Our plugins are used by over 250.000 WooCommerce stores worldwide. Over the years we proved to have become not only the authors of stable and high-quality plugins, but also as a team providing excellent technical support.

Shipping Cost on Product Page PRO £49

Let your customers calculate and see the shipping cost on product pages based on the entered shipping destination and cart contents.

Add to cart or View Details
100+ Active Installations
Last Updated: 2023-01-30
Works with WooCommerce 7.0 - 7.4.x

Shipping Cost on Product Page Calculator is compatible with Shipping Notices plugin – free solution to change the “no shipping options were found” message into your custom notice.

How to display shipping cost calculator on product page in WooCommerce?

All you have to do after installing and activating the plugin is to turn on the shipping cost calculator on the product page in the plugin’s settings. To achieve that, just go to WooCommerce → Settings → Shipping → Shipping Cost on Product Page and then tick the box Turn on / off the shipping cost calculator on the product page

turn on the shipping cost calculator on the product page

Remember to Save changes, and it’s all done. 

Shipping Cost Calculator should be displayed according to the settings of your theme. In a basic Storefront theme, it looks like this:

calculate shipping cost on product pageAs you can see, a button for calculating the cost of shipping appeared on the product page. After clicking that button, your clients will see the shipping cost calculator, similar to the one located on the shopping cart page. They have to enter basic shipping details. After filling in the data, just use the Calculate button to display shipping cost on the product page.

shipping cost calculator on product page

Based on entered address, all available shipping methods will be shown along with their cost.

shipping cost displayed on product page

In this simple way, you can display shipping cost calculator on the product page in WooCommerce.

Advanced options to display shipping cost on product page in WooCommerce

With the Shipping Cost on Product Page PRO plugin, you can use advanced options to determine the shipping cost calculator behavior and precisely decide where it should be displayed.  Let’s go through all the available options.

Hide the shipping cost calculator on the virtual products’ product pages

Virtual products cannot be shipped, so the best solution is to hide the shipping cost calculator on product pages of that category. To do this in the Shipping Cost on Product Page plugin, just go to options (WooCommerce → Settings → Shipping → Shipping Cost on Product Page) and tick this checkbox.

Hide the shipping cost calculator on the virtual products' product pages

This way, the shipping cost calculator will remain hidden on the product pages of the virtual products which do not require to be shipped. This feature will be useful for stores that offer both virtual and physical products suitable for shipping.

Set the shipping cost calculator placement

Simply enabling the display of a shipping cost calculator on the WooCommerce product page may not be enough for visually advanced stores. You can decide exactly where to place this element on the product page. The Shipping Cost on Product Page PRO plugin allows three options of calculator placement: before the add to cart button (the default option), after the add to cart button, or a custom place added via shortcode. You can choose the option in the Calculator placement list.

Set shipping cost calculator placement

Before ‘Add to cart’ button

In that default option, the shipping cost calculator will be displayed in the product’s page section before the ‘Add to cart’ button:

shipping cost on product page calculatorbefore add to cart button

After ‘Add to cart’ button

In that option, the shipping cost calculator will be displayed in the product’s page section after the ‘Add to cart’ button:

shipping cost on product page calculator after add to cart button

Don’t display it by default. I’ll place it on my own using a shortcode

An option for advanced users who use builders or know how to use shortcode to build WooCommerce product pages. In that option, the shipping cost calculator will remain hidden on the product page. To display the shipping cost calculator, you will need to copy the shortcode and paste it in the place where you want the calculator to be shown. You’ll find it in the Shortcode section of the plugins’ setting page.

shipping cost calculator shortcode

Hide shipping cost calculator for certain products

If for some reason you would rather not display the calculator on product pages of specific products, you can easily achieve that. Do to so, just go to the Do not display the calculator on these products’ pages section. Then, type in at least 3 characters to find and select the products’ pages the shipping cost calculator should not be displayed on.

Hide shipping cost calculator for certain products

You can add multiple products to be excluded.

Select the shipping cost calculation method

Using the advanced settings of the Shipping Cost on Product Page PRO plugin, you can also decide how to calculate shipping costs. The plugin allows two options:

  • Only currently viewed product – the shipping cost will be calculated only for the product your customer is currently viewing,
  • Currently viewed product + products in the cart – the shipping cost will be calculated for the product your customer is currently viewing, and the products already added to the cart.

Select the shipping cost calculation method

Enable the shipping cost auto calculation

Displaying shipping costs on a product page is an important element influencing customers’ purchase decision in eCommerce. To improve the whole process, you can additionally enable the option of automatic shipping cost calculation. This way, your customers won’t have to fill in shipping details already on the product page to find out what the shipping cost will be. The available shipping methods to be automatically displayed based on the WooCommerce → Settings → General → Default customer location option or the shipping address saved in the user’s profile (for returning logged-in customers).

To enable the shipping cost auto calculation, just tick the Shipping cost auto calculation checkbox.

Enable the shipping cost auto calculation

Summary

I hope you found this article useful. I really believe that Shipping Cost on Product Page plugin will help reduce the number of abandoned shopping carts in your store. 

 

Comments
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Check out our case studies

Dream Home Story
Furniture shipping via WooCommerce – Dream Home’s Case Study

Learn how to configure custom shipping rules for furniture orders – from heavy and bulky to small and light.

4 minutes read
Vitrek’s Story

Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.

2 minutes read
EnglishSpeakingMum’s Story

Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.

2 minutes read

Join over 10,000 subscribers

Stay up to date and get WooCommerce tips & Octolize news right to your inbox!

Help