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:
2 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.

Free solution – 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. 

Importantly, it’s completely free. 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.

Get the plugin for free →

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. All with the free plugin. I hope you found this article useful and the 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
Dream Home’s Story

Read Octolize Case Study about Dream Home – a provider of furniture and products for the home and office.

2 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!