15th Mar '24
/
5 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:

Tagged:
Bricks
Free
WooCommerce

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

5 comments

  • Barnabas Chris
    2 years ago Reply

    I think the css should be flex-wrap: nowrap;

  • Samuel
    2 years ago Reply

    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
    2 years ago Reply

    .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }

  • Gary
    6 months ago Reply

    It works without perfectly variations but now when swatches are used it won't center, always stays left.

Leave your comment

 

Related Tutorials..

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…
Read more →
Categories: Bricks, Free, Plugins
Tags: AJAX, Conditions, WooCommerce
Pro
Top-Level Product Categories in Bricks

Top-Level Product Categories in Bricks

How to show top-level WooCommerce product categories in Bricks using a query loop.
Read more →
Categories: Bricks, Pro
Tags: WooCommerce
Pro
How to Redirect WordPress Search to WooCommerce Shop Filter by Product Title or SKU

How to Redirect WordPress Search to WooCommerce Shop Filter by Product Title or SKU

Learn how to redirect users to the Shop page with filtered results if the searched term matches a WC product title or SKU. And, if…
Read more →
Categories: Bricks, Plugins, Pro
Tags: Search, WooCommerce
Pro
[WooCommerce] Sale price dates in Bricks

[WooCommerce] Sale price dates in Bricks

Outputting start and end sale price dates (if set) for WooCommerce products.
Read more →
Categories: Bricks, Pro
Tags: WooCommerce
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…
Read more →
Categories: Bricks, Free, Plugins, WordPress
Tags: Conditions, WooCommerce