Align Quantity and Add to Cart Buttons on Single Product Page

That’s perfect, so do u recommend keep using the businessbloomer code? or should we achieve this using elements hook which you had shared?

Seem the PHP code works fine, then just use that :)

Ok thanks, pls see private box

I tested 2 products, and they behave the same, I didn't see the freezing moment.
But I have to say, it's not very fast.

Was the favicon loading on ur end? or was just loading for 1st product and not 2nd?

Both were loading.

Hey Ying,

Ok thanks a lot.

Yes, this is the default behavior of default buttons in GP. It follows the Colors in Appearance > Customize > Colors > Buttons

If you wish to override this for these buttons, you can try adding this CSS in Appearance > Customize > Additional CSS:

button.plus, button.minus {
    background-color:#000;
}

button.plus:hover, button.minus:hover {
    background-color:#CC3333;
}

Hope this clarifies!

Hey Fernando,

That's perfect, so how can I have the same for all the buttons on the website? coz after clicking certain button there is no point on having hover effect on it until somewhere else is clicked in the background.

Hi there,

coz after clicking certain button there is no point on having hover effect on it until somewhere else is clicked in the background.

Can you explain or share an example ?

Hey David,

Sure, without using this CSS:

button.plus, button.minus {
    background-color:#000;
}

button.plus:hover, button.minus:hover {
    background-color:#CC3333;
}

When I click on any of the buttons, then that button keeps having the hover effect even after my mouse is moved, it won't go until I click somewhere else in the background.

For example see this image: https://prnt.sc/pbe1_jQQpVyo

Can you link me to another page where there is a button that is retaining its 'hover' color after click ?

Hey David,

It seems that was the only one I guess which was causing that issue, weird, I can't find any other button now doing such a thing, btw now since button and functioning is all solved can you pls tell how can the quantity button be taken on top and the add to cart button taken below it? in short instead of current inline format how to make it stacked.

Earlier we went to other route coz the button was causing issues but now its resolved, the main reason for opening this topic was alignment.

Hey David,

OK I found the button which was causing that, pls check private box

Do you mean this?

[screenshot deleted]

Hey David,

Yes, after dragging do they retain that hover effect? or its something to do with css?

Also after adding product to the cart and you can go to checkout page there you can see before place order button there is accept terms and conditions that too looks like that.