Customized Countdowns

Hello!

I came across an interesting question on how to display Flatsome’s countdown without weeks box. There’s no option to do this in settings (as of April ’22), but it could be quite easy javascript task.

I tried to achieve this in a child theme, but for some reason the file is being ignored and taken from the main theme anyway. This means that below solution is not too clean, but may work as a temporary workaround (until you update your theme, which will overwrite our changes). You will need to repeat this process after the theme update.

All our changes will take place in one file, located in wp-content/themes/flatsome/inc/shortcodes/ux_countdown.js
PLEASE MAKE SURE TO TAKE A BACKUP OF THIS FILE BEFORE MAKING ANY CHANGES

OPTION1: Skip weeks box in the countdown

Replace contents of wp-content/themes/flatsome/inc/shortcodes/ux_countdown.js with the below:

Flatsome.behavior('ux-countdown', {
 attach: function (context) {
	jQuery('[data-countdown]', context).each(function () {
	 var $this = jQuery(this), finalDate = jQuery(this).data('countdown');

	 var t_hour = jQuery(this).data('text-hour'),
     t_min = jQuery(this).data('text-min'),
     t_week = jQuery(this).data('text-week'),
     t_day = jQuery(this).data('text-day'),
     t_sec = jQuery(this).data('text-sec'),
     t_min_p = jQuery(this).data('text-min-p'),
     t_hour_p = jQuery(this).data('text-hour-p'),
     t_week_p = jQuery(this).data('text-week-p'),
     t_day_p = jQuery(this).data('text-day-p'),
     t_sec_p = jQuery(this).data('text-sec-p'),
     t_plural = jQuery(this).data('text-plural');

     var hours_plural = t_hour+t_plural;
     var days_plural = t_day+t_plural;
     var weeks_plural = t_week+t_plural;
     var min_plural = t_min;
     var sec_plural = t_sec;

     if(t_hour_p) hours_plural = t_hour_p;
     if(t_min_p) min_plural = t_min_p;
     if(t_week_p) weeks_plural = t_week_p;
     if(t_day_p) days_plural = t_day_p;
     if(t_sec_p) sec_plural = t_sec_p;

		 $this.countdown(finalDate).on('update.countdown', function (event) {
		      var format = '%-H%!H:'+t_hour+','+hours_plural+';%-M%!M:'+t_min+','+min_plural+';%-S%!S:'+t_sec+','+sec_plural+';';
      

          if(event.offset.days > 0) { format = ''+ (event.offset.days +(event.offset.weeks*7)) +'%!d:'+t_day+','+days_plural+';' + format; }

			 
			  jQuery(this).html(event.strftime(format));

		 }).on('finish.countdown', function (event) {
        var format = '%-H%!H:'+t_hour+','+hours_plural+';%-M%!M:'+t_min+','+min_plural+';%-S%!S:'+t_sec+','+sec_plural+';';
        jQuery(this).html(event.strftime(format));
		 });
	});
 }
});

OPTION2: Show days as the only box

Replace contents of wp-content/themes/flatsome/inc/shortcodes/ux_countdown.js with the below:

Flatsome.behavior('ux-countdown', {
 attach: function (context) {
	jQuery('[data-countdown]', context).each(function () {
	 var $this = jQuery(this), finalDate = jQuery(this).data('countdown');

	 var t_hour = jQuery(this).data('text-hour'),
     t_min = jQuery(this).data('text-min'),
     t_week = jQuery(this).data('text-week'),
     t_day = jQuery(this).data('text-day'),
     t_sec = jQuery(this).data('text-sec'),
     t_min_p = jQuery(this).data('text-min-p'),
     t_hour_p = jQuery(this).data('text-hour-p'),
     t_week_p = jQuery(this).data('text-week-p'),
     t_day_p = jQuery(this).data('text-day-p'),
     t_sec_p = jQuery(this).data('text-sec-p'),
     t_plural = jQuery(this).data('text-plural');

     var hours_plural = t_hour+t_plural;
     var days_plural = t_day+t_plural;
     var weeks_plural = t_week+t_plural;
     var min_plural = t_min;
     var sec_plural = t_sec;

     if(t_hour_p) hours_plural = t_hour_p;
     if(t_min_p) min_plural = t_min_p;
     if(t_week_p) weeks_plural = t_week_p;
     if(t_day_p) days_plural = t_day_p;
     if(t_sec_p) sec_plural = t_sec_p;

		 $this.countdown(finalDate).on('update.countdown', function (event) {
		     

           var  format = ''+ (event.offset.days +(event.offset.weeks*7)) +'%!d:'+t_day+','+days_plural+';';

			 
			  jQuery(this).html(event.strftime(format));

		 }).on('finish.countdown', function (event) {
        var format = '%-H%!H:'+t_hour+','+hours_plural+';%-M%!M:'+t_min+','+min_plural+';%-S%!S:'+t_sec+','+sec_plural+';';
        jQuery(this).html(event.strftime(format));
		 });
	});
 }
});