Amazon pay official woocommerce plugin

Hi there!

in the checkout page the notice as you can see in the screenshot is all mess-up!
Please let me know how can i fix that

Screenshot and web URL in private section

Thank you!

Hello,

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woocommerce-checkout .woocommerce .woocommerce-error::before, .woocommerce-checkout .woocommerce .woocommerce-info::before, .woocommerce-checkout .woocommerce .woocommerce-message::before {
    top: 42px;
}

Best Regards

Thank you for the fast replay!

This doesn’t fix the issue:

– This doesn’t work for the mobile and tablet viewpoint
– after applying the code you have sent, the text (see screenshot private section) is in the right side!

Please re-check and let me know

Thank you

Hello,

I saw the screenshot you attached.

The text is already on the right side, not with the CSS I provided.

Actually, the issue is caused by the content in the notifications. And the alignment CSS is coming from the Plugin, not our theme that can’t be overridden.

Screenshot for Clarification: https://gyazo.com/bfbfe40f2f406fe0d84228021f95f183

As you can see in the above GIF the issue is caused by the amazon button inside. And if we remove it then the content moves to the left.

You can try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS to remove the amazon button.

.woocommerce-info #pay_with_amazon {
    display: none;
}

Best Regards

That’s ridiculous!!!

Thats a popular payment method here in Germany! and i can not just set the display to none!
and it as well a very well known plugin to be directly downloaded from Woocommerce

The issue is that the text get the right side and it doesn’t display well in mobile and tablet mode and this needs to be fixed

Hello,

Sorry for the Misunderstanding. Please replace the previous Custom CSS with the following in the Global Custom CSS area under Theme Settings >> Custom CSS.

body.woocommerce-checkout .woocommerce .woocommerce-error::before, 
body.woocommerce-checkout .woocommerce .woocommerce-info::before, 
body.woocommerce-checkout .woocommerce .woocommerce-message::before {
    top: 50%;
}
.woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon {
	top: auto;
	margin: 0 20px 0 0;
}

Then clear cache and check back.

Best Regards

Thank you for the reply

This still isn’t working in mobile and tablet viewpoint

i dont need help anymore i have fixed this

Hello,

We are Glad that you managed to fix the issue on your own. You are Great!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts