Shipping Calculator Button CSS

This topic has 6 replies, 3 voices, and was last updated 3 years, 3 months ago by Fernando.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
January 30, 2023 at 5:49 pm #2514863
troyw
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
Leo
Staff
Customer Support
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

troyw

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

troyw

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
Fernando
Customer Support
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

troyw

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

Fernando
Customer Support

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

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

[Resolved] Shipping Calculator Button CSS

Popular Articles

[Resolved] Shipping Calculator Button CSS

Popular Articles

Start building better websites today.