• Resolved pxmalye

    (@pxmalye)


    Hi,

    I find the checkout and cart blocks are very nice, but can I change the buttons such as place order button and pay button color? I want them to match my theme color.

Viewing 15 replies - 1 through 15 (of 28 total)
  • Plugin Support Raif D. a11n

    (@rdeari)

    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!

    Thread Starter pxmalye

    (@pxmalye)

    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?

    Plugin Support Raif D. a11n

    (@rdeari)

    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!

    Thread Starter pxmalye

    (@pxmalye)

    Plugin Support Raif D. a11n

    (@rdeari)

    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!

    Thread Starter pxmalye

    (@pxmalye)

    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?

    Plugin Support Raif D. a11n

    (@rdeari)

    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!

    Thread Starter pxmalye

    (@pxmalye)

    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

    Plugin Support Shohan Hossain Nabil – a11n

    (@sohanhossain)

    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!

    Thread Starter pxmalye

    (@pxmalye)

    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.

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    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.

    Thread Starter pxmalye

    (@pxmalye)

    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?

    Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @pxmalye

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

    Thread Starter pxmalye

    (@pxmalye)

    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.

    Plugin Support Raif D. a11n

    (@rdeari)

    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!

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘woocommerce checkout and cart page’ is closed to new replies.