This is a tutorial to include Countdown Timer and Inventory Bar on the grid.

Some users asked us to why this not a native feature inside the plugin?

Answer:

Different theme authors use different techniques to modify the native WooCommerce grid. Sometimes they have hover effects , badges , title styling and many other changes. And it makes sense because they want to beautify the grid.

Unfortunately, in this process the native grid structure of WooCommerce is heavily changed. And for us it is impossible to detect the change and modify our code as per each theme.

With that said you can follow this approach to get countdown timer and counter bar to work on grids. You may need to contact your theme developer. But this document will guide you to follow the right approach.

Paste this piece of code in your theme’s function.php

Here is the code for Countdown Timer

This code echos the shortcode

[finale_countdown_timer skip_rules="no"]

under the product title programmatically.

Here is the code for Inventory Bar

This code echos the shortcode

[finale_counter_bar skip_rules="no"]

under the product title programmatically.

Pasted this code and Elements still don’t show up..what’s next steps?

So after you have pasted the code and so this would mean that the you would have to contact the theme author.

You would need to contact your theme author and ask this:

" I am trying to show my own custom element (countdown timer or counter bar) on grid page using this code. But it seems you have modified the native WooCommerce templates. Can you modify below code such that I am able to get my custom element working.

***PASTE ABOVE SNIPPET HERE****

Thanks for your help."

PS: I am marking my plugin developer (XLPlugins) in loop so you can joint work it out.

Once the modified code comes from your theme author paste in theme’s function.php.

We would be more than happy to be in loop with your developer to get it solved for you. When you raise a support ticket also send a copy of response to support@xlplugins.com and we shall follow up with your developer and get it set up for you.