No matter what your discounting strategy, there's a way to make it more visible. In this tip, I will cover the native Zen Cart mechanisms Group Discount and Coupons, as well as my mods Quantity Discounts, Better Together, Military Discount, Combination Discounts, Big Spender, Big Chooser, Free Gift Spender, Free Gift Chooser, BOGO Discount, and Newsletter Discount.

If you haven't done so yet, create your template. I'll assume it's called "custom". Be sure you copy the file includes/templates/template_default/css/stylesheet.css to includes/templates/custom/css/stylesheet.css This is the file we will modify. Note: If you are using Zen Cart 1.5.5 or higher, your template name will be "responsive_classic" if you have not changed it.

Here's a typical "Your Total" box from the payment page:
How can we dress this up?

Well, here's one way - use red text for the discount. We'll call this "Example 1."


Here's another way - use red text on a highlighted yellow background for the discount. We'll call this "Example 2."

These effects are created by stylesheet changes alone - no code changes required.

For Example 1 (red text), add this to your stylesheet:

#otgrouppricing {
    color: #FF0000;
}

For Example 2 (red text on a yellow background), add this to your stylesheet:

#otgrouppricing .totalBox {
    color: #FF0000;
    background-color: yellow;
}
#otgrouppricing .lineTitle {
    color: #FF0000;
    background-color: yellow;
}

Other discounting modules can be done simply by changing the string #otgrouppricing to the appropriate string for the module you are using:

• Coupons - use #otcoupon
• Quantity Discount Contribution - use #otquantitydiscount
• Better Together Contribution - use #otbettertogether
• Military Discount Contribution - use #otmilitarydiscount
• Combination Discounts - use #otcombinationdiscounts
• Big Spender - use #otbigspender
• Big Chooser - use #otbigchooser
• Newsletter Discounts - use #otnewsletterdiscount
• BOGO Discounts - use #otbogodiscount
• Free Gift Spender - use #otfreegiftspender
• Free Gift Chooser - use #otfreegiftchooser

If you're running Discount Preview and you want the same look, just change the cartDiscount tag (in shopping_cart.css) to add whatever you did to the pricing tag above. Here's discount preview with the cartDiscount set to use the color red:


All I did to achieve this was to add

        color: #FF0000;

to the .cartDiscount styling in shopping_cart.css.

This tip was developed in July 2007, and distributed in my newsletter in Issue #2.

---