Return to previous page

Checkout page pay icons displayed in the right side

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

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.

#370211 Copied Theme version: 1.0

10 Answers

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://xstore.helpscoutdocs.com/article/25-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

#370310 Copied

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.

#370323 Copied

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

#370329 Copied

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

#370347 Copied

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

#370358 Copied

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

#370387 Copied

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.

#370443 Copied

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

#370602 Copied

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

#370638 Copied

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

#370659 Copied

Tagged: checkout page icons, customizable woocommerce pay icons, payment icons display, right side checkout icons, secure payment symbols, woocommerce checkout enhancements, wordpress woocommerce templates
Viewing 11 results - 1 through 11 (of 11 total)