Discount Hightlighting

Relevance: Any version of Zen Cart™
Cost: Free, but donation appreciated

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, 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.

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 .totalBox {
    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

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.

If the information you learned reading this site is helping your store make more money, please consider making a donation. Thank you!

Want more Zen Cart?     Tips and Tricks     Contributions     Extensions     Custom Software     Newsletter