Coupon code field

Please post a link to your site. Will I be able to find the coupon code? or maybe you could set one up for testing.

Hi there, the coupon code is luvdocupet

Site is https://luv-a-k9.com

Thank you!!

You have version 5.0 of your theme. The current version is 5.6. That’s a lot of fixes, so consider updating.

If you still have the problem:

Cart page:
The height of the coupon input box in explorer is 0, so you can’t see the characters, even though they are there.

I’m not sure but I think this is because of this line in style.css line 6427:

.woocommerce table.cart td.actions .coupon input[type=text] {
width:auto;
height:12px;
margin-right:10px;
}

Note that the word text is not in quotes.

From the guidance: “Note on Quotes: You can usually get away without using quotes in attribute selectors, like [type=radio], but the rules for omitting quotes are weird and inconsistent across actual browser implementations. So, best practice, just use quotes, like [type=”radio”]. It’s safer and always works.”

What I think is happening is that Chrome and Safari aren’t bothered about the quotes but IE & Firefox are, and ignore the line. And without the line, the element height is 0.

Unfortunately you should not edit style.css because edits will be overwritten by theme updates. So you need to add some custom css like this:

.woocommerce table.cart td.actions .coupon input[type="text"] {
width:auto;
height:12px;
margin-right:10px;
}

Note the quotes around text this time.

If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
https://www.ads-software.com/plugins/simple-custom-css/

Checkout page:
What you’ve got:

input[type=text], input[type=email], input[type=password], textarea {
background: #fff;
border: 1px solid #ccc;
color: #b2b2b6;
padding: 10px;
width: 100%;
box-sizing: border-box;
}

What you need in your custom css;

input[type="text"], input[type="email"], input[type="password"], textarea {
background: #fff;
border: 1px solid #ccc;
color: #b2b2b6;
padding: 10px;
width: 100%;
box-sizing: border-box;
}

Sorry can’t test the above so may not be right. If you still have the problem, go to theme support.

Thank you so much for your detailed response.
I have updated the theme to v5.6.1.

The coupon field on the Checkout page is working fine. Is there a way to just remove the “Apply Coupon” button and field from the Cart page and only have the option to enter the coupon on the Checkout page? I think this would be an easier way to solve my issue.

Thanks again!

I figured out how to do it with a PHP Snippet… =)

Sorry to bother you and thanks again for your help!

T

I had the same issue and resolved it by adding the following into the custom CSS option in the theme:

.woocommerce table.cart td.actions .coupon input[type="text"] {
    height: auto;
}

I noticed that the height rule was causing the trouble when a height in pixels was specified.