Shipping Calculator for WooCommerce

Shipping Calculator for WooCommerce lets customers check the shipping cost directly on the product page.

Once you have purchased the plugin, you can download the plugin zip file from the Order Confirmation page. You should also receive a confirmation email containing your license key and a download link to the plugin. If you don’t receive this email, please get in touch.

  1. Download the plugin.
  2. Go to your WordPress admin, then go to Plugins → Add New → Upload Plugin.
  3. Click “Choose File”, select the woocommerce-product-page-shipping-calculator.zip file you just downloaded and click “Install”.
  4. Once uploaded, click “Activate”.

Once you’ve installed Shipping Calculator for WooCommerce, remember to keep it up to date. Read more about plugin updates.

Enter your license key

Once you have activated the plugin:

  1. Go to WooCommerce → Settings → Shipping → Shipping Calculator and enter your license key. You can get this from the Order Confirmation page and the email confirmation that was sent to you after purchase.
  2. Click Save Changes to validate and store your license key.

If you get an error saving your license key, please try a second time. If the error persists, please search for your error above or view our article on license key problems.

Plugin settings

Shipping Calculator Screenshot Blog 2
  • Label: Type a label which will appear above the shipping calculator. For example, you might enter “Calculate Shipping” or “Do you ship to my area?”
  • Position: The ‘Position’ dropdown list lets you choose where to display the shipping calculator. This lets you show it on all products that have shipping enabled. Available shipping calculator positions:
    • Don’t display the shipping calculator automatically – Use this if you want to insert the shipping calculator manually. You can do this by adding the shortcode [shipping_calculator] wherever you want it to appear.
    • Above the add to cart button – Above the ‘Add to cart’ section of the page, which includes the add to cart button, quantity field, variation dropdowns, and any additional product options.
    • Above the product meta data – Above any additional product data which is displayed on the page, such as the SKU, categories and tags (which normally appear under the add to cart button).
    • Below the product meta data – Underneath any additional product data which is displayed on the page, such as the SKU, categories and tags (which normally appear under the add to cart button).
    • As an extra tab before the product description – Display the shipping calculator in a ‘Shipping’ tab which appears before the Description tab.
    • As an extra tab after the product description – Display the shipping calculator in a ‘Shipping’ tab which appears after the Description tab.
    • As an extra tab after the additional information – Display the shipping calculator in a ‘Shipping’ tab which appears after the Additional Information tab.
    • As an extra tab after the reviews – Display the shipping calculator in a ‘Shipping’ tab which appears after the Reviews tab.
  • Expand: The ‘Expand’ option only appears when certain positions are selected for the shipping calculator. It contains two radio buttons:
    • Add a link to expand and show the shipping calculator – This displays a text link which customers can click on to view the shipping calculator. The text is the same as the text that you entered for the ‘Label’ option, above.
    • The shipping calculator is always visible – The shipping calculator will always be visible on the page.

Troubleshooting

The shipping calculator provided by Shipping Calculator for WooCommerce will only appear when shipping is correctly set up in your store. It will be hidden if your store has no shipping methods to prevent it from ever looking broken to your customers.

To set up shipping in your store:

  1. Go to WooCommerce → Settings → General and make sure shipping is not disabled in the “Shipping location(s)” option.
  2. Next, go to WooCommerce → Settings → Shipping and set up some shipping zones.
  3. Add one or more shipping options to each shipping zone.

Once you have set up shipping options, the shipping calculator should appear in your selected location on the product pages.

Theme compatibility

Position

When you pre-select a position for the shipping calculator, it will work if your product page is designed using the standard WooCommerce hooks and filters. It will work with any theme which is 100% compatible with WooCommerce in terms of layout.  

For non-compatible themes, you should add the calculator using either the [shipping_calculator] shortcode or the wsc_display_shipping_calculator PHP function (for developers) instead. Please see our article on using hooks for more customization options.

Shipping tab

The shipping tab will be output as a standard WooCommerce tab, similar to Additional information or Reviews. If your theme supports the standard tab layout, it will render this tab. If you want to change the tab name, see our article on changing text.

FAQs

  • How do I enable the shipping calculator on the product page?

    The plugin takes less than 2 minutes to set up, and you can choose all the options in the handy setup wizard.

    1. Install and activate the WooCommerce Shipping Calculator on product page plugin.
    2. The setup wizard will open automatically. Use this to enable the shipping calculator on product pages, and to choose a location for the calculator.
  • Can I choose where the shipping calculator appears on the product page?

    Yes! You have the flexibility to choose from 7 locations where the shipping calculator can appear on the product page.

    The available locations are:

    • Above the add to cart button
    • Above the product meta data
    • Below the product meta data
    • As an extra tab before the product description
    • As an extra tab after the product description
    • As an extra tab after the additional information
    • As an extra tab after the reviews

    In addition, the plugin comes with a shortcode which you can use to insert the WooCommerce shipping calculator into any other location on your WordPress site.

  • Can I customize the look and feel of the WooCommerce Shipping calculator?

    We’ve coded the WooCommerce product page shipping calculator to adapt to suit any WordPress theme. This means that it will integrate beautifully into the rest of your site. For example, the link color will match the links throughout your website.

    You can use custom CSS code to restyle the shipping calculator as needed.

  • What happens if I offer more than one shipping method?

    If a customer enters their location and more than one shipping method is available, then the calculator will list all the available options with the cost alongside each one. Customers can then select their chosen delivery method as part of the checkout process.

  • Does it work with other shipping methods?

    The shipping calculator on the product page will display all the shipping options that you have set up in your store, including those added by other shipping plugins such as UPS.

  • What happens if a customer is outside of my delivery area?

    If a customer enters their address into the shipping calculator, then the following will happen:

    • If your store has shipping methods set up for their location, then the shipping cost will be displayed on the WooCommerce product page.
    • Alternatively, if there are no shipping methods for their location then a message will appear explaining that no delivery methods are available.

    If you allow customers to collect orders from your location then we recommend adding a ‘Local pickup’ shipping method. This is independent from the customer’s location, so it will always appear – even for customers who you will not ship to.

  • Will the shipping cost update if the customer changes their address?

    Yes – customers will always be charged the correct shipping cost, even if they change their address. They can either change their address on the WooCommerce product page shipping calculator, or on the checkout page. Either way, the shipping price will automatically be recalculated and the shipping cost updated.

  • Can I add other information to the “Shipping” tab?
    Used alone, the WooCommerce Shipping Calculator plugin only adds the shipping calculator to the ‘Shipping’ tab on the product page. If you also want to add other information, such as text or a table of shipping options, then you can do this by using it with Tab Manager. Use this plugin to create a custom ‘Shipping’ tab. You can then insert the WooCommerce Shipping Calculator [shipping_calculator] shortcode into the tab along with all the other information that you wish to display.
  • Does the calculator show the total shipping cost or just the current product’s cost?

    The Shipping Calculator for WooCommerce  plugin lets you show the shipping calculator on the product page so that customers can check the cost before adding a product to their cart.

    If there are no products already in the cart, then the shipping calculator on the product page will show the cost for the current product only. Alternatively, if there are already products in the cart, then the calculator will show the total cost based on the current cart contents plus the product on the current page.

    This gives customers the most accurate indication of what the shipping cost will be, based in the information which is available at that stage.

    Depending on your shipping settings, it is possible that the shipping cost will increase as the customer continues adding bigger quantities and products to their cart. This will be clearly shown on the checkout, and also the cart if you are displaying the shipping calculator on the cart page.

Was this article helpful?

Need Support?

Please reach out if you can't find the answer!
Contact us