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 the 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: Right click on your mouse >> Click Inspect >> You will see the Inspector Window of your Product page
- This is the Inspector Window: Click on the icon on the upper left corner to inspect an element of the page
- In this example, let's detect the Add to Cart button: Hover to Add to Cart button while opening the Inspector Window, the specific snippets of the Add To Cart button 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.