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');Code language: PHP (php)

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 );Code language: PHP (php)

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/

Setting the countdown as an ‘info’ notice instead of ‘error’

The above snippets will output the Checkout Countdown directly on the cart and checkout pages. The countdown doesn’t have any styling. This is the most flexible option as you can style it however you like.

What if you’d like to use WooCommerce notices? (less flexible option)

Notices are styled by theme, therefore the color options in Checkout Countdown don’t apply notices. We’ve made the default use the “error” type notice because they usually stand out in most themes. However, if you’d like to change this to an ‘info’ notice instead. Then you can use the shortcode countdown via your child themes functions.php.

// Place the Checkout Countdown before the customer details on checkout.
function puri_before_customer_details() {

	$shortcode = do_shortcode( '[checkout_countdown]' );

	echo wc_print_notice( $shortcode, 'notice' );
}
add_action( 'woocommerce_checkout_before_customer_details', 'puri_before_customer_details' );

// Place the countdown above the cart page.
function puri_checkout_countdown_before_cart() {

	$shortcode = do_shortcode( '[checkout_countdown]' );

	echo wc_print_notice( $shortcode, 'notice' );
}
add_action( 'woocommerce_before_cart', 'puri_checkout_countdown_before_cart', 10 );Code language: PHP (php)