woocommerce checkout and cart page

Hi @pxmalye!

Can you please specify what would you like to change to that block? Please share a screenshot or a URL where we can see the page where you’d like to make the changes so that we are all on the same page ??

Thank you!

Please see the following screenshots:

1) https://snipboard.io/kG0gYM.jpg
2) https://snipboard.io/AzVSLF.jpg
3) https://snipboard.io/3CSKJz.jpg

Can I change the color from black to another color of the above circled black buttons?
From the number 2 screenshot and number 3 screenshot, I don’t have apple pay, can I change to another payment gateway or delete it?

Hi @pxmalye!

By default, you won’t be able to change those colors as they are usually controlled by the payment gateway!

Can you please share a link to your site?

Let us check maybe we can offer some CSS to help you with that ??

Thank you!

https://www.snazzyholic.com/

Hi @pxmalye!

Thank you for that ??

I was not able to locate the page that uses the checkout block on your site, however, I have tested it on my local site and you can override the color of some buttons using custom CSS!

Here is the example from my site: https://d.pr/i/ZRVpFl

Meanwhile, to disable Apple Pay you will need to disable the Express Checkout on your site and the settings for that depend based on the payment gateway you are using!

Thank you!

Please see this screenshot: https://snipboard.io/ReDSy2.jpg
I can add the cart on the cart page in which you can see what it looks like as in the screenshot, but the cart page can’t be loaded even in the preview.

I added the checkout block and can be loaded on my website: https://snipboard.io/ilJ3o8.jpg, can you locate the page and help/ tell me to change the buttons’ color?

Hi @pxmalye !

Thank you for the screenshots.

Can you please head to Appearance > Customize > Additional CSS and add the following CSS Snippet.

.components-button {
    background-color: #b34671 !important;
}

Would this work for you?

Please see this screenshot: https://snipboard.io/ReDSy2.jpg
I can add the cart on the cart page in which you can see what it looks like as in the screenshot, but the cart page can’t be loaded even in the preview.

Is there an error when you update that page? If so please share that with us!

Thank you!

From the CSS code you provided, the button’s color didn’t change.

From the screenshot: https://snipboard.io/ReDSy2.jpg, it didn’t have any error message, just can’t load the page if I use the WooCommerce block to add the cart, it is like this: https://snipboard.io/7u2tpf.jpg

Hi @pxmalye,

Thanks for getting back to us.

From the CSS code you provided, the button’s color didn’t change.

Can you please try this below CSS code instead?

button.components-button.wc-block-components-button.wc-block-components-checkout-place-order-button.contained {
    background: #b34671;
}

From the screenshot: https://snipboard.io/ReDSy2.jpg, it didn’t have any error message, just can’t load the page if I use the WooCommerce block to add the cart, it is like this: https://snipboard.io/7u2tpf.jpg

Are you having this issue only while previewing the page? Do you see an issue on the front end after publishing the page?

We will be standing by for your response. Also, please don’t hesitate to reach out if you have any further questions.

Cheers!

I add the code, please see: https://snipboard.io/qJfE7u.jpg, but the color still didn’t change: https://snipboard.io/jD1SCb.jpg, you can see the black button circled in red didn’t match the pink button circled in blue.

I have the issue not only previewing the page, but it also loads with nothing on front end at the cart page.

Hey @pxmalye

To achieve this type of customization I’d recommend using Google Chrome Developer Tools. You can right click anywhere on your webpage to select ‘Inspect Element’, the HTML and CSS properties show up right in your browser.

Inspecting the CSS elements on your site using Chrome Developer tools below is the CSS that controls the colour of the Place Order button.

Image Link: https://cloudup.com/cagfqi8_eO6

.wc-block-components-button:not(.is-link).contained, .wc-block-components-button:not(.is-link).contained:active, .wc-block-components-button:not(.is-link).contained:disabled, .wc-block-components-button:not(.is-link).contained:focus, .wc-block-components-button:not(.is-link).contained:hover {
    background-color: #1e1e1e;
    color: #fff;
}

Changing the background-color: element of that CSS allows me to change the color of the buttons on your site.

Image Link: https://cloudup.com/cmMencmBTRP

I hope this helps.

I follow your step to change the color from #1e1e1e to #b34617, but how do I save? I can’t find a save button. Any how to solve the problem of loading page?

Hi @pxmalye

You can add custom CSS to a WordPress installation by navigating to WordPress Admin > Appearance > Customize > Additional CSS

It seems working on checkout page now. But can you help with the loading issue? No matter I was in preview or after updated, the cart page is always loading and never be loaded.

Hi @pxmalye!

No matter I was in preview or after updated, the cart page is always loading and never be loaded.

Can you please clarify whether the issue is with the Cart Block, because I was able to head to your cart page and it seems it is working for me ??

Here is a screenshot of what I can see https://d.pr/CyO3qN

Thank you!