How to customize coupon style in Smart Coupons

Smart Coupons provide a powerful, “all-in-one” solution for gift certificates, store credits, discount coupons, and vouchers extending the core functionality of WooCommerce coupons.

This doc article explains how you can change coupon style and design coupons to display it on your site.

Note: All the screenshots on this page are from version 4.9.0. The appearance of fields & steps mentioned in this doc might differ if you’re using the older version.

Setting ↑ Back to top

Go to WooCommerce > Settings > Smart Coupons. You can find all available designs for the website under Styles and for email under Style for email.

In version 4.9.0 of Smart Coupons, a new set of coupon designs were introduced. These designs were added by keeping in mind the flexibility & the ease it will offer. The new coupon design system has 2 parts: Colors & Styles.Smart Coupons Styles

Colors ↑ Back to top

A set of predefined colors/color scheme is provided. You can easily choose one color scheme of your choice from this. When you’ll choose one color, you can see the effect immediately on the same page under Styles. This will make it easier to choose a color scheme for coupons for your website.

Styles ↑ Back to top

Same as Colors, a set of predefined Styles are provided for coupons. You can choose one style which can go with the look of your website.

Customize coupon style ↑ Back to top

You can customize both the component of coupons: colors & styles.

Customize colors ↑ Back to top

If the predefined color schemes don’t match with your website’s color scheme, you can make one color scheme of your choice under Customize colors. With this setting, you’ll be able to set 3 colors of your choice.

Customize styles ↑ Back to top

Sometimes you may need to remove some part of the coupon which is displaying on your website or you may want to add some more detail or you may want to completely replace the style with your own style. It’s possible to do it with Smart Coupons 4.9.0. Let’s see how it can be done:

  1. Select one coupon style from Styles which is closer to your desired result and Save the settings.
  2. Now, we’ll need to find the template file for the selected coupon style that we’ll override. Here’s the list of coupon’s styles & their respective template file
    Coupon style Template file
    Smart Coupons Style Basic basic.php
    Smart Coupons Style Clipper clipper.php
    Smart Coupons Style Cutout cutout.php
    Smart Coupons Style Deal deal.php
    Smart Coupons Style Deliver deliver.php
    Smart Coupons Style Festive festive.php
    Smart Coupons Style Flat flat.php
    Smart Coupons Style Promotion promotion.php
    Smart Coupons Style Shipment shipment.php
    Smart Coupons Style Special special.php
    Smart Coupons Style Ticket ticket.php
    Smart Coupons Style for Email email-coupon.php
  3. Go to the file path wp-content/plugins/woocommerce-smart-coupons/templates/coupon-design/
  4. Find the template for your coupon styles in the mentioned path.
  5. Once found, copy that template file & paste at this path: wp-content/themes/<child-theme-of-your-website>/woocommerce/coupon-design/
  6. If you find any folder missing in the above-mentioned path, you can create those directories.
  7. Now open this template file in an editor
  8. Make the changes as per your choice, like removing an element, changing any text, adding more details like CSS, etc
  9. Once you’re done with the changes you can save this file. That’s it.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top