Place Checkout Countdown Shortcode in templates or hooks

Do you want to place the Checkout Countdown for WooCommerce in a custom location, such as inside the template files of your theme or using a hook? It’s simple.

All you need is to paste echo do_shortcode('[checkout_countdown]'); where you’d like to display the countdown. Below is an example hook which fires at the top of the WooCommerce checkout page. It will allow you to further customize the Countdown, compared to using the standard option of displaying the countdown inside a WooCommerce Notice.

Countdown above the Checkout Page

// Place the Checkout Countdown before the customer details on checkout
function puri_before_customer_details() {
	echo do_shortcode( '[checkout_countdown]' );
 }
add_action( 'woocommerce_checkout_before_customer_details', 'puri_before_customer_details');

This snippet will place the countdown on your checkout page. Copy and paste this example into a custom plugin or your theme’s functions.php file.

Shortcodes are unstyled by default. Have a look at our example CSS styling to get started.

Countdown above the Cart Page

// Place the countdown above the cart page.
function puri_checkout_countdown_before_cart() {
	echo do_shortcode( '[checkout_countdown]' );
}
add_action( 'woocommerce_before_cart', 'puri_checkout_countdown_before_cart', 10 );

This snippet will place the countdown above the cart page. The cart only appears when a customer has something in their cart. So, don’t worry, they won’t see the countdown on an empty cart.

Shortcodes are unstyled by default. Have a look at our example CSS styling to get started.

Additional

You should always use do_shortcode(''); when placing any WordPress shortcodes outside the WP Editor, e.g. Through PHP functions and hooks like above.

You can read more about the do_shortcode function over at the WordPress Developer documentation.

Here is a direct link https://developer.wordpress.org/reference/functions/do_shortcode/

Was this page helpful?