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 Barnabas Chris (Cancel Reply)

 

Related Tutorials..

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:
Create A Customizable AJAX Add To Cart Button In Bricks Builder

Create A Customizable AJAX Add To Cart Button In Bricks Builder

In Bricks, you can simply create an Add To Cart button from a dynamic data / function {woo_add_to_cart}. This button supports AJAX as well if…
Pro
WooCommerce Product Carousel in Bricks

WooCommerce Product Carousel in Bricks

How to set up a carousel that shows WooCommerce products with the product title, price and Add to Cart button for each.
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…
Pro
Product Attribute based Related Products Bricks Query Loop

Product Attribute based Related Products Bricks Query Loop

How to output products related by value of attribute(s) for the current product on single WooCommerce product pages.
Categories: