[Support request] Woocommerce layout – digital wallet

[DAVID]

Hi all,

I have added the digital wallet section of woocommerce via my payments plugin square.

While I realise this is outside the bounds of generatepress it appears to add the digital wallet in a strange space which generatepress is not expecting. I have looked at the live preview in the Storefront theme and it stacks nicely with the add to basket option at the bottom. This is how I see it on my site though:

https://ibb.co/k6m1Qyv

On the documentation, the square plugin provides at https://docs.woocommerce.com/document/woocommerce-square/ they provide a graphic of what it should look like on the site:

On my site, the + – buttons get squashed up and the add to basket button doesn’t run underneath nicely as per the visual. It seems to be placed in the wrong place. I think it should go + – buttons, stacked on top of digital wallet, then add to basket underneath that. Removing the quantity button option makes it a little better but still, nothing is stacked in line.

Product page on site: https://beerginvino.com/product/6-oclock-gin/

Can you help please if possible?

Thanks!

[David]

Hi there,

can you share a link to a product where i can see the issue?

[DAVID]

Thanks for the reply David.

A random product page is : https://beerginvino.com/product/6-oclock-gin/

I don’t know why those images won’t show in my original post – I’ve tried editing them but nothing seems to show.

[David]

Try adding this CSS:

.woocommerce div.product form.cart div.quantity,
#wc-square-digital-wallet,
.woocommerce div.product form.cart .button {
    flex: 1 0 100%;
    max-width: unset !important;
    justify-content: flex-start;
}

If you’re using an Image sharing service then we just need the links. Sometimes the browser has an issue with those links inside an IMG…. but its not an issue i just opened in another tab 🙂 But i needed the site link so i could see the CSS.

[DAVID]

That worked a treat David. Thanks so much for your help. Really appreciated.

[David]

Glad to be of help!

[Author]

Posts