How to position the shipping calculator in my product page programmatically
The WooCommerce Shipping Calculator plugin makes it easy to select from a range of common positions on the single product page. You can do this using the Position option in the setup wizard or on the settings page.
We have also provided PHP functions and filters which allow developers to insert the shipping calculator programmatically. This is a developer-level task and if you don't know how to do this then we recommend asking your developer, or posting a job on Codeable so that one of their WordPress experts can send you a quote.
You can either use the:
- PHP function
wsc_display_shipping_calculator()directly in your child theme template file. - Hook filters
wsc_shipping_calculator_position_actionandwsc_shipping_calculator_position_prioritywhen outside a tab. - Hook filter
wsc_setting_positionwhen you want to display the calculator as an extra tab on the product page.
PHP function
Lets assume that you are using the Storefront theme and you want to position the shipping calculator above the price.
You will need to copy the file:
/wp-content/plugins/woocommerce/templates/single-product/price.php
into
/wp-content/themes/storefront-child/woocommerce/single-product/price.php
and edit that file and add the wsc_display_shipping_calculator() function:
<?php
...
global $product;
// Display the shipping calculator.
wsc_display_shipping_calculator();
?>
<p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>?>
Hook filters
Outside a tab
Lets assume that you are using the Storefront theme and you want to position the shipping calculator above the price.
Analyzing the /wp-content/plugins/woocommerce/templates/content-single-product.php
...
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
...We can verify that the price is set on the:
action: woocommerce_single_product_summary
priority: 10
To position the shipping calculator above the price, we should use the same action hook but with a priority inferior than 10, for instance 9, so that it is displayed above the price.
/*
* Position the shipping calculator above the price.
*/
add_filter( 'wsc_shipping_calculator_position_action', function( $action ) {
// Price action hook name.
return 'woocommerce_single_product_summary';
} );
add_filter( 'wsc_shipping_calculator_position_priority', function( $priority ) {
// Above the price.
return 9;
} );
Note: If we wanted to display the calculator bellow the price, we would only need to change the priority to a number superior than 10, for instance 11.
Many themes don't use the default WooCommerce action hooks to show the price on the website but they use their own filters. For instance, Astra theme have 2 filters that can be used to show the calculator above or bellow the price:
...
do_action( 'astra_woo_single_price_before' );
woocommerce_template_single_price();
do_action( 'astra_woo_single_price_after' );
...So, if we want to display the calculator above the price for the Astra theme, we could use the following filter:
/*
* Position the shipping calculator above the price for the Astra theme.
*/
add_filter( 'wsc_shipping_calculator_position_action', function( $action ) {
return 'astra_woo_single_price_before';
} );
As an extra tab
If you want to display the calculator as a tab you need to use the filter and set the value as a string composed by 3 elements:
- 'before' or 'after'
- the name of an existing tab
- the string "_tab"
Examples: after_description_tab, before_description_tab, after_a-custom-tab-id_tab
/*
* Position the shipping calculator as an extra tab afer the description tab.
*/
add_filter( 'wsc_setting_position', function( $position ) {
return 'after_description_tab';
} );