woocommerce/docs/ux-guidelines-payments/payment-button-layout.md

---
post_title: User Experience Guidelines - Payment Button Layout
menu_title: Payment Button Layout
---

Define the position and alignment of buttons in relationship to their container, with equal hierarchy and consistent spacing between buttons.

### Product pages

Position payment buttons correctly in relation to "Add to Cart" in horizontal or vertical layout, place payment buttons to the right of or below the "Add to Cart" button.

![Product page layout.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Product-page-layout.png)

### Cart

Position payment buttons correctly in relation to "Proceed to checkout" buttons in vertical layout. Place payment buttons above the "Proceed to checkout" button. Do not place payment buttons below the button or in between.

![Cart layout.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Cart-layout.png)

### Express checkout

Position payment buttons correctly in horizontal layout, consistent in size and spacing. If a second row is required, left-align the buttons.

![Express checkout layout.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Express-checkout-layout.png)

### Mobile view

Express payment buttons on mobile should occupy the full width. Don't use the express payment border as it reduces the view area.

![Mobile view.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Mobile-view.png)

### Clear space

Maintain the minimum amount of clear space on all sides of the payment button. The clear space adapts based on the size of the button.

![Clear space.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Clear-space.png)