By default, WooCommerce doesn’t offer a shipping calculator on the product page, and having a shipping calculator on the product page is something users love to see. In this article, we are about to know how we can show shipping calculations on the product page.
Since the WooCommerce plugin doesn’t offer this feature we will use a third-party plugin for this. We are going to use Product page shipping calculator for WooCommerce plugin. Installation of this plugin is the same as any other and you already know how to install the plugin.
Table of Contents
Shipping calculator options
After the installation and activation of this plugin, it will automatically start showing the available shipping options and their price on the product page as shown in the image below.
By default, it will automatically fetch your current shipping addresses and you also manually enter any location to check the price of delivery.
Customization
You also get some customization options in this plugin so you can make it looks according to your preference.
The first option is to set the position of the calculator, you can set it before or after the Add to cart button.
The next option is where you want to show the result of the shipping calculation. You can choose between four options as shown in the image above.
After that, you will see the option of auto calculation of shipping method, with this enable it will automatically calculate shipping for the users. If you disable it won’t show the calculation until the user manually clicks on the Update address.
You can also select the product quantity field if shipping varies based on the number of products. When you enable it, the quantity selected in the quantity field + quantity of product in the cart will be considered to calculate the shipping method and cost.
After that, you will see the option to change the default text of the plugin which is shown to users based on their selected options. After that must click on Save Option to save the setting.
Now in the next tab, you will get a design option and from there you can change different default colors of this plugin to match your website aesthetics.
Redesign with custom code
One issue with this plugin is the bullet points overflow the background box which looks really ugly, we can fix that with a simple change in your website CSS.
To do that go to your Appearance>Customize and go to the Additional CSS option and paste the CSS code given below.
[CSS]
.pisol-ppscw-methods {
padding: 0px 30px !important;
}
.pisol-ppscw-alert {
padding: 20px;
}
[/CSS]
This code will add some padding in the calculation box and it will show bullet points inside the box.
Conclusion
This free plugin will add a shipping calculator to your product page. This plugin also offers a premium option which gives an additional option to show estimated delivery time in calculation. Consider an upgrade if you feel an extra option is necessary for you.
If you face any issues while installing and using this plugin let me know in the comment below. Also, if you know any better plugin for this feature shares your suggestion with us in the comment.
any ideas how to make this plugin just calcualte shipping for the given product and not include the cost of products already in the cart? thanks