Home > Docs > Smart Coupons for WooCommerce > How to Customize WooCommerce Coupon Design and Layout

How to Customize WooCommerce Coupon Design and Layout

Last updated on April 24, 2026

To customize the appearance of coupons created with the Smart Coupons for WooCommerce plugin, navigate to Smart Coupons > General Settings > Customize, and choose from various pre-designed templates specifically for your active, redeemed, expired, or email coupons.

Customize WooCommerce Coupon Appearance

Once you have installed and activated the plugin:

  1. From the WordPress dashboard, Head to Smart Coupons > General settings > Customize > Coupons.
  2. From here, you can customize WooCommerce coupons by adjusting the layouts and color schemes of various types of coupons, such as:
    • Active Coupons
    • Redeemed Coupons
    • Expired Coupons
    • Email coupon (Coupons visible in emails received in user inbox)
Customize WooCommerce Coupons
Customize Coupons

Personalize Coupon Layout

After choosing the coupon you’d like to customize, click on Edit layout to personalize the style and design. You can choose from a wide range of coupon layouts. Choose a layout that suits your branding.

Available coupon styles
Available coupon styles – Customize WooCommerce Coupons
👉

The number of available templates may vary based on the coupon type. Email coupons have fewer layout designs available than others.

Sync with Store Color Scheme

After you choose a coupon layout, feel free to explore the color palette on the right! It’s a great way to choose a color scheme that helps you customize WooCommerce coupons to reflect your store’s unique branding.

Color schemes for coupons
Color schemes for coupons

Once you have finished all the customizations, click on Save Changes to apply the new styles and color schemes to your coupons. After saving, ensure that the color schemes and layouts match your store’s theme and branding.

Custom style applied for coupons -
Custom style applied for coupons