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
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.
CSS classes to use ↑ Back to top
.coupon-container– main container class of the coupon
.custom-design– additional class to main coupon container to distinguish custom style from other styles
.coupon-content– wrapper class for coupon information(discount,code,expiry date/time)
.discount-info– wrapper class for coupon discount
.code– wrapper class for coupon code
.coupon-expire– wrapper class for coupon expiry date/time