How to Add a Coupon to Your WordPress Website

Honestly, how hard can it be to create a coupon? Well it shouldn’t be, but it took me a bit of time to sort it out.

First, I researched various coupon plugins. A bunch were out of date and not being maintained. I scratched those. Others were limited unless you purchased the premium plugin. That seemed like overkill for a few coupons. But I did try a free one. However, their default design simply wasn’t the look I wanted. And though you could modify the CSS (styling) for the look of the coupon, you couldn’t modify the styling of the coupon on the print page. Therefore, I decided to create my own.

So, here’s the easy way for you to add a coupon to your WordPress website…this post does assume that you know the basics of Photoshop or an image editing software.

Make the Coupon

In Photoshop, create the image and text for a coupon. Drag the ruler guides around it. Next select the rectangle tool and drag from corner to corner along your ruler guides or just inside.

Then make changes to the rectangle settings in the top menu:

• Fill – change to no
• Stroke – change to outline
• Select the width of the line. I chose 3px
• Select the dashed line in the dropdown
• Select the corner style
• Click more options and select the number of dashes and the gap. I chose Dash: 8 and Gap:4
• Click OK. Flatten and export your image and import it into your WordPress Media area

Install the Print-O-Matic Plugin and Tweak the Settings

Install the Print-O-Matic WordPress Plugin. I am grateful to this plugin. However, you need to do a few things to get it to work. First, you need to modify the settings. I modified four settings. Pay special mind to the Default Target Attribute: Id. It is case sensitive and your coupon will not print if this is wrong. Ask me how I know this!

One of the settings that I chose was to turn off the printer icon and to add the default print title “Print Offer” instead.

Add the Coupon Image with Id and the Printer Shortcode

Add the Print-O-Matic shortcode to the post or page along with the image and its corresponding id.

Here is the code:

<div id=”element_id_to_print”>Add (coupon) img link between these divs</div> and add this shortcode [print-me target="#element_id_to_print"] wherever you want the Print Offer button to be.

Add the CSS and Tweak It


.printomatictext {
text-align: center;
text-decoration: none!important;
background-color: #ff931e;
max-width:100px;
color: #fff;
font-family: 'Pupcat', sans-serif;
font-size: 24px;
font-weight: 700;
margin: 10px auto;
padding: 10px;
border:1px solid #ababab;
}


Note: If you have several coupons, just change each one to a unique id, such as id=”element_id _to_print_2 and change your print shortcode accordingly [print-me target="#element_id_to_print_2"].

Happy coupon printing!