CODEWITHSUNDEEP
csswordpresswoocommerce
Paudun
Paudun

Reputation: 287

Override Woocommerce's default css

The image for one of my buttons on the cart page is not filling the entire button. When I try to remove the padding it doesn't work. The CSS below is affecting the button.

.woocommerce a.button, .woocommerce button.button, .woocommerce 
.woocommerce-message a.button, .woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce 
input.button.alt, .woocommerce input.button, .woocommerce-cart table.cart 
td.actions .button, .woocommerce form.checkout_coupon .button, .woocommerce 
#respond input#submit {

border-radius: 2px;
padding: 10px 40px;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;

The CSS below is my own and is for the correct button, but it doesn't do anything. If I toggle off the padding rules above in the browser, my CSS does work. Any ideas?

a.button.vipps-express-checkout{
padding: 0px;
}

Upvotes: 0

Views: 223

Answers (1)

chatnoir
chatnoir

Reputation: 2293

Your a.button.vipps-express-checkout has lower specificity (something like weight or priority, see docs) than the default CSS's .woocommerce a.button.alt. Specifically, your specificity is 0-2-1 (2 classes + 1 selector) which is lower than the default's 0-3-1 (3 classes + 1 selector).

Try adding !important (see docs) to override default css for that particular attribute:

a.button.vipps-express-checkout{
    padding: 0px !important;
}

If you don't wish to use !important, you can try to increase your specificity weight from 0-2-1 to 0-4-1 (adding 2 more classes) like so:

.woocomerce a.button.vipps-express-checkout.alt {
     padding: 0;
}

Upvotes: 1

Related Questions