Klarna and Afterpay message in cart overlap the “Proceed to Checkout” button

  • Resolved Joanna Gil

    (@niceneedle)


    2 weeks, 6 days ago

    I’m experiencing an issue with the Klarna and Afterpay messages on my cart page. I’ve attached an image for reference: View Image.

    The messages overlap the “Proceed to Checkout” button. When I refresh the page and scroll through the messages, they display correctly without overlap. However, if I remain at the top and then scroll down, the overlap occurs. This issue seems to be related to how the Klarna and Afterpay buttons are loading dynamically, affecting the layout.

    Could you please help me resolve this? Additionally, if there’s a way to hide these messages, I would appreciate your guidance on that as well.

    Thank you in advance for your assistance!

    Best regards,

    Joanna.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jonayed Hosen (woo-hc)

    (@jonayedhosen)

    Hi @niceneedle

    I understand you’re experiencing an issue with the Klarna and Afterpay messages overlapping in the Proceed to Checkout button on your cart page. However, I’ve checked your website and reloaded the cart page a couple of times, and I wasn’t able to see the issue on my end. Here’s how it looks after reloading:

    If you’re still seeing the overlap, could you try switching to the default Storefront theme temporarily? It looks like your current theme is heavily customized, possibly with Elementor, and the layout or code might not be optimized for the payment badges, which could be causing the overlap.

    You can also try creating a test checkout page using the [woocommerce_cart] shortcode to see if the issue persists. If it doesn’t, the problem might be caused by a theme or third-party plugin. In that case, running a full conflict test could help identify which plugin or customization is causing the issue.

    Additionally, clearing your browser cache might help, as browsers can sometimes display an outdated version of the page.

    Please check these steps and let me know how it goes!

    Thread Starter Joanna Gil

    (@niceneedle)

    Hi, thank you so much for reaching out. I fixed the problem by adding a CSS modification:

    .wc-proceed-to-checkout .button?{margin-top: 50px !important;}

    I tried everything directly with the klarna & afterpay message and nothing worked. So, that kinda solution on adding that CSS code fixed my particular issue in the cart section.

    Plugin Support Jonayed Hosen (woo-hc)

    (@jonayedhosen)

    Hi @niceneedle,

    I’m thrilled to hear that adjusting the custom CSS code resolved the issue! It’s fantastic that you can now display the payment methods on your cart page smoothly.

    I’ll go ahead and mark this thread as resolved. However, if you ever have more questions or issues in the future, don’t hesitate to kick off a new topic.

    We’d be thrilled if you could spare a few minutes to leave us a review at https://www.ads-software.com/support/plugin/woocommerce-payments/reviews/

    Cheers!

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