How to select css selector for discount ribbon and offer countdown in X-Discount

As you know opencart has many theme on the marketplace and it is quite impossible to add predefined patch to all available templates. By X-Discount’s offer countdown and discount ribbon has been configured for default theme. But it is possible to show countdown and ribbon on any theme. In the Ribbon & Countdown Setting tab of the X-Discount module allow you defined your own css selector where the ribbon or countdown would appear.

Let me show you how to find the selector using chrome debugging tool. Let’s assume you want to place ribbon in the product listing page. To do so, please navigate to any product listing page. Then click the mouse right button over the any product box and then click the Inspect option. It will show up chrome debugging tool. Now find out a CSS Class that must be unique so it can be used to differentiate product box across the page. For example, for the default theme css selector .product-layout is the unique.

Selector for the Product Box in default theme

Once you choose the selector for the product box, you will have to find out a selector where the X-discount actually put the ribbon in. For example, in default theme it could be .product-thumb .image

Selector for ribbon in the listing page

Similarly you can get your selector for the details. Note in the detail page, the countdown would be placed before the given selector. For example, in the default theme, the selector #product could be good choice.

Countdown in the product detail page

However you have any problem to get your selector, don’t hesitate to request for support. Have a good day!

Leave a Reply