Change Checkout Button Width

  • Resolved ritefrederico

    (@ritefrederico)


    3 years, 5 months ago

    Hi everyone,

    I’ve been trying to change the checkout button’s width but to no success.

    I’ve tried adding this snippet to the style.css but it didn’t really help.

    #top .woocommerce-checkout-payment .button {
    display:block;
    width:100%;
    text-align:center;
}

    The ‘Proceed to Checkout’ button on the Cart page is full width and centered – as it should be. But the ‘Place Order’ button (or in my case ‘Finalise Order’) is aligned to the right and not full width.

    Thanks in advance for your help.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • But the ‘Place Order’ button (or in my case ‘Finalise Order’) is aligned to the right and not full width.

    On the checkout page, I see a “Finalise Order” button aligned to the LEFT, not the RIGHT as you say. Are we talking about the same button, or something different?

    If we’re talking about the same button above, then, the following CSS should work.

    button#place_order {
width: 100%;
}

    OR even 

    .woocommerce-checkout-payment .button {
width: 100%;
}

    The reason your code doesn’t work is that there’s no element on the page with the ID “top” to select, so the browser doesn’t know where to apply the code.

    Thread Starter ritefrederico

    (@ritefrederico)

    Thanks @gappiah . That worked perfectly. Yeah, I meant to say left (mild dyslexia).

    Adding any of those snippets to Advanced > Custom CSS worked perfectly.

    And thanks for explaining why it didn’t work the first time, I’ll know what to look for next time. Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Checkout Button Width’ is closed to new replies.