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