Checkout page pay icons displayed in the right side

This topic has 11 replies, 3 voices, and was last updated 1 years, 2 months ago ago by Tony Rodriguez

  • Avatar: salmi
    salmi
    Participant
    October 15, 2023 at 15:42

    Hi,
    Can you please help me to display the payment icons on the checkout page more beautiful and straight, an example store and screens I have deposited privately.

    Please, contact administrator
    for this information.
    10 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 16, 2023 at 13:14

    Hello, Salmi,

    Thank you for contacting us and for using XStore.

    Sorry, but this is out of our basic support scope – https://www.8theme.com/documentation/xstore/support/support/
    You are using an additional plugin for the mentioned payment methods, try to contact support of that plugin.

    If you would like to pursue paid customization services, we recommend submitting a customization request to the Codeable team via their website: https://www.codeable.io/?ref=qGTdX

    Kind Regards,
    8theme team

    Avatar: salmi
    salmi
    Participant
    October 16, 2023 at 13:52

    why don’t you do it quickly for me, I’ll be happy to pay you for it.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 16, 2023 at 14:12

    Hello, Salmi,

    Currently, our team is heavily engaged due to a major theme update, hence we are unable to assist with matters beyond our basic support, unfortunately.
    We have assisted you previously, so we kindly ask for your understanding of our current workload.

    Kind Regards,
    8theme team

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 16, 2023 at 15:35

    Hello, Salmi,

    Try the next code and modify it depending on your needs:

    #payment .payment_methods li {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }
    #payment .payment_methods li:has(input[checked]) {
        border-color: red;
        background: #f4f4f4;
    }
    
    #payment .payment_methods {
        border: 1px solid #e1e1e1;
        border-radius: 15px;
    }
    #payment .payment_methods li:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    #payment .payment_methods li:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        margin-bottom: 0;
    }
    #payment .payment_methods input[type=radio] {position: absolute;opacity: 0;visibility: hidden;}
    #payment .payment_methods label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    ul.payment_methods label[for*=payment_method_stripe]:after {
        display: none;
    }
    #payment li label:after {
        display: none;
    }

    the result: https://prnt.sc/ZZW4-Le74n3w

    Kind Regards,
    8theme team

    Please contact administrator
    for this information.
    Avatar: salmi
    salmi
    Participant
    October 16, 2023 at 16:10

    perfect, thank you very much, still missing the circles on the left and would like to display it over the whole width.

    https://prnt.sc/hq7FT-Y7Za_t

    https://prnt.sc/dUNG0YjjUCdd

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 16, 2023 at 20:50

    Hello, Salmi,

    You’re welcome!

    In this case, you need to contact the support of the payment plugin you are using.

    Kind Regards,
    8theme team

    Avatar: salmi
    salmi
    Participant
    October 17, 2023 at 09:32

    Hi, the round circles were there before the adjustment and wants only that the lines are drawn through without border, that should be only a small adjustment.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 18, 2023 at 07:40

    Hello, Salmi,

    https://prnt.sc/xQDI83XChTIk
    Please change the previous custom code to:

    #payment .payment_methods li {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }
    #payment .payment_methods li:has(input[checked]) {
        border-color: red;
        background: #f4f4f4;
    }
    
    #payment .payment_methods {
        border: 1px solid #e1e1e1;
        border-radius: 15px;
        margin-left: -2em;
        margin-right: -2em;
        border-left: none;
        border-right: none;
    }
    #payment .payment_methods li:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    #payment .payment_methods li:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        margin-bottom: 0;
    }
    #payment .payment_methods input[type=radio] {
        position: absolute;
        top: 17px;
        vertical-align: middle;
    }
    #payment .payment_methods label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        max-width: calc(100% - 40px);
        margin-inline-start: 30px;
    }
    ul.payment_methods label[for*=payment_method_stripe]:after {
        display: none;
    }
    #payment li label:after {
        display: none;
    }

    or https://prnt.sc/eVRXxtKXhRf8

    #payment .payment_methods li {
        background: #ffffff;
        border: 1px solid #e1e1e1;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
            border-left: none;
        border-right: none;
    }
    #payment .payment_methods li:has(input[checked]) {
        border-color: red;
        background: #f4f4f4;
    }
    
    #payment .payment_methods {
        border: 1px solid #e1e1e1;
        margin-left: -2em;
        margin-right: -2em;
        border-left: none;
        border-right: none;
    }
    #payment .payment_methods li:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    #payment .payment_methods li:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        margin-bottom: 0;
    }
    #payment .payment_methods input[type=radio] {
        position: absolute;
        top: 17px;
        vertical-align: middle;
    }
    #payment .payment_methods label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        max-width: calc(100% - 40px);
        margin-inline-start: 30px;
    }
    ul.payment_methods label[for*=payment_method_stripe]:after {
        display: none;
    }
    #payment li label:after {
        display: none;
    }

    Kind Regards,
    8theme team

    Avatar: salmi
    salmi
    Participant
    October 18, 2023 at 11:12

    Hello, thanks for the code. On the shopping cart page shipping and value are not in the same amount, theme settings did not help unfortunately.

    https://prnt.sc/n1bwRQgpsgYt

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    October 18, 2023 at 13:06

    Hello, @salmi,

    We hope this message finds you well. To address the issue you are experiencing, we kindly request you to follow the steps outlined below:

    1. Copy the CSS code provided here:

    .woocommerce-cart tr.woocommerce-shipping-totals.shipping th {
        vertical-align: top !important;
    }

    2. Navigate to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS on your site.

    3. Paste the copied CSS code into the Global CSS section.

    4. Save your changes and clear your browser cache.

    5. Visit your site to verify if the issue has been resolved.

    The final result should align with your expectations: https://postimg.cc/zVMjNpzq

    Should you require further assistance, please do not hesitate to contact us.

    Best Regards,
    8Theme’s Team

  • Viewing 11 results - 1 through 11 (of 11 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.