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.

Smart Coupons (version 3.8.0+) provides various styles for displaying coupons on site. The store admin can choose from 6 prebuilt styles. Store admin can also customize coupon style as per their requirements.

Setting ↑ Back to top

Go to WooCommerce > Settings > Smart Coupons. You can find all available designs under ‘Coupon styles‘.

Prebuilt coupon styles ↑ Back to top

Choose a style ↑ Back to top

Set background-color ↑ Back to top

Set text-color & border-color ↑ Back to top

Smart Coupons - Coupon design
Fields to customize coupon design

Custom style ↑ Back to top

When you select this option you will get a new field below the ‘Coupon styles’. This feature is available from version 4.4.0. Here you can add your custom CSS and modify coupon design as you like.

How to customize coupon style in Smart Coupons?

CSS classes to use ↑ Back to top

  1. .coupon-container – main container class of the coupon
  2. .custom-design – additional class to main coupon container to distinguish custom style from other styles
  3. .coupon-content – wrapper class for coupon information(discount,code,expiry date/time)
  4. .discount-info – wrapper class for coupon discount
  5. .code – wrapper class for coupon code
  6. .coupon-expire – wrapper class for coupon expiry date/time

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

Back to the top