[Resolved] GP Premium 1.81 has broken quantity buttons on Woocommerce

[Neil]

Hi,

I’ve just upgraded to the latest version of GP Premium and the Woocommerce quantity buttons are suddenly different. On a single product page the new look is fine but I use the Barn2Media product table plugin and the quantity box is completely trashed now when viewed in the table.

Any ideas how I can fix this or shall I roll back to the previous version?

Thanks,

Neil.

[David]

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

[Neil]

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?

[David]

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

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

[Neil]

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.

[David]

Can you try clearing caches including the browser.

[Neil]

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.

[David]

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

[Neil]

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.

[David]

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?

[Neil]

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.

[David]

Yes – makes sense. Something more like this?

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

[Neil]

Yes exactly that 😀

[Neil]

Can you share your CSS?

[David]

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
}

[Author]

Posts