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 your comment

 

Related Tutorials..

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:
Pro
Similarly Priced WooCommerce Products Bricks Query Loop

Similarly Priced WooCommerce Products Bricks Query Loop

How to show products priced within a percentage of the current single product's price.
Categories:
Pro
Quick View Buttons for Woo Products in Bricks

Quick View Buttons for Woo Products in Bricks

This Pro tutorial provides the steps to set up quickview buttons for products in a Woo (formerly, WooCommerce) products grid using Bricks' Popups and Interactions…
Categories:
Pro
On Sale Ribbon for WooCommerce Products Query Loop in Bricks

On Sale Ribbon for WooCommerce Products Query Loop in Bricks

Showing a SALE ribbon for products that are output using Bricks‘ Query Loop.
Categories:
Fix for “Your theme (Bricks Child Theme) contains outdated copies of some WooCommerce template files.”

Fix for “Your theme (Bricks Child Theme) contains outdated copies of some WooCommerce template files.”

Updated on 18 Feb 2023 Users of current (at the time of writing this) Bricks stable version of 1.6.2 and WooCommerce 7.4.0 will likely see…
Categories:
Pro
On Sale Products Bricks Query Loop

On Sale Products Bricks Query Loop

Looking to show only the WooCommerce products that are on sale in Bricks? Set up a query loop, enable the PHP query editor and paste:
Categories:
How to add a “Sold Out” badge for out of stock products in Bricks

How to add a “Sold Out” badge for out of stock products in Bricks

Looking to add a "Sold Out" badge for products in the Shop page for WooCommerce products that are out of stock when using Bricks' Products…