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.
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.
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:
- Select one coupon style from Styles which is closer to your desired result and Save the settings.
- 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
- Go to the file path
- Find the template for your coupon styles in the mentioned path.
- Once found, copy that template file & paste at this path:
- If you find any folder missing in the above-mentioned path, you can create those directories.
- Now open this template file in an editor
- Make the changes as per your choice, like removing an element, changing any text, adding more details like CSS, etc
- Once you’re done with the changes you can save this file. That’s it.