Zen Cart custom software development, Zen Cart modules, Zen Cart Expert eCommerce with Zen Cart!

Zen Cart Discount Highlighting

Donate: This is free software. Show your appreciation by supporting my efforts. Donate

Relevance: Any version of Zen Cart™

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:
Zen Cart total box
How can we dress this up?

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

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

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:

Zen Cart total box

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.