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.