Tag Archives: xdiscount

X-Feepro Vs X-Discount

Leave a reply

Both are independent modules and has a different purpose.
X-Fee/Discount Pro is an `Order total` module that deals with shopping cart products and their values like cart weight, cart quantity, etc.  This fee/discount will appear on the `Order Total Section`. You can create a discount/fee based on the various parameters with it. For example, Payment processing fee, any surcharge, etc. Also, you can create Order discounts based on the various cart parameters.

image.png

On the contrary, `X-Discount/Special Price` is intended to creating a product special price and quantity discount. It works exactly the same as the OC default Special Price and Quantity discount but it gives an option to control special price and qty disocunt from a single place in a convenient way.

image.png

In a nutshell, X-Feepro is intended to create an Order Discount/Fee and X-Discount is intended to create a Product discount.

How to customize the theme of Ribbon and Countdown in X-Discount

Leave a reply

It is possible to change the theme colour of the ribbon and countdown in X-Discount. To change your theme, you will have to put your custom CSS rules to the field Custom CSS located in the Global Setting tab of the X-Discount.

Custom CSS in X-Discount

Here are examples of the custom ribbon and countdown:

Example 1: Red Round Ribbon

Required CSS rules

.xdiscount_ribbon {
     background: #fc3f00;
     font-weight: bold;
     border-radius: 50%;
 }
 .xdiscount_ribbon:before {
     display:none;
 }

Example 2: Yellow Ribbon in right side

Required CSS rules

.xdiscount_ribbon_container {
     right: 3px;
     left: auto;
 }
 .xdiscount_ribbon {
     background: #fcd800;
     color: #111;
     font-weight: bold;
 }
 .xdiscount_ribbon:before {
     display:none;
 }

Example 3: Countdown white background

Required CSS rules

.xdiscount_content ._box {
     border: 1px solid #319cd1;
     background-color: #f5f5f5;
     position: relative;
 }
 .xdiscount_content ._box ._box_label {
     position: absolute;
     bottom: 2px;
     width: 100%;
 }
 .xdiscount_content ._box ._box_content {
     padding: 15px 0 25px 0;
     background-color: #fff;
     color: #3098cc;
 }

Example 4: Black Countdown

Required CSS rules

.xdiscount_content ._box {
     border: none;
     background-color: transparent;
 }
 .xdiscount_content ._box ._box_content {
     padding: 15px 0;
     background-color: #020202;
     box-shadow: 0 0 5px 0px rgba(0,0,0,0.5);
 }

Example 5: Gradient Countdown

Required CSS rules

.xdiscount_content ._box {
     border: 1px solid #7bc2ec;
     background-color: #f5f5f5;
 }
 .xdiscount_content ._box ._box_content {
     font-size: 22px;
     padding: 14px 0px;
     background: linear-gradient(0deg, #3f6a7f, #84d6ff);
     color: #fff;
     box-shadow: 0px 0px 5px 0px rgb(77, 171, 228);
 }
 .xdiscount_content ._box ._box_label {
     background: #e4f6ff;
     border-bottom: 1px solid #7bc2ec;
 }

Example 6: Round Countdown

Required CSS rules

.xdiscount_content ._box {
     border: none;
     background-color: transparent;
     position: relative;
 }
 .xdiscount_content ._box ._box_content {
     padding: 22px 0;
     background-color: #d7f2ff;
     color: #101010;
     border-radius: 50%;
     height: 80px;
     font-size: 28px;
     border: 3px solid #319cd0;
 }
 .xdiscount_content ._box ._box_label {
     position: absolute;
     bottom: 8px;
     width: 100%;
     color: #1c84b7;
 }

Example 7: Green Countdown

Required CSS rules

.xdiscount_content ._box {
    border: 1px solid #ccc;
    background-color: #3fbf91;
    padding: 5px;
}
.xdiscount_content ._box ._box_content {
    background-color: #288267;
    color: #fff;
}
.xdiscount_content ._box ._box_label {
    color: #fdfdfd;
    padding: 0px 0px 2px 0px;
}

Example 7: Without Hour Box

Countdown without hour box

Required CSS rules

.xdiscount_content ._days {
    display: none;
}
.xdiscount_content ._box {
    flex-basis: 33%;
}

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

Leave a reply

As you know opencart has many themes on the marketplace and it is quite impossible to add predefined patches to all available templates. By X-Discount’s offer countdown and discount, the ribbon has been configured for the default theme. But it is possible to show countdown and ribbon on any theme. The Ribbon & Countdown Setting tab of the X-Discount module allows you to defined your own CSS selector where the ribbon or countdown will have appeared.

Let me show you how to find the selector using the chrome debugging tool. Let’s assume you want to place a ribbon on the product listing page. To do so, please navigate to any product listing page. Then click the mouse right button over 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 boxes across the page. For example, for the default theme CSS selector .product-layout is 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 the 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 a good choice.

Countdown in the product detail page

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