Quantity and Add to Cart Button on New Lines – Woocommerce

The default settings of Woocommerce puts quantity and add to cart on the same line. I wanted to put them on different lines for a client site.

There are several ways to do this. I will tell you the easiest way to achieve this through CSS styling.

Let us look at the structure of this item on Woocommerce. Add to cart button comes with a form. The class used on this form is cart. The quantity and Add to cart are two elements on this form. By default both the elements are in inlineblock mode which places them side by side. See the image below –

In your custom CSS file ( theme or child theme) change the display property of the form to flex. Then change the flex direction to column.

That will immediately bring the element to next line from the quantity.

.single-product form.cart {
	display: flex !important;
	flex-direction: column !important;

This code goes to the custom CSS file of the theme or the child theme.

After that you will also need to resize the Add to cart button. By default it takes up 100%. Reduce it to something you want. And the left margin of the button also needs to be re-arranged.

.single_add_to_cart_button {
	margin-left: 0px !important;
	max-width: 123px !important;
	margin-top: 20px !important;	

Needless to say that this code also goes to the custom CSS file of the theme or the child theme.

Thats all. Now the quantity and the Add to cart button will stack on top of each other like this –

If you know of another simpler method then please share it here with us.