1. Documentation /
  2. Smart Coupons /
  3. How to customize coupon styles in Smart Coupons

How to customize coupon styles in Smart Coupons

Smart Coupons provide a powerful, “all-in-one” solution for gift cards, 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 them on your site and also in the emails.

Coupon designs/styles location

↑ Back to top

Go to your WordPress Admin panel > WooCommerce > Settings > Smart Coupons. You will find all the available coupon designs for your website under ‘Styles’ and for email under ‘Style for email’.

These designs are made keeping in mind the flexibility and the ease they will offer to users. The coupon design system has two parts: Colors & Styles.

Smart Coupons Styles

Colors

↑ Back to top

You get a set of predefined colors/color schemes. Choose one color scheme of your choice from the available options. When you choose one color scheme, you will see the changes 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. Choose one style that can match the look of your website.

Customizing coupon styles

↑ Back to top

You can customize both the coupon components: colors & styles.

Customizing colors

↑ Back to top

If the predefined color schemes don’t match 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 three colors of your choice.

Customizing styles

↑ Back to top

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

  1. Select one coupon style from the 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 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}/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, save this file.

That’s it.

WooCommerce

The most customizable eCommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment