There are 2 widgets of Countdown Cart app placed below your Add-to-cart button by default. They are Countdown Timer and Stock Countdown widget. Please follow my instruction below to customize the positions of these widgets. 

In this article, I will instruct you how to detect an element on your product page and how to put the widgets below a specific element,

Step 1: Use browser inspector to find The ID Or Class Name of an element

The browser inspector is a browser feature that allows you to view specific snippets of a web page element’s HTML and CSS.  You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes and copy the code for customization.

- On your product page, click the right button >> Click Inspect >> You will see the Inspector Window of your Product page

- Click on the icon circled red below in the Inspector Window to inspect an element, in this example, let's detect the Add to Cart button

- Hover to Add to Cart button, its specific snippets will be highlighted. Here you can find Add to Cart button's ID/Class as circled red below. Remember to copy it.

Step 2: Go to Countdown Cart backend >> Access Countdown Timer or Stock Countdown tab >> Click Wanna place it in a custom position

Step 3: Enter the Class/ID found in Step 1 to the box


  • If the element has both ID and Class, please use ID
  • Add "#" (hash) before the ID or "." (dot) before the class before entering it in the box. For example:

                 - If you find only ID or Class, please add #ID or .Class to be box

                 - If you find both ID and class, please add #ID to the box

Finally, please hit Save to complete the setting.