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] Sale price dates in Bricks](https://brickslabs.com/wp-content/uploads/2024/07/woocommerce-sale-price-dates-bricks-768x457.png)
5 comments
Barnabas Chris
I think the css should be flex-wrap: nowrap;
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.
Marc Robinson
.woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
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?