Return to previous page

Payment methods can only be clicked on via the label and not across the entire width of the button

This topic has 6 replies, 2 voices, and was last updated 10 months, 2 weeks ago ago by Luca Rossi

W2M

Participant

January 4, 2024 at 17:58

Hi,

On the checkout Page i could only click on the label to choose the payment methods and not across the entire width of the button.

I have recorded a video of this and uploaded it. Would you know how I could fix this error?

Many thanks in advance.

Please, contact administrator
for this information.

#378605 Copied Theme version: 9.2.5

5 Answers
Luca Rossi

Support staff

January 5, 2024 at 09:01
Dear @W2M,

We kindly request that you insert the custom CSS code provided below into your website. This can be accomplished by navigating to Theme Options, selecting Theme Custom CSS, and then placing the code in the Global CSS section:
```
#payment .payment_methods label {
    width: 95%;
    display: inline-block;
}
```
We trust that this adjustment will be beneficial. Should you require any further assistance, please do not hesitate to reach out.

Warm regards,
The 8Theme Team
#378657 Copied
W2M

Participant

January 5, 2024 at 14:21

Many thanks for the feedback. Would it be possible, for example, to trigger the click via the entire li class=”wc_payment_method payment_method_mollie_wc_gateway_banktransfer” instead of via the label? There are areas where the click is not registered. This could confuse the user.

Please contact administrator
for this information.

#378728 Copied
Luca Rossi

Support staff

January 5, 2024 at 16:27
Hi @W2M,

Please update the previous custom CSS codes to this:
```
#payment .payment_methods li {
    padding: 0;
}
#payment .payment_methods li label {
    width: 95%;
    display: inline-block;
    margin: 0;
    cursor: pointer;
    padding: 10px 0;
}
#payment .payment_methods input[type="radio"] {
    top: 14px;
}
```
Result: https://prnt.sc/zUF33sazU4rd

Warm regards,
The 8Theme Team
#378777 Copied
W2M

Participant

January 8, 2024 at 12:20

Hi,

Unfortunately, the entire area is still not clickable. How can I make the entire button area clickable?

Please contact administrator
for this information.

#379052 Copied
Luca Rossi

Support staff

January 8, 2024 at 12:29
Hi @W2M,

Please delete the previous custom CSS codes and add this custom CSS code instead:
```
body #payment .payment_methods li {
    padding: 0;
    position: relative;
}
body #payment .payment_methods li label {
    width: 100%;
    display: block;
    margin: 0;
    cursor: pointer;
    padding: 10px 10px 10px 25px;
}
body #payment .payment_methods input[type="radio"] {
    top: 14px;
    position: absolute;
    left: 5px;
    z-index: 9999;
}
```
Hope it helps!
#379055 Copied
Tagged: button width, clickable labels, payment methods, user-friendly payment, woocommerce themes, wordpress themes
Viewing 6 results - 1 through 6 (of 6 total)