In this WooCommerce Tutorial tips i will share on How to Add the Sales Countdown Timer in the Product Page, this Countdown Timer function is not available in WooCommerce plugin by default, so to show this timer we need to add a piece of php code in functions.php to show it.

To work this properly, off course you need to set the Sales Price Dates on the Product first, once you add the end date of sale price this timer will show properly well.

Adding this Sales Countdown Timer on your eCommerce site is the part of quick act psychology to the customer to buy immediately, your store sale’s will increase by 20% on this timer technique. There have a few of sales trigger technique and will share here in the future.

You can Download the Work Files or Plugin Version at the end on this tutorial, and let get started.

See the Screenshot Demo

Step 1: Set First the Sales Price Dates on the Product

Step 2: Functions.php

add this short php code your active theme functions.php

• /wp-content/themes/yourtheme/functions.php

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// 3. echo Sale Timer
function sales_timer_echo_product() {
		
		global $product;
		$regular_price 	= get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
		if(!empty($regular_price)) {
	?>
		<p id="sales_timer_display" style="color:red" data-date="<?php echo date('Y-m-d',$regular_price);?>"></p>	
	<?php
		}
		
} // end function
add_action( 'woocommerce_single_product_summary', 'sales_timer_echo_product', 12 ); // hook number

function sales_timer_scripts() {
				wp_enqueue_script('countdown_plugin_min', "/wp-content/themes/" . basename(dirname(__FILE__)) . "/customjs/jquery.plugin.min.js" , array("jquery"), '', true); 
				wp_enqueue_script('countdown_js_min', "/wp-content/themes/" . basename(dirname(__FILE__)) . "/customjs/jquery.countdown.min.js" , array("jquery"), '', true); 
				wp_enqueue_script('custom_product_countdown', "/wp-content/themes/" . basename(dirname(__FILE__)) . "/customjs/product-countdown.js" , array("jquery"), '', true);
}
add_action( 'wp_enqueue_scripts', 'sales_timer_scripts' );

Now As you see on this code in the wp_enqueue_scripts

we include 3 JavaScript files, to work the countdown timer as we expected, we use the jquery timer plugin by keith-wood

These files added on the active theme directory, that we get from keith-wood plugin.

• /wp-content/themes/yourtheme/customjs/jquery.plugin.min.js
• /wp-content/themes/yourtheme/customjs/jquery.countdown.min.js

and our custom JavaScript is

• /wp-content/themes/yourtheme/customjs/product-countdown.js

Step 3: The Custom Script

Create a file product-countdown.js and save in this directory

• /wp-content/themes/yourtheme/customjs/product-countdown.js

and add the code below.

jQuery(function($) {

		var datadate = $("#sales_timer_display").attr("data-date");
		
		var year = datadate.split("-")[0];
		var month = datadate.split("-")[1];
		var days = datadate.split("-")[2];

		var dayz = new Date(year, month - 1, days);

		$('#sales_timer_display').countdown({ 
							until: dayz, 
							format: 'DHMS', 
							padZeroes: true,
							onExpiry: lit_st_sale_timer_echo_producte_expire,
							layout: 'Hurry up! Sale ends in {dn} {dl} {hn} {hl} {mn} {ml} {sn} {sl}'
						});
						
		var periods = $('#sales_timer_display').countdown('getTimes'); 

		if(periods == "0,0,0,0,0,0,0") {
			$("#sales_timer_display").css({ "display" : "none" });
		}

		function lit_st_sale_timer_echo_producte_expire() {
			$("#sales_timer_display").css({ "display" : "none" });
		}
	
}); // jquery end

As you see the custom jquery script we get the date in sales_timer_display variable, the we split and display the countdown, you can customize this if you want, for more countdown customization visit keith-wood for more documentation.

Download

Download Work Files
Download Plugin Version

Important Notes:

If you use this script for template selling or plugin selling or any kind of selling like website themeforest.net / any theme, plugins selling sites, Don’t include a link like ‘Credit to axlmulat.com’ or any link from axlmulat.com.

Again !!! if you are a TEMPLETE SELLER / PLUGIN SELLER. don’t Credit a link

You can use this script all you want…

Thank you and happy coding…

Like this post? kindly like and share to your friend, thank you for reading clearly.