How To Expand The Coupon Entry Box On Your WooCommerce Cart Page

Expand Coupon Entry Box On WooCommerce Cart Page

When you install many WordPress themes that claim to support WooCommerce one of the big problems (and one of my biggest gripes) is that no one seems to pay attention to the size of the coupon box on the cart page.

Increase Size Of Coupon Code Box On Cart Page
Example using the Underscores theme out of the box

If you’re experiencing short-unreadable-coupon-box-itis on your cart page and you want to do something about it so that people can, you know, use it, then you’ve come to the right article!

The fix is relatively simple, its just some CSS and I’m going to show you how to implement the fix a couple of different ways.

How To Fix Short Coupon Box On Your Cart Page

The first step is to open up Google Chrome or Safari or Firefox, any modern-day browser really.

You want to right click on that coupon input box and click on Inspect.

Open the inspect tool on the coupon input box

When you click on Inspect it will open up the Develop tools which will let you inspect things about the elements on the page.

If this is the first time you’ve done this, don’t worry, I’ll show you exactly what to do next.

It will open up a box like this:

Inspect Developer Tools For Coupon Code Box Styles
(Click to zoom)

The styles are what we want to change.

Let’s experiment a little bit to make sure we create a new CSS rule with the correct width first go. The good thing is if you make changes in this Developer Tools box, it will show on the site (temporarily until you reload) so you can test out what is going to work best width wise.

Click on the New Style Rule button:

Add a new style rule

Then rename the highlighted text to the following:

.woocommerce-cart table.cart td.actions input#coupon_code
Rename your new rule

After you put this text in, hit the TAB key on your keyboard, not Enter. If you accidentally hit enter its ok, just click between the curly brackets { } and it will add a new line between the curly brackets.

Add in the rule like this:

Play with the width value

Play with the width value (the 200px in the screenshot) until you are happy with how the coupon box looks on the screen. You’ll see it update the webpage when you change the value.

Once you’re happy copy the text and drop it into a Notepad (Windows) or TextEdit (Mac) for safe keeping.

.woocommerce-cart table.cart td.actions input#coupon_code {
    width: 200px;
}

This is the CSS code we generated and now we just have to install it on the site permanently.

Installing The Fix Permanently

If you have some experience editing CSS files, you’ll likely know that there is a style.css file in the directory of any theme you install.

Ideally, you should override this with a child theme and install your changes there.

But if you don’t have one of those there’s another way you can do it and it doesn’t involve editing any CSS files that might potentially be overridden when you update the theme.

There is a plugin called Simple Custom CSS and JS. This plugin lets you keep track of all the little CSS and javascript tweaks that you need to do on your theme, without having to actually edit the theme itself. It’s very handy.

Simple Custom CSS and JS Plugin

Install it by going to Plugins->Add New and searching for it. Install & activate.

You’ll then get a new menu on the backend:

Simple CSS menu

Click on Add Custom CSS. This will open a new window for you to enter the code you generated before.

Give it a name like “Cart Coupon Box Width Fix” so you can tell at a glance what it was later and add your code in the box provided.

It should look like this:

Install CSS Fix For Coupon Box Width On Cart

And that’s it!

So why was this so important?

Well, coupons are one of your best marketing weapons and without the visual cues for how to use those coupons your customers will be forced to hunt around for where to enter the code.

I’ve observed over the years that customers can be pretty lazy when it comes to stuff like this and they give up easily.

The more obvious you make something the better your results will be for that action.

So get in there and give this fix a go, you can do it!

Leave a Reply

Your email address will not be published. Required fields are marked *