How to add a shipping calculator anywhere on your site
After you have installed the WooCommerce Shipping Calculator plugin, it's time to choose how you want it to work. You can either do this in the setup wizard which opens when you first activate the plugin, or on the WooCommerce → Settings → Shipping → Shipping options page in the WordPress admin.
Can't see the Shipping tab? Go to the 'General' tab and make sure that you have some shipping locations selected.
Type a label which will appear above the shipping calculator. For example, you might enter "Calculate Shipping" or "Do you ship to my area?"
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.
In addition, the plugin comes with a
[shipping_calculator] shortcode which you can use to add the shipping calculator anywhere on your site. Simply add the shortcode to a text, code or shortcode block or widget.
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.
Will the 'Position' option work with my theme?
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. This includes all of the themes listed here, which we test and guarantee compatibility with. It also includes any other themes which follow these best practices.
For non-compatible themes, you should add the calculator using either the
[shipping_calculator] shortcode or the
wsc_display_shipping_calculator PHP function instead.
You can also use
wsc_setting_position filter hooks. Please see our article about this.
How can I rename the 'Shipping' tab?
If you have chosen for the shipping calculator appear within its own tab on the product page, then this will be called 'Shipping'. To rename it, see the article on translating WooCommerce Shipping Calculator.
Some of the positions don't exist on my product pages
The list of possible positions for the shipping calculator reflects all of the places where WooCommerce allows us to insert extra content onto the product page. Depending on your theme and your setup, some of these may not be relevant.
For example, if a product doesn't have any reviews, then selecting "After the reviews" is a bit meaningless. However, the shipping calculator will still appear in the correct position on the page, i.e. above where the star rating would appear if there was one.
The shipping calculator is appearing in the wrong place!
The name for each shipping calculator position assumes that your product page has been designed using the standard WooCommerce hooks and filters, in the usual order. If your pages are designed slightly differently then the positions may not reflect the description above. As a result, you may need to use trial and error to find the best position for the shipping calculator.
Can I add the shipping calculator to my product page template programmatically?
Yes - please see our article about this.