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.
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.
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.
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 DetailsAll 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.
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:
As 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.
Based on entered address, all available shipping methods will be shown along with their cost.
In this simple way, you can display shipping cost calculator on the 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.
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.
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.
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.
In that default option, the shipping cost calculator will be displayed in the product’s page section before the ‘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:
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.
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.
You can add multiple products to be excluded.
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:
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.
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.
Learn how to configure custom shipping rules for furniture orders – from heavy and bulky to small and light.
Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.
Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.
I am interested in your plugin and I use the WooCommerce Table Rate Shipping – PRO plugin to calculate the shipping costs based on country, weight, shipping class, etc. is your Shipping Cost on Product Page PRO suitable for use along with WooCommerce Table Rate Shipping – PRO plugin?
please respond to my email
tq
Hi Zaidi, we haven’t been notified about any issues with running these two plugins combined. The Shipping Cost on Product Page PRO plugin should work fine with all the 3rd party plugins using default WooCommerce shipping mechanisms. Nevertheless, when it comes to the Table Rate shipping cost calculations, we highly advise to use our Flexible Shipping PRO plugin, which we have fully tested and can guarantee that it is fully compatible and works flawlessly with Shipping Cost on Product Page PRO.