This topic has 11 replies, 3 voices, and was last updated 1 years, 2 months ago ago by Tony Rodriguez
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.
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
why don’t you do it quickly for me, I’ll be happy to pay you for it.
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
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
perfect, thank you very much, still missing the circles on the left and would like to display it over the whole width.
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
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.
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
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.
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
You must be logged in to reply to this topic.Log in/Sign up