Archived topic
Checkout page layout options
11 replies · Started by mkjj on November 4, 2021
I've just activated the Woocommerce module, and for the first time I'm a little bit disappointed with the results. The checkout page changed to a two-column-layout which doesn't look quite right for me. I used Tom's CSS to fix that.
The layout for the payment methods and the additional info box changed, for example the .payment_box payment_method_bacs class etc. I would rather stick with the original layout which I like better. Is there a setting for this? Or would I have to overwrite the CSS that is loaded by the module?
Thank you!
The module changed several other elements. Most of it is not quite right for the site. I just need the cart icon in the header navigation. Can I somehow keep the icon, but remove all the other CSS? I could dequeue the stylesheet, but that would have effects on the cart icon too. What would you recommend?
Hi there,
The shopping cart needs the Woocommerce module to be activated.
You can try dequeue the stylesheet, then we can provide CSS for the shopping cart only if it's needed.
Let me know :)
This is a very generous offer, that I can't refuse. :-) The CSS for the cart icon would be perfect. Would take me quite some time to figure this out. I've already dequeued the GP Woocommerce module stylesheet.
Thank you!
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Yeah, of course: https://dfme-achtsamkeit.de/buchen/live-webinar-angst/ It's german, but it should be self-explaining. The shop is not finished yet, but everything should work. I set the cart icon to show the items instead of the amount. So, this should be the only detail I really need.
Thank you!
Try this CSS:
.menu-bar-items span.amount {
display: none;
}
.menu-bar-items span.number-of-items {
display: inline-block;
}Let me know :)
Excellent! Almost there. The number ist not quite perfect, but I can probably fix this. Thank you!
Only this part was missing:
.cart-contents>span.number-of-items {
ont-size: 11px;
display: inline-block;
background: rgb(213 91 83);
line-height: 1.7em;
height: 1.7em;
width: 1.7em;
text-align: center;
border-radius: 50%;
margin-left: 5px;
position: relative;
top: -5px;
color: #ffffff;
}Awesome you nailed it!
There's an f missing (font-size) on the first line of CSS :)
I'm impressed! :-)
Thanks for the great support!
Glad to be helpful :)
