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

[GeneratePressUser]

Hello Generate Press Team,

Pls can you check the private box and tell how can we align the Plus Minus buttons to be above the add to cart button?

[Leo]

Hi there,

Your single product page is built with Elementor’s widgets so GP shouldn’t interfere with the layout at all:
https://www.screencast.com/t/gJjQKBAsT

Have you checked with Elementor’s support team first?

[GeneratePressUser]

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?

[Fernando]

Hello there,

Yes, the Quantity selector and add to cart button are coming from WooCommerce.

However, there’s also CSS coming from Elementor affecting these buttons. The structure is different from the default HTML structure generated by WooCommerce as well. Might be because of a plugin you have, not sure if because of Elementor.: https://share.getcloudapp.com/2NumyOxe

With the current structure, if you would like to align them with CSS, here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
    flex-wrap: wrap !important;
    width: 60%;
}

.single-product button.single_add_to_cart_button.button {
    width: 100%;
    margin-top: 10px;
    margin-left: 30px !important;
    margin-right: 30px !important;
}

.single-product .single_variation_wrap {
    display: flex;
    justify-content: center;
}

Kindly modify the margin values to your preference.

It would also be good to check why the buttons of the quantity selector are not inside the quantity div. You can probably ask Elementor if the have a function causing this.

Hope this helps!

[GeneratePressUser]

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

[Ying]

Try this:

@media (min-width: 769px) {
    .woocommerce-variation.single_variation {
        position: absolute;
        left: 45px;
    }
}

[GeneratePressUser]

Hey Ying,

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

[Ying]

Try this then:

.woocommerce-variation.single_variation {
    width: 100%;
}

.single-product .single_variation_wrap {
    flex-wrap: wrap;
}

[GeneratePressUser]

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?

[Ying]

As long as the code works, it should be ok.

I would suggest learning how to use the developer tool to target elements more accurately.
https://developer.chrome.com/docs/devtools/

[GeneratePressUser]

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.

[Ying]

I would suggest learning how to use the developer tool to target elements more accurately.
https://developer.chrome.com/docs/devtools/

I inspect the HTML and get the individual class/ID of the element.

[GeneratePressUser]

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)

[Ying]

Do you mean theadd to cart text stacks vertically?

I don’t see this issue when I checked, neither on mobile or desktop, do I miss anything?
https://www.screencast.com/t/pqr2kWYqH1J

[GeneratePressUser]

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

[Author]

Posts