GP Premium 1.81 has broken quantity buttons on Woocommerce

Hi there,

try adding this CSS:

.do-quantity-buttons .wc-product-table .cart .quantity {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
}

.woocommerce .wc-product-table .quantity.buttons-added .minus, .woocommerce .wc-product-table .quantity.buttons-added .plus {
    min-height: auto;
}

The alternative is to deactivate the Quantity buttons in Customizer > Layout > Woocommerce

Thanks David. I've used the customiser approach. I did have a look in there earlier but couldn't see it!

Is this a new feature in the latest version?

Yes, part of the 1.8 update. You can see more here:

https://generatepress.com/gp-premium-1-8/

Some super cool features there. I've found a bug though, not sure if it's just me or not though.

All 'X's for closing or cancelling are not showing correctly.

Can you try clearing caches including the browser.

Yep, running in incognito mode in Chrome sorts the issue. I'll see what it's like when I upload to our test server.

Thanks.

It was a big update including those X's to get better positioning. And Woo caches really hard and so does chrome - caught me out a number of times lol

Cheers, yeah I always forget about browser caching!

It's really good to see the things that you have done in this version, some smart stuff for Woocommerce that's for sure. There's a few things further down the line that I would like to organise better surrounding the layout of the basket/cart on mobile. I'd be interested to know what's on your roadmap for this area.

Glad you like it.
If you don't mind me turning it around, what would you like to see in the future regards basket/cart? Any examples of better checkout processes?

On mobile, the basket/cart with a lot of products in is not very optimised.

It seems silly to have everything on a separate line, especially the X. It would be great to consolidate several of the line items to make it more manageable.

Yes - makes sense. Something more like this?

Not perfect - but quick messing with CSS in the browser tools

Yes exactly that :D

Can you share your CSS?

this is the basics:

.woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
    display: flex;
    flex-wrap: wrap;
}

.woocommerce table.shop_table tr.woocommerce-cart-form__cart-item td {
    flex: 1 1;
}

.woocommerce table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail,
.woocommerce table.shop_table tr.woocommerce-cart-form__cart-item td.product-name {
    order: -1;
    flex: 1 0 100%;
    box-sizing: border-box
}