Looking to position the quantity input field and Add to cart button next to each other instead of one below the other in Bricks?
Add this CSS:
form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1em;
}
.single-product .summary form.cart .quantity+button {
margin-top: 0;
}Before:
After:
![[WooCommerce] Product Category Image Background in Bricks](https://brickslabs.com/wp-content/uploads/2024/07/woocommerce-product-category-image-background-bricks-768x399.jpg)
![[WooCommerce] Sticky on Scroll Add to Cart section in Bricks](https://brickslabs.com/wp-content/uploads/2024/07/woocommerce-sticky-section-bricks-768x424.png)
5 comments
Gary
It works without perfectly variations but now when swatches are used it won't center, always stays left.
Sridhar Katakam
Do you have a URL so I can inspect and update the CSS?
Marc Robinson
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
Samuel
Doesn't work.
Neither with flex-wrap: nowrap;
Only shows correctly in builder but not in front-end, for some odd reason, local browser CSS overrules the flex CSS.
Barnabas Chris
I think the css should be flex-wrap: nowrap;