[Resolved] Checkout page layout options

Home Forums Support [Resolved] Checkout page layout options

Home Forums Support Checkout page layout options

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1991533
    mkjj

    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!

    #1991556
    mkjj

    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?

    #1991599
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1991606
    mkjj

    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!

    #1991646
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1991657
    mkjj

    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!

    #1991662
    Ying
    Staff
    Customer Support

    Try this CSS:

    .menu-bar-items span.amount {
        display: none;
    }
    .menu-bar-items span.number-of-items {
        display: inline-block;
    }

    Let me know πŸ™‚

    #1991690
    mkjj

    Excellent! Almost there. The number ist not quite perfect, but I can probably fix this. Thank you!

    #1991695
    mkjj

    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;
    }
    #1991699
    Ying
    Staff
    Customer Support

    Awesome you nailed it!

    There’s an f missing (font-size) on the first line of CSS πŸ™‚

    #1991846
    mkjj

    I’m impressed! πŸ™‚

    Thanks for the great support!

    #1991861
    Ying
    Staff
    Customer Support

    Glad to be helpful πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.