[Resolved] Align Quantity and Add to Cart Buttons on Single Product Page

Hey Leo,

Elementor does not have those plus and minus buttons, we have manually added them via PHP snippet, just we need to style those now, elementor support team told us this:

When Elementor is active it will allow theme’s styling to affect the quantity button and the style will be inherited from the theme.
That is the logic that is applied in this case, and it can not be edited/changed, as the theme works in sync with Elementor (see image in private box)

So, those plus minus buttons were not there we have added them, can you pls confirm if Generate press has those buttons or not by default? If yes then we are not sure why it was not displaying on our end, coz the cart page is showing plus minus buttons, we assume then that would be loaded via woocommerce side isn’t it?

In our case how can we align that button by putting those plus minus button on top and add to cart button below it?

Hey Fernando,

Thanks a lot, now it seems to be showing properly, regarding your question for why quantity selector are not inside the quantity div, we have disabled them via code so that we can use plus minus buttons.

Now after applying your code it seems when variation is selected, the price which comes there moves those buttons on side, pls see this image: https://prnt.sc/jdrIV5rq_PKS

More info in private box

Hey Ying,

It seems that moved the pricing on the left, we want the pricing to come above those buttons not on the side.

Hey Ying,

Thanks a lot, it looks so perfect now 😀

1) Btw in order to hide the quantity increase woocommerce default buttons inside the quantity box we have used this code:

/*=== Disable input arrows Chrome, Safari, Edge, Opera ===*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

Is that code proper? or do you have a better code in recommendation?

2) If we want to target certain buttons on a page like cart page has apply coupon, update cart, update shipping and proceed to checkout, so if we apply code to button element it will apply that to all those buttons, so there if we want to target specific buttons only then is this type of CSS proper:

.woocommerce button[name=”calc_shipping”]{
width: 100%;
}

above is an example code for targeting just shipping update button.

Is that code proper? or do you have a better code in recommendation?

Yes, it works, but is this proper way to target certain buttons on a page:

.woocommerce button[name=”calc_shipping”]{
width: 100%;
}

Or how would u do it for example if you visit my cart page if you want to edit code let’s say just on proceed to checkout button.

Hey Ying,

Thanks, btw so far we never had any product on website which has no options to select in variation and is able to be purchased directly.

But now first time on adding such product the layout of variation is broken.

Pls see this image: https://prnt.sc/AXMt2EeVysBH

(More info in the private box)

Hey Ying,

I was experimenting with a new code:

https://www.businessbloomer.com/woocommerce-add-plus-minus-buttons-to-add-to-cart-quantity-input/

After adding this code that issue of button on sing product page went away.

But thing is earlier we were using that code from here:

https://www.tychesoftwares.com/how-to-add-plus-and-minus-buttons-to-the-quantity-input-on-the-product-page-in-woocommerce/

So, if we use the code from there then it only used to apply the code on single product page, while if we use the code from businessbloomer website it applies it I guess everywhere even on cart page.

More info in private box