Center Quantity button on the Store Page

Hello,

the main issue on this shop page is a very narrow product area that makes it impossible to place quantity buttons next to “Add to cart” button. You can see that the problem actually gets worse in mobile view where Add to cart button is split into 2 lines:

https://i.imgur.com/jNXxTgQ.png

With this width, I would recommend having the “Add to cart” button in a separate line than quantity buttons, both desktop and mobile view. Selecting this option in plugin settings:

https://i.imgur.com/M1EHv0v.png

should move “Add to cart” button to the bottom what in my opinion is a much better user experience (order of user actions is from top to the bottom).

Adding this CSS in child theme’s CSS or extra CSS will center the quantity buttons within product box and because all other elements within this product box are already centered, this won’t change their position:

.shop-container .products .product .col-inner {
    text-align: center;    
}

Finally, to prevent “Add to cart” button breaking to a second line because of text taking too much of horizontal space, one of these things can be done:

1. Decrease font size from the original 0.8em:

.products .product .add_to_cart_button.is-small {
    font-size: .7em;   
}

2. Decrease horizontal button padding (empty button area to the left and to the right of the text) from the original 0 1.2em:

.products .product .add_to_cart_button.is-small {
    padding: 0 0.4em;  
}

3. Do both at once to make each change smaller:

.products .product .add_to_cart_button.is-small {
    font-size: .75em;
    padding: 0 0.8em;  
}

Best regards,

Ryszard

• This reply was modified 4 years, 11 months ago by taisho.
• This reply was modified 4 years, 11 months ago by taisho.

Hi Taisho,

Thank you very much for your help, now it was excellent.