Archived topic

Shipping Calculator Button CSS

6 replies · Started by troyw on January 30, 2023

Viewing posts 1–7 of 7

January 30, 2023 at 5:49 pm #2514863

Hey team,
I'm not sure why, but having tried a number of CSS variations i cannot change the color and size of the Shipping Calculator Button in my Woocommerce Cart. I was was thinking that maybe I am getting the selector wrong, but have tried so variations without success. Firstly I tried this;

.shipping-calculator-button{
background-color:#f00;
color:#fff;

Obviously this is missing something so I tried this;

}.woocommerce-cart .cart-collaterals .shipping-calculator-button {
background-color:#7ad03a;
color:#ff000;
}

Still nothing!

Any ideas why the selectors are not working and what they might be?

Thanks

January 30, 2023 at 6:04 pm #2514874

Hi there,

This should work:

.woocommerce-shipping-totals.shipping .shipping-calculator-form .button {
    background-color: #000 !important;
    color: #F4C424 !important;
}

Demo:
https://www.screencast.com/t/nwQ8v3ZI1N7I

January 30, 2023 at 6:16 pm #2514881

Hey Leo,
I have added this to the customiser but nothing changes. I also tried Simple CSS editor and the Style Sheet in Child theme, but nothing happens? For now I have just added it in the customiser.

I also tried this selector;
.woocommerce-shipping-totals.shipping .shipping-calculator-form .shipping-calculator-button

It is the section on the "Get Shipping Quote" which reads "Change Address".
Thanks

January 30, 2023 at 7:21 pm #2514919

Hey Leo,
Sorry I should have been clearer.
Its the Text Link "Change Address" that I am trying to style, not the button after you click it. My issue is that if I select this in the inspector it shows 'shipping-calculator-button' and if I change the color in the inspector it does change change the font color. So it is using shipping-calculator-button as part of the selector I think?
Is the 'a' something to do with it?

January 30, 2023 at 8:08 pm #2514939

Hi Troyw,

Can you try this?:

.woocommerce-cart form.woocommerce-shipping-calculator a {
    background-color: #f00;
    color: #fff;
}

January 30, 2023 at 8:16 pm #2514944

Hey Fernando,

Yes, that's it. How did you find this in Developer Tools?

Thanks so much

January 30, 2023 at 8:29 pm #2514961

You're welcome! I just right-clicked on the element and inspected it.

This archived topic is closed to new replies.

Start building better websites today.