Animated Countdown

We have received requests to change the countdown element text from Seconds to Sec, Minutes to Min and so on. There are two ways to do this and each one has it’s own advantage and disadvantage. Let’s discuss both the methods.

Method 1: Using a function in your child theme is probably the easiest way to make the changes so you do not have to worry about losing the changes when the theme is updated. However, the jQuery is executed after the page loads. The default text is then replaced when the jQuery script runs usually within a second. This creates a flash of text. By using the below function in your child theme functions.php file, you can add your custom text to the countdown element.

// Change countdown text
function custom_countdown_text(){
?>
<script>
jQuery(window).on('load', function(){
jQuery('.av-countdown-timer.my-custom-countdown').each(function() {
jQuery(".av-countdown-time-label").replaceWith(function() {
return "</p>
<p>
</p>
<p>
</p>
<p>
</p>
<div class="+"av-countdown-time-label"+">" + this.innerHTML + "</div>
<p>
</p>
<p>
</p>
<p>
</p>
<p>";
});
// Replace your custom text here
var
seconds = "Sec",
minutes = "Min",
hours = "Hrs",
days = "D",
weeks = "W",
months = "M",
years = "Y";

jQuery(".av-countdown-seconds .av-countdown-time-label").text(seconds);
jQuery(".av-countdown-minutes .av-countdown-time-label").text(minutes);
jQuery(".av-countdown-hours .av-countdown-time-label").text(hours);
jQuery(".av-countdown-days .av-countdown-time-label").text(days);
jQuery(".av-countdown-weeks .av-countdown-time-label").text(weeks);
jQuery(".av-countdown-months .av-countdown-time-label").text(months);
jQuery(".av-countdown-years .av-countdown-time-label").text(years);
});
});
</script>
<!--?php<br /--> }
add_action('wp_head', 'custom_countdown_text');

Method 2: By editing the required PHP files we can change the countdown text. This method loads your custom text instantly unlike the previous one but you have to keep an eye on the changelog when the theme update is released and manually update the PHP file every time there is an update released.

Before getting started, the Enfold child theme should be installed and activated.

Step 1:  First, create a folder named “shortcodes” in your child theme directory wp-content\themes\enfold-child.
Step 2: Go to wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\countdown and copy the countdown.php file to the child-theme\shortcodes folder.
Step 3: Open the countdown.php file and look for the below code. Here you will notice the different countdown text after “label_multi” go ahead and change the text from Seconds to Sec and so on.

$this->full_time_array = array(
				
					1 => array("interval" => 1000		 , 'class'=>'seconds', 	'label' => __('Second', 'avia_framework' ),	'label_multi' => __('Seconds',  'avia_framework')),
					2 => array("interval" => 60000		 , 'class'=>'minutes', 	'label' => __('Minute', 'avia_framework' ),	'label_multi' => __('Minutes',  'avia_framework')),
					3 => array("interval" => 3600000	 , 'class'=>'hours', 	'label' => __('Hour',  	'avia_framework'),	'label_multi' => __('Hours',  	'avia_framework')),
					4 => array("interval" => 86400000	 , 'class'=>'days', 	'label' => __('Day',  	'avia_framework' ), 'label_multi' => __('Days',  	'avia_framework')),
					5 => array("interval" => 604800000	 , 'class'=>'weeks', 	'label' => __('Week',  	'avia_framework' ),	'label_multi' => __('Weeks',  	'avia_framework')),
					6 => array("interval" => 2678400000	 , 'class'=>'months', 	'label' => __('Month',  'avia_framework' ),	'label_multi' => __('Months',  	'avia_framework')),
					7 => array("interval" => 31536000000 , 'class'=>'years', 	'label' => __('Year',  	'avia_framework' ),	'label_multi' => __('Years',  	'avia_framework'))
				
				);

Step 4: Finally, open the functions.php file in your child theme and add the code provided in this link to add the new countdown element from child theme to ALB.