[Dev] Shipping Calculator for WooCommerce

Filters

wsc_script_params

Properties assigned to a global-scope variable containing WooCommerce Shipping Calculator settings passed to the front-end scripts.

Arguments

• $script_data (array): Array of WooCommerce Shipping Calculator parameters.

Example

add_filter( 'wsc_script_params', function( $script_data ) {
	// your code to alter $script_data here...

	return $script_data;
}

wsc_load_styles

Filter to determine whether to load the plugin styles or not.

add_filter( 'wsc_load_styles', '__return_true' );

wsc_load_scripts

Filter to determine whether to load the plugin scripts or not.

add_filter( 'wsc_load_styles', '__return_true' );

wsc_shipping_calculator_position_action

Filter to change the position of the shipping calculator by chosing a specic theme template action hook.

add_filter( 'wsc_shipping_calculator_position_action', function( $action ) {
	// Above the add to cart button on the Storefront theme.
	return 'woocommerce_single_product_summary';
} );

wsc_shipping_calculator_position_priority

Filter to change the priority of the above action hook that determinies position of the shipping calculator on the theme template.

add_filter( 'wsc_shipping_calculator_position_priority', function( $priority ) {
	// Above the add to cart button on the Storefront theme.
	return 29;
} );

wsc_shipping_calculator_shortcode_output

Filter to change the output of the shipping_calculator shortcode..

add_filter( 'wsc_shipping_calculator_shortcode_output', function( $out ) {
	return $out;
} );

wsc_load_using_ajax

Filter that determines if the shipping calculator should be loaded using AJAX.

add_filter( 'wsc_load_using_ajax', function( $load_using_ajax ) {
	if ( ! is_user_logged_in() ) {
		$load_using_ajax = true;
	}
	return $load_using_ajax;
} );

wsc_is_shipping_calculator

Filter that determines if the current page is a product page where the shipping calculator can be shown.

add_filter( 'wsc_is_shipping_calculator', function( $is_shipping_calculator ) {
	if ( is_product() ) {
		return true;
	}
	return $is_shipping_calculator;
} );

wsc_is_shipping_calculator_ajax_call

Filter that determines whether the current ajax call is made by the product page shipping calculator.

add_filter( 'wsc_is_shipping_calculator_ajax_call', function( $is_ajax_call ) {
	if ( isset( $_REQUEST[ 'wsc' ] ) ) {
		return true;
	}
	return $is_ajax_call;
} );

wsc_ajax_url_arg

 The ajax url argument that is used to trace the shipping calculator ajax calls.

add_filter( 'wsc_ajax_url_arg', function( $ajax_url_arg ) {
	return 'wsc';
} );

wsc_setting_<setting>

Filter to change a WooCommerce Shipping Calculator setting.

Available settings:

• <setting> (string): label, position or expand.

add_filter( 'wsc_setting_position', function( $value, $setting ) {
	// Gets the stored setting value from the database.
	$value = get_option( 'wsc_' . $setting );

	// Do something.
	$value = 'above_title';

	return $value;
}, 10, 2 );

woocommerce_get_settings_calculator

Filter to change the admin WooCommerce settings fields.

add_filter( 'woocommerce_get_settings_calculator', function( $plugin_settings ) {
	return $plugin_settings;
} );

wsc_shipping_calculator_position_action_mapping

Filter to change the shipping calculator position actions hooks and respective priorities.

add_filter( 'wsc_shipping_calculator_position_action_mapping', function( $position_action ) {
	$position_actions['above_title'] = 'woocommerce_single_product_summary:4';
	return $position_action;
} );

wsc_select_shipping_method

Filter to allow the selection of the shipping method within the shipping calculator.

add_filter( 'wsc_select_shipping_method', '__return_true' );

wsc_shipping_totals_class

Filter to add extra classes to the main shipping calculator div.

add_filter( 'wsc_shipping_totals_class', function( $position_action ) {
	return 'my-custom-css-class';
} );

Actions

wsc_shipping_totals_before_shipping

Fired before the shipping calculator is displayed.
This hook is used to estimate the shipping before shipping calculator is displayed.

wsc_shipping_totals_after_shipping

Fired after the shipping calculator is displayed.

Template functions

wsc_display_shipping_calculator

This function outputs the shipping calculator.
This function should be used directly on your child theme template file.

// Display the shipping calculator.
wsc_display_shipping_calculator();

wsc_load_using_ajax

Verifies if the shipping calculator is being loaded using AJAX.

// Verifies if the shipping calculator is being loaded using AJAX.
if ( wsc_load_using_ajax() ) {
    // Do something.
}

wsc_is_shipping_calculator

Verifies if the current page is the product page where the shipping calculator is shown.

// Verify if we are on a page where the shipping calculator can be used.
if ( wsc_is_shipping_calculator() {
    // Do something.
    wsc_display_shipping_calculator();
}

wsc_is_shipping_calculator_ajax_call

Verifies if it is an ajax call made by the shipping calculator on the product page.

// Verify if the AJAX call was made by the shipping calculator.
if ( wsc_is_shipping_calculator_ajax_call() {
    // Do something.
    ...
}

wsc_get_setting

Gets a plugin setting.

// Gets the chosen position defined on the admin settings area.
$position = wsc_get_setting( 'position' );

Position in page programmatically

The Shipping Calculator for WooCommerce 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.

You can use the:

• PHP function wsc_display_shipping_calculator() directly in your child theme template file.
• Hook filters wsc_shipping_calculator_position_action and wsc_shipping_calculator_position_priority when outside a tab.
• Hook filter wsc_setting_position when 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';
} );