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] Up-Sells and Cross-Sells Query Loop in Bricks](https://brickslabs.com/wp-content/uploads/2022/12/product-up-sells-bricks-query-loop-editor-768x347.jpg)
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;