Checkout page sidebar payment options extending or shutting off

This topic has 6 replies, 3 voices, and was last updated 1 years, 6 months ago ago by Rose Tyler

  • Avatar: ronron
    ronron
    Participant
    June 11, 2023 at 18:50

    when you are in the checkout page and clic some payment options open and break the sidebar as you can see in the picture.
    https://paste.pics/f676ed743d38c45478841bc9513ebb34
    and the payments options show infinite links as you try to go down to the payment button, it keeps loading a lot of fields.
    It works better with paypal, but when you turn the full paypal form on, the issue also repeats.
    https://paste.pics/f833e4b760da61a35eba7dde2350fa2f

    5 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    June 12, 2023 at 07:14

    Hello, @ronron,

    We suggest that you navigate to XStore >> Theme Options >> WooCommerce >> Cart/Checkout Layout and turn OFF the Advanced Layout. After saving the changes and clearing the browser cache, please check your site again. We believe this should resolve your issue.

    Best Regards,
    8Theme’s Team

    Avatar: ronron
    ronron
    Participant
    June 12, 2023 at 08:05

    But, I wanted to use the advanced layout.
    It seems to be the absolute position style, and I want to modify it.
    There is css class style that I can not find.
    It is called:
    “order-revew is_stuck” as shown in the picture attached.
    Could you please help me find the page where I can modify that class style?
    https://paste.pics/c287614feca91d019fe852db49757b02

    I tried looking in a lot of places and I can not find it.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 12, 2023 at 08:34

    Hello Ronron,

    Thank you for your response.

    This conflict can only be resolved by disabling the Advanced layout, as the payment method errors when the page is scrolled.
    You can try to use the next custom CSS code:

    .mp-input-label + .mp-input-label {
        display: none;
    }
    .mp-terms-and-conditions-container + .mp-terms-and-conditions-container {
        display: none;
    }

    If the result of adding this code is not suitable, the only way is to disable the Advanced layout or plugin that causes conflict, unfortunately.

    If you have any other questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Best Regards,
    8Theme’s Team

    Avatar: ronron
    ronron
    Participant
    June 12, 2023 at 16:17

    1) how can I add that custom CSS? Where do I have to add it? It is just copy and paste?

    2) I wanted help in finding this piece of style code:
    https://paste.pics/c287614feca91d019fe852db49757b02
    I want to tweak with it. I think I could just modify it and fix it.
    I need your help in finding that piece of code

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 13, 2023 at 12:06

    Hello Ronron,

    Thank you for your response.

    1/ Copy the code > go to Theme Options > Theme Custom CSS > Global > add the code at the bottom of the existing there code.

    2/ If you want to change style code, you need to add your own code into Theme Options > Theme Custom CSS area.
    For example, https://prnt.sc/GfcA2hT9TMAl
    We hope this article will be helpful: https://developer.chrome.com/docs/devtools/css/

    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Kind Regards,
    8theme team

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.