Woocommerce add additional quantity button shift position WordPress
- SOLVED
Hello
need help on an issue with woocommerce add to cart then add additional quantities of product.
http://stormyweatherwine.com/products-page/
When a customer adds the 750ml bottle to the cart then clicks view cart and tries to use the + button to add additional product, the +button shifts left on click thus not adding product. I need this button to stay where it is supposed to be.
Thanks!
Answers (2)
Kyle answers:
Try using the :active pseudo class this:
input.plus:active {
top: 0 !important;
left: 40px !important;
}
Kyle comments:
Looks like the minus has the same problem:
input.minus:active {
top: 15px !important;
left: 40px !important;
}
Kyle comments:
The error is from your Rhea theme. There are lines for :active inputs, which conflict with woo, commenting out lines 1313-1314 of screen.css (in your theme's css folder) would also solve your issues.
Bob answers:
In your theme file there is css named screen.css
at the line no 1310 there is css
input[type=submit]:active, input[type=button]:active {
position: relative;
top: 1px;
left: 1px;
background: #444444;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#777));
background: -moz-linear-gradient(top, #444444, #777);
}
Here <strong>left:1px</strong> is creating trouble.
you can remove it if button click effect is not important for you or we can write new css which will prevent this for "+" button
Bob comments:
oh for minus button you need to remove <strong>top: 1px;</strong> also.
or you can go to bottom of screen.css and write
<strong>
.woocommerce #content .quantity .minus, .woocommerce .quantity .minus, .woocommerce-page #content .quantity .minus, .woocommerce-page .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce .quantity .plus, .woocommerce-page #content .quantity .plus, .woocommerce-page .quantity .plus {
top: auto;
left: auto;
}
</strong>
please you ctrl+f5 to check reload so it do not use cache.
Bob comments:
the path of css file you need to edit is http://stormyweatherwine.com/wp-content/themes/rhea/css/screen.css
You should check above url after adding code at bottom of file to check if it is visible to browser or not? if it not then it's probably caching issue.
.woocommerce #content .quantity .minus, .woocommerce .quantity .minus, .woocommerce-page #content .quantity .minus, .woocommerce-page .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce .quantity .plus, .woocommerce-page #content .quantity .plus, .woocommerce-page .quantity .plus {
top: auto;
left: auto;
}
movino4me comments:
Works perfectly Bob Thanks much, you too kyle