To create a shipping calculator, you can scroll down to the Pricing Fields section on the left and add a ‘Product’ form field.
You can add multiple shipping methods for the zone and set up conditions when they’ll apply.
Go ahead and publish your page and visit your site to see the shipping calculator in action.
For instance, we changed the label of the field and product type. Formidable Forms also lets you show products as checkboxes, dropdowns, radio buttons, single products, or user-defined.
Upon activation, you can go to WooCommerce » Shipping Calculator to configure the plugin.
In this article, we will show you how to add a shipping calculator to your WordPress site.
What is a Shipping Calculator & Why Use It?
For costs, you can enter a flat rate that will be charged when a customer adds a product to a cart. There is also an option to multiply the shipping cost by the quantity.
Now that you’ve added your products, the next step is to add your shipping regions and charges. To do that, you can again add a Product form field under the Pricing Fields section in the menu on the left.
Customers can simply select their location and see what the product will actually cost after delivery. This helps strengthen your relationship with your customers and builds trust.
The best way to add a shipping calculator in WooCommerce is by using the Product page shipping calculator for WooCommerce plugin. It is a free plugin that allows customers to calculate the cost of shipping before adding a product to the cart.
You can now head back to the shipping zone section to view your zones, regions, and shipping methods.
For instance, you can add form fields like name, email, phone number, and more to the template.
Simply switch to the ‘Settings’ tab at the top. Here, you’ll find general settings for changing the form title, adding a description, and more.
It’s important to note that the plugin will use the information from the shipping zone settings in WooCommerce when calculating shipping fees.
When you’re done, simply click the ‘Add shipping method’ button.
Next, you can also change form settings in Formidable Forms.
It is a popular contact form plugin for WordPress that lets you create advanced and complex forms. For instance, you can add a contact form, calculators, surveys, directories, and web applications using the plugin.
Next, you’ll need to enter a zone name and select regions from the dropdown menu. You can add multiple countries or cities under a single zone.
After that, a small window will open where you can change the title of the method, select whether you’d like the shipping method to be taxable or not, and enter a cost.
Go ahead and select the ‘Blank Form’ template.
After that, head to the ‘Design’ tab. The plugin gives you multiple options to edit the appearance of the shipping calculator.
In the screenshot below, customers will first need to select a delivery location and click the ‘Update Address’ button.
Don’t forget to click the ‘Save Change’ button to store your settings.
You can simply drag any form field from the menu on the left and drop it on the template.
The plugin works out of the box, and you can use default settings to get started. However, there are options to edit them and customize your shipping calculator.
A popup window will now open.
Manually calculating shipping costs can be time-consuming if there are multiple orders on your online store. Plus, the manual calculation would also lead to mistakes, which can impact customer satisfaction.
You’ll save a lot of time and simply automate the process by using a shipping calculator plugin for your WordPress site or WooCommerce site.
First, you’ll need to download and install the Product page shipping calculator for the WooCommerce plugin. If you need help, then please see our guide on how to install a WordPress plugin.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
After setting up shipping zones, you can head back to WooCommerce » Shipping Calculator to change the settings of the Product page shipping calculator for the WooCommerce plugin.
Next, you can switch to the ‘Remove fields’ tab. Here, you’ll see options to remove any field from the shipping calculator.
After that, you’ll need to edit its label and product type, and then enter each region individually and its shipping cost.
We hope this article helped you learn how to add a shipping calculator to your WordPress site. You may also want to see our guide on how to set up form tracking in Google Analytics and the best WooCommerce plugins.
If you scroll down, you’ll see more settings. For instance, the plugin lets you edit the messages used in the plugin, auto-load the shipping method, and more.
There are also options for actions and notifications, form permissions, and scheduling your shipping calculator form.
Simply click the ‘+ Add New’ button at the top.
Formidable Forms doesn’t offer a pre-built template for a shipping calculator. However, you can create one using a blank form template.
Next, you’ll need to click the ‘Edit’ option under your shipping methods.
First, you’ll need to install and activate the Formidable Forms Lite and Formidable Forms Pro plugins. The Lite plugin is free to use, and the premium plugin adds more advanced features to it.
If you haven’t set up shipping zones, then you will need to go to WooCommerce » Settings from your WordPress dashboard and switch to the ‘Shipping’ tab.
Besides that, you can add your products and their prices under the Product Options on the menu on the left.
After entering the form name, click the ‘Create’ button.
Next, Formidable Forms will show different templates to choose from. You can choose from multiple categories, like business operations, calculator, conversational forms, and more.
Setting Up Shipping Zones in WooCommerce
That said, let’s see how you can easily add a shipping calculator to your WordPress site. We’ll also show a way of adding it to your WooCommerce store.
Next, you can visit your WooCommerce store to see the shipping calculator in action.
Next, you can select the product form field and further customize it.
Next, you can enter a name for your new page and click the ‘Create page’ button.
Using a shipping calculator, customers can accurately estimate the total cost of a product they’ll have to pay with delivery. It helps keep your business transparent and builds trust with potential customers.
There are different factors that come into play when calculating shipping costs. Some of these include the price of the product, destination, origin of a shipment, weight, dimensions, type of shipping service, and other variables during the calculation.
Under the Shipping zones section, simply click the ‘Add shipping zone’ button.
Next, you’ll need to enter the license key and click the ‘Save License’ button.
A shipping calculator helps estimate the total cost of shipping automatically. It shows delivery charges and other relevant fees to customers, so they don’t have to manually figure out shipping rates and expenses.
On the next screen, you’ll need to enter a name for your form.
WooCommerce offers 3 shipping methods to choose from. You can select a ‘Flat rate’ and then enter an amount that will be charged for shipping. Or you can choose ‘Free shipping’ and ‘Local pickup’ options.
Next, you can select the Total form field and edit its label, add a description, and more.
You can find the license key in your Formidable Forms account area.
After that, you must go to Formidable » Forms to add a new form.
Formidable Forms offers pre-built styles for your form. Simply select one or create a new style. For this tutorial, we will use the default Formidable Style.
This way, customers will know the shipping charges they’ll have to pay in addition to the cost of the product.
Adding a Shipping Calculator to WordPress Site
If you don’t have a WooCommerce store and want to add a generic shipping calculator to your WordPress site, then you can use Formidable Forms.
After that, you can click the ‘Add shipping method’ button.
For example, you can change the background color and text color to show shipping methods. Or you can choose colors for the buttons that appear in the calculator.
Once that’s done, the plugin will automatically calculate the shipping cost that you set up in the shipping zone section and will add it to the total cost.
Upon activation, you’ll need to go to Formidable » Global Settings from the WordPress dashboard. From here, you can click the ‘Click to enter a license key manually’ link.
For this tutorial, we will use the Formidable Forms Pro plan because it includes pricing fields and more customization options.
In the screenshot above, we changed the label to Shipping Regions and changed the Product Types to Checkboxes. From here, we added different shipping zones and their cost under the Product Options section.
After that, you can switch to the ‘Style’ tab from the top.
For instance, the plugin will show country, state, town/city, and postcode/zip fields by default. You can disable any of the fields that don’t match your shipping zones.
You can click the links below to jump ahead to your preferred section:
Adding a Shipping Calculator to WooCommerce
Edit Shipping Calculator Settings
Once this is done, you’ll need to show a total for your shipping calculator. To do that, simply add the Total form field under the Pricing Fields section to the template.
To start, you can click the ‘Embed’ button in the form builder at the top. This will give you multiple options, like add the form to an existing page, create a new page, or insert manually.
When you’re done, simply click the ‘Save Changes’ button on the side or at the bottom of the page.
If you need help, then please see our guide on how to install a WordPress plugin.
Once you’re done, click the ‘Save changes’ button.
From here, you’ll see a preview of the shipping calculator form in the WordPress content editor.
After you’ve configured the settings, save your changes. You’re now ready to embed your calculator anywhere on your site.
For the sake of this tutorial, we will choose the ‘Create new page’ option.
In the Basic setting tab, you can edit the position of the calculator on the product page and the position of the calculator results.
Formidable Forms also lets you add conditional logic to the form fields and show them based on user responses.
Do you want your visitors to easily calculate the cost of shipping on your website?
Next, you’ll see the drag-and-drop form builder.
There is also an option to insert the template into an application. However, you can leave this to the default setting for this tutorial.