The Coupon block provides an easy way for WordPress users to create and display discount offers on their websites. It includes the necessary fields for adding a coupon code, discount percentage, description, and expiration date.

We’ll now show you how to use the Coupon block in this documentation post.

Adding the Coupon Block #

Click the plus (+) icon on the Gutenberg editor. Type Coupon on the search bar. Once the block appears, add it to the editor.

Add Content to the Coupon Block #

There are five types of content you can add to the block. They are:

1. Write the discount percentage on the coupon section
2. Write a title for the coupon
3. Write a description for the coupon
4. Write a coupon code
5. Write the coupon expiration date

Do the write-up as you want.

General Settings #

Come to the Settings tab on the right sidebar. You’ll get several options here. You’ll find various options here. They are visibility control, animation, coupon type, affiliate link, expiration date, and responsiveness.

Let’s explore the things you can do with these options.

# Visibility Control #

Expand the Visibility Control option. By toggling on the Hide the block from everyone, you can hide this block on the frontend.

Next, by Enabling Schedule, you can set dates when the block will automatically be displayed and hidden on the respective dates.

# Animation #

The Coupon block includes 50+ animations. You can add anyone to the block and customize the settings. Whenever a user scrolls to this section, the animation will be displayed.

# Coupon Type #

Expand the General section. You will get an option to change the coupon type. You may keep it coupon or change it to deal.

After that, if you are promoting any affiliated product, you can place its link into the box under the coupon type section.

Scroll down this tab a bit. You’ll get the option to set the coupon expiration date. However, if you never want the coupon to expire, just toggle on the Doesn’t Expire option.

On the other hand, to set an expiration time, select a date from the calendar. To hide the coupon section on the frontend anytime, just toggle on the Hide Coupon option.

# Responsive Control #

If you don’t want to display this coupon block on any particular device, just toggle on any respective device option under the Responsive Control section.

Style #

Next, come to the style tab. Here, you’ll get options to colorize all the texts individually on the block, change their font sizes, add padding & margin, and customize the border.

Hope you can do them yourself.

Conclusion #

Hope now you can use the Coupon block on your website. But to get better results, you must know where placing this block suits much.

It’s better if you place Coupon block on the homepage banner, sidebar, footers, thank you page, and various sections of the blog posts that receive the maximum percentage of traffics.