Is it possible to create a full width qty button?

Hello,

The only CSS layout I supported so far is the quantity increment buttons, with an input field and Add to cart button in one line. I think it looks pretty good, also on slim mobile devices (product page):

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

Here is what I came up with on shop page, the width of the buttons is set in the plugin settings, the quantity input field width fills the remaining horizontal space of its parent container, is this what You are after?:

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

Best regards,

Ryszard

• This reply was modified 5 years, 8 months ago by taisho.
• This reply was modified 5 years, 8 months ago by taisho.

Thanks for the confirmation. I’m working on a medium-sized update and plan to release it in a week. I will add an option in plugin settings to keep the Add to cart button and quantity buttons with a quantity input field in separate lines, where the input field’s width will automatically fill the remaining width of its container. It will be available only if the merged buttons setting is selected. Both the product page and archive pages will be addressed.

For now, this is what can be used on an archive page in the child’s theme CSS to override the existing layout, but it requires more checking and extending to the product page too:

This moves Add to cart button to the next line instead of keeping it in the same line through inline-block:

form.cart button[type=submit]:not(#qib_id):not(#qib_id), .add_to_cart_button:not(#qib_id):not(#qib_id), form.cart .qib-container+div:not(#qib_id):not(#qib_id) {
    display: block;  
}

Because display: flex eliminates a break which appeared after display: inline-blockwhich we are replacing, margin-bottom needs to be added:

.qib-container:not(#qib_id):not(#qib_id) {
    display: flex;
    margin-bottom: 10px;
}

Change input element to have 100% of available width instead of a fixed number of pixels from plugin’s settings:

.qib-container .quantity input.qty:not(#qib_id):not(#qib_id) {   
    width: 100%;  
    max-width: 100%;  
}

div container of the input element needs to be similarly resized:

.qib-container div.quantity:not(#qib_id):not(#qib_id) {
    width: 100%; 
    max-width: 100%;
}

Best regards,

Ryszard

• This reply was modified 5 years, 8 months ago by taisho.

Hello,

I’m sorry but the feature will have to wait a bit longer, I expect to have it in 2 weeks. A bit of stuff with higher priority, especially compatibility issues with popular themes, came out and I couldn’t find enough time for it to be in today’s release. Fortunately, my to-do list is now rather short.

Best regards,

Ryszard

• This reply was modified 5 years, 6 months ago by taisho.