Customise WooCommerce Cart and Checkout Buttons - Simple and Easy CSS | Elementor

Simple way to customise the colour of the text and buttons of the WooCommerce Cart and Checkout Buttons inside Elementor with easy CSS.
/*Modify the Cart/Basket Button Text and Background*/
.woocommerce a.button.alt {
color: #111111;
background-color: #d0d0ce;
}
.woocommerce a.button.alt:hover {
color: #ffffff;
background-color: #06ACF2;
}
/*Modify the Checkout Button Text and Background*/
.woocommerce #payment #place_order {
color: #111111;
background-color: #d0d0ce;
}
.woocommerce a.button.alt:hover #payment #place_order {
color: #ffffff;
background-color: #06ACF2;
}
- Get Elementor Pro here --- elementor.com/?ref=25741
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@NistkastenLivestream]

It didnt work on my website :(

[@HanneLenesVegetar]

Saved me tonight, thank you:)

[@rachwanharb3125]

Thank you worked :)

[@420alt]

Help me save so much time. I spent at least 20 mins trying to figure this out before your video.

[@AntonHilman65]

Thank you 😁👍

[@KBlakK]

You are the best!!!

[@deepakjamra5502]

Thanks

[@allyouneedisbelgrade5126]

Great! Finally! But, than other buttons the same problem 😂

[@cipher893]

Excellent. Every single time when I search to edit or customize something the answer is: first 5 seconds, *"download this plugin..."*

[@talesong]

I almost thought this one was the same way - so glad I kept watching!

[@Oppenheimer183]

Nothing is happening. My proceed to checkout butten is white with very small tekst. I use woocommerce blocks.

[@allyouneedisbelgrade5126]

How to write a code for pay and cancel order buttons?

[@ArdennesPlaques]

Hello, i'm bugging on a simple thing for hours, I only want my elementor mini cart to display a text under it saying " My cart" and i can't figure out how, can you please help me with maybe a custom css that goes in elementor mini cart ? Thank a lot and have a good day

[@websquadron]

Can you post the Query into the Facebook Group for Web Squadron with a link to the relevant page?

[@voiceofrjbilal]

Sir please tell me i want yes and no alert message on checkout button please tell me how will i do

[@websquadron]

Not sure about that one. Have a look at this: wordpress.org/plugins/woo-notification/

[@coastvalues2285]

Hello, will it bring errors when WooComerce updates?

[@websquadron]

Not really as the CSS is for styling and overrides anything else.

[@hadiasarfraz3096]

This code ain't working on my site what should I do then? I wanna customize the Button colors of checkout and cart page.

[@chrishayes5755]

inspect element -> copy outer html -> paste into chatgpt tell it to change button color using css

[@p.m.8316]

Can I do this with a custom Amazon button with logo?

[@websquadron]

You could replace the icon/images, or just add an image with an Amazon Add to Cart link.

[@p.m.8316]

@@websquadron i have a CSS 'Amazon buy now' button but don't know where to place it. Tried it in Wzone but also didn't work :(

[@user-mx3no2xs4k]

I attempted to use the code and it did not work at all. Nothing changed.

[@websquadron]

Since that video it's better to use the Elementor Pro Cart and checkout widgets.

[@Crx79Remix]

Hello, I need help. In [woocommerce_checkout] page
buy and pay button not showing. Only I see small square without text, please help.

[@websquadron]

What other plug-ins or codes are you using with Woo?