Payment Method Title Placed Below Select Button

Hi,

I think there is something wrong with the Label Tag usage on checkout page.

<label for="payment_method_paypal_express">Pay with PayPal <img src="https://www.website.com/wp-content/plugins/paypal-for-woocommerce/assets/images/paypal-credit-card-logos.png" alt='Pay with PayPal'/></label>

I installed PayPal Express Checkout by Angelleye which is the most popular PayPal plugin.

I found that the Payment Method Title “Pay with PayPal” is placed below select button on mobile view. At first I thought it was the plugin’s problem but then I checked it on my another site that uses different theme there isn’t this problem.

This problem occurs when Payment Method Title AND Payment Logo Image cannot fit the screen width on mobile phones.
Basically when the Title is too long or/and Image is too long.

I feel like the </label> tag should be place before <img> tag.

Is there a way to fix this?

Please see the attached image.

Attachments:

You must be logged in to view attached files.

Hello,

Are you able to provide us your admin access so we can check how it should work with default WordPress theme?

Thank you in advance.

Hi

Sure

Hi,

We just tested your website and it seems that it works in the same way with default WordPress theme also

https://gyazo.com/1f2d1c901612c8c378afb61b2a544965
https://gyazo.com/37e417d49218c3802e2d8c1583dad432

It means that this HTML structure is not overridden with our theme and comes from the plugin you use.

Regards

Hi,

Thanks for looking into this problem.
That’s very weird please look at this photo attached.
Same website using Twenty Sixteen theme and Woodmart theme.
Do you think this is plugin related? My another site that uses Savoy theme with this PayPal plugin doesn’t have this problem.

Also I have problem when I switch themes from Woodmart to another theme and back to Woodmart theme.
The menu items are changed for example Home menu becomes Newsletter. and right hand side bar(that contains CATEGORIES, PRODUCTS, OUR STORES) on checkout page appears which I didn’t have before.
I’m using Minimalism Dummy at the moment.
Could you please advise me why this happens?
I can only fix problem by restoring backup every time I switch themes.

Thank you,

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

ul.payment_methods li>label {
    display:inline;
}

Regards

Hello,

Thanks for your code. It fixed the issue perfectly!

May I ask you another question?

When I switch to another theme and switch back to Woodmart Child Theme.

Some things are changed.

Such as,
Some menus disappears and NEWLETTER menu appears.
Footer that I didn’t have, comes back.
On checkout page, Right side bar appears which I also didn’t have.

I was using Minimalism dummy data.

Why does this happen every time I switch themes?

Any idea?

Thank you,

Mike

It is a bug in WordPress itself. In some cases, when you switch between themes, it loses widgets and menus configurations. We can’t fix it in our theme scope since it doesn’t depend on it.

Okay I understood.

Thank you for the clarification!

Contact us if you have any additional questions or concerns.

[Author]

Posts