15th Mar '24
/
3 comments

Side-by-side WooCommerce Quantity and Add to Cart in Bricks

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:

Get access to all 610 Bricks code tutorials with BricksLabs Pro

3 comments

  • 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;

Leave a Reply to Marc Robinson (Cancel Reply)

 

Related Tutorials..

Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Adding the WooCommerce endpoint names, “Orders”, “Downloads” after the WooCommerce ‘My account’ Page’s title text at the various endpoint URLs.
Categories:
Pro
Out of Stock Ribbon for WooCommerce Products in Bricks

Out of Stock Ribbon for WooCommerce Products in Bricks

Show an “OUT OF STOCK” ribbon for WooCommerce products that are output via the Products element on listing pages.
Categories:
Condition based on WooCommerce Product Attributes in Bricks

Condition based on WooCommerce Product Attributes in Bricks

How to display elements only when a specific WooCommerce product attribute is selected.
Categories:
Is WooCommerce Cart Empty Condition in Bricks

Is WooCommerce Cart Empty Condition in Bricks

Updated on 5 Nov 2024 Looking to conditionally render an element depending on whether the user's cart is empty or not when using WooCommerce? Add…