Woo Blocks Checkout Button size and color

  • Resolved Bob

    (@orionlearn)


    2 months, 1 week ago

    I recently converted from the woo classic cart shortcode and checkout shortcode to block. The Place Order button is way too small and a non-contrasting color cauing customer complaints. It does not seem to be theme based for size or color and I cannot figure out how to change the size or color. My theme buttons are set to a yellow BKG with black type for visibility. See below

    Here is the inspection information:

    <button class="wc-block-components-button wp-element-button wc-block-components-checkout-place-order-button contained" type="button" style=""><span class="wc-block-components-button__text">Place Order</span></button>

    HELP! Not a CSS wizzard

    Bob

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hello Bob @orionlearn,

    Thank you for reaching out.

    I understand you’re having issues with the ‘Place Order’ button’s size and color after switching from the classic cart and checkout shortcode to block. We’re here to help!

    You can change the size and color of the button with the help of custom CSS, even if you’re not familiar with it. Here’s a simple step-by-step guide:

    1. Go to your WordPress Dashboard and navigate to ‘Appearance’ > ‘Customize’.
    2. There you’ll find ‘Additional CSS’ at the bottom of the menu.
    3. Paste the following code in the Additional CSS field:
    .wc-block-components-button.wc-block-components-checkout-place-order-button {
background-color: #FFFF00; /* This is for yellow background */
color: #000000; /* This is for black text */
font-size: 20px; /* This is for button size */
}
    1. Click ‘Publish’ to save the changes.

    This code will change the ‘Place Order’ button’s background color to yellow, the text color to black, and increase the size of the text. If you want to adjust the size further, just change the value of ‘font-size’.

    Let us know if you still need further assistance.

    Thread Starter Bob

    (@orionlearn)

    Perfect! Thank you. Bob

    Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hi Bob @orionlearn,

    I’m glad we were able to help!

    If you have a few minutes, we’d love if you could leave us a review:?https://www.ads-software.com/support/plugin/woocommerce/reviews/

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags