Title: Change Checkout Button Width
Last modified: June 21, 2021

---

# Change Checkout Button Width

 *  Resolved [ritefrederico](https://wordpress.org/support/users/ritefrederico/)
 * (@ritefrederico)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/change-checkout-button-width/)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fchange-checkout-button-width%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [George Appiah](https://wordpress.org/support/users/gappiah/)
 * (@gappiah)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/change-checkout-button-width/#post-14577521)
 * > 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](https://wordpress.org/support/users/ritefrederico/)
 * (@ritefrederico)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/change-checkout-button-width/#post-14577573)
 * Thanks [@gappiah](https://wordpress.org/support/users/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.

## Tags

 * [checkout button](https://wordpress.org/support/topic-tag/checkout-button/)
 * [checkout page](https://wordpress.org/support/topic-tag/checkout-page/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [ritefrederico](https://wordpress.org/support/users/ritefrederico/)
 * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/change-checkout-button-width/#post-14577573)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics