Archived topic
Woocommerce layout - digital wallet
5 replies · Started by DAVID on May 4, 2021
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:
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!
Hi there,
can you share a link to a product where i can see the issue?
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.
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.
That worked a treat David. Thanks so much for your help. Really appreciated.
Glad to be of help!
