How to override !important style and show "Add to Cart" button next to price?

Question

I have issue with add to cart button on pages. For example here "add to cart" is not showing for some reason. When check in CSS class i see this CSS rule:

.woocommerce a.button, .woocommerce-page a.button, .woocommerce 
button.button, .woocommerce-page button.button, .woocommerce input.button, 
.woocommerce-page input.button, .woocommerce #respond input#submit, 
.woocommerce-page #respond input#submit, .woocommerce #content input.button, 
.woocommerce-page #content input.button {
background: #fff !important;
box-shadow: none;
}

This is entire HTML from that part with button:

<a rel="nofollow" href="/digital-products/sound-kits/808-kits/?add-to-
cart=1529" data-quantity="1" data-product_id="1529" data-product_sku="" 
class="button product_type_simple add_to_cart_button 
ajax_add_to_cart">Přidat</a>

when insert this code into custom CSS cant overwrite that !important rule, and change color to some other. Some here here, how to overwrite that and change color, and move a little down next to price?

Possible duplicate of [How to override !important?](https://stackoverflow.com/questions/11178673/how-to-override-important) — jmargolisvt, Mar 05 '18 at 21:15
How is this **not** a duplicate of the link @jmargolisvt provided. It looks identical to me. — Zze, Mar 05 '18 at 21:30

score 0 · Answer 1 · answered Mar 05 '18 at 21:16

0

You will have to use a selector including !important next to the styles you want to overwrite and have it be more specific than the selector you are overwriting at the same time.

answered Mar 05 '18 at 21:16

aMJay

2,215
6
22
34

Some example based on my question? – Dr.MTR Mar 05 '18 at 21:19
I don't know the exact structure of your html document, but you can just copy the selector you want to overwrite and add another element to it to add specificity. Another way to add specificity is to select by id, you can replace one of the tags with an id if you can add it. (For example give some div id="example" and then replace div with #example when selecting the element) – aMJay Mar 05 '18 at 21:21
@Rob also you might want to check out this specifitcity calculator if you are finding it difficult to tell which selector is more specific https://specificity.keegan.st/ – aMJay Mar 05 '18 at 21:23

score -1 · Answer 2 · answered Mar 05 '18 at 22:29

This CSS tweeks that i do myself solved my issue:

.products .product .add_to_cart_button {
display: inline-block;
background: #070bf7 !important;
top:360px;
left:30px;
color:#fff;
}


.woocommerce ul.products li.product .button {
 margin-top:370px;
margin-left:70px;
opacity:1;
}

How to override !important style and show "Add to Cart" button next to price?

2 Answers2