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

[GeneratePressUser]

Hello,

Also pls check this: https://prnt.sc/CewMzVtNuSPP

On making screen size small like around maybe tablet size then the layout causes such issue, I think this issue won’t come if you can tell how can the quantity buttons be put on the top and the add to cart button below it, then entire layout I guess would work perfectly.

[David]

The color being stuck on hover after being dragged isn’t anything to do with the theme.
I believe that is the browser not knowing what to with the dragged element, and why would you drag it ?

The button issue – those buttons aren’t from the Theme, as the page is 100% elementor and what looks like other plugins.
On that basis, this is as much as i can offer to fix that:

@media(max-width: 400px) {
    .e-atc-qty-button-holder {
        flex-wrap: wrap !important;
    }
    .e-atc-qty-button-holder .quantity {
        margin-bottom: 0.5em !important;
    }
}

But i suggest you address it with the plugin developer as that form has other dynamic elements such as payment processor buttons that may get messed up with that CSS.

[GeneratePressUser]

Hey David,

Actually those plus and minus buttons are from here:

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

So, its not from theme nor elementor. So, the css which you gave should be best fit for it? or do you have any other css which takes that button for all screen sizes below that quantity box?

[Ying]

As David said, the buttons are not from the theme, so the support we can offer is limited.

If you are looking for a more specific solution, you’ll need to hire a developer for that unfortuanly.

I believe we’ve linked this article before already but please be mindful of what we can support here:
https://generatepress.com/what-support-includes/

[GeneratePressUser]

Hey Ying,

Yes, I get the support which your team can provide but only on that page I have put those buttons via code, if I use generatepress buttons then there same code will be needed so for that one only I am asking so that we can use it back and forth and experiment things, I am just asking how to take add to cart button below, we even have generatepress theme applied on some other products where generatepress has option to display quantity buttons, can you give code for that? we are seeing elementor things and customising same on generatepress so that we will mostly then disable elementor for those single product pages as we need to use hooks there and elementor wont allow us to use it within its page.

[GeneratePressUser]

Adding up to my previous reply, see the link in private box

[Leo]

Hi there,

I have removed the video as requested.

Please note that almost all of your topics fall under the “Theme-specific filters & CSS code” category mentioned in the support scope guideline which means that “We’ll provide basic examples and get you headed in the right direction.”

I think it’s fair to say that we have done that multiple times in this topic and other topics as well.

Unfortunately, we cannot provide full custom CSS solution here – this is something you might need to hire a developer for especially if you to have a heavy mix of using Elementor widgets and GP’s default single product template like this.

Thanks for your understanding 🙂

[GeneratePressUser]

Hey Leo,

Yes, I understand and really appreciate it, I was only asking things which fall in your scope and not any heavy css coz I know that we need a developer for it, but right now the button thing which I am asking that is not elementor part, I am not using elementor, I just gave you example site which had elementor, but maybe that confused up things, so pls check private box that website don’t have elementor, its pure GP.

[Leo]

So let’s take this default single product page for example:
https://gpsites.co/seller/product/happy-ninja-hoodie/

This CSS would move the Add to Cart button:

.woocommerce div.product form.cart {
    flex-direction: column;
}

Here is the result:
https://www.screencast.com/t/sQgrLA92

I believe this thread has gone very off topic from the original title of “Align Quantity and Add to Cart Buttons on Single Product Page” so I’m going to mark this as resolved that’s ok with you.

[GeneratePressUser]

Yes this works and I too feel yes it went off topic later maybe coz of those plus minus button codes, but I appreciate your team helping, You can mark it resolved btw can you pls tell me that is there a website or place where we can see all those CSS codes? like we were testing display: flex and all those codes and things were not working but now first time we saw this flex-direction: column; code, we don’t want to ask here even if it falls under your scope if we can do it ourself, already we know the css well enough but not that perfect like somethings lack for example the current code flex-direction: column; so any site or anything which you can provide just to get list of all those css codes so that we can ourself just experiment things there and don’t need to contact here now as you showed that code now we can do the rest things like putting there width: 50% and all those codes and justify-content: center etc stuff to make thing as we like, hope you get the point what I am trying to say.

[Leo]

I like this website for Flexbox demonstration:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are several other good ones out there as well.

flex-direction is a very basic usage of flex.

[Author]

Posts