Woodmart issue with Amazon Pay

Hello Elise,

we just renewed your support for 6 months. It is our 4 or 5 time. Just to clarify 😀 I’m contacting you due an issue with the checkout of your theme on Woodmart.

As you can see we use Basel on a web site and Woodmart on another web site since 2018. With Basel we always used WooCommerce Amazon Pay and it works great to the top of the checkout. Today we installed the same on Woodmart, but we saw that it isn’t compatible. It works, but the WooCommerce Amazon Pay button appears not on the top of the checkout page, but in a slide banner to the bottom of the page.

We tried to find a fix, but nothing useful. We searched on your forum and we discovered a post where you suggest to ask to the WooCommerce support. And we did it, we asked to the WooCommerce support. But they told us that it is related to the theme, not to WooCommerce. We honestly can’t be disagree with them considering that WooCommerce Amazon Pay works as expected on Basel, but not on Woodmart.

So considering that Amazon Pay payment method is very used from our customers, please could you suggest to us a fix to show Amazon Pay to the top of the checkout page? I mean in a classic way.

Thanks a lot.

Hello,

We are glad to hear that 🙂

As for the issue, please, send us all the necessary information including some screenshots, admin, and FTP access so we can check what is wrong with that.

Kind Regards

Hello,

I can’t provide an FTP access right now, but you can take a look with this admin access.

Please consider that you will be on a live web site, so I kindly ask you do not disable any plugins.

Thanks a lot.

Try to disable Sticky notifications in Theme Settings -> General. It doesn’t work because this button has a WooCommerce notification CSS class.

We did it, but it shows a huge icon of danger that do not invites people to use Amazon Pay: https://www.dropbox.com/s/lc2tf86w4k3qgrq/Screenshot%202020-05-13%2012.16.50.jpg

It is how it works with default theme as well https://prnt.sc/sfyt6v

So maybe you could tell us how to remove the icon of danger and change the background color of that area. Please!

But if you will change this then you will change all other notices on your website too. The best way is to remove the WooCommerce notification CSS class from that button wrapper.

I understand you partially because I’m not a developer. But as I told you we’d like to use WC Amazon Pay also with Woodmart and without all these issues 😀 On Basel it works great as I showed you. Please could you help us to fix the issue? You suggestions seems correct, but I don’t know how I can apply it.

Maybe something was customized on that website but when we test it with Basel it looks the same. It seems that how the plugin supposes to work.

To be sure we checked the code snippets applied and CSS customized on Basel, but we did not customize anything about WooCommerce Amazon Pay. So it is not the reason why a “danger” icon appears there.

We only asked you to help us to use Woodmart as we expected. On Basel it works perfectly, without any “danger” icon. So why here it works in that way? You asked us also an admin access and we granted it. Why you can’t help us? We know that it is very easy for you to help us 😕

We’re your customer since 2 years with more than one renew to the support. Doesn’t it matter to you?

Could you please install Basel theme on this website so we can switch between themes and see the difference?

It isn’t necessary, because as I told we have the same situation on another brand web site. Same plugins, same CSS. And as I told there aren’t customization that introduces a “danger” icon there or a colored banner.

Sorry, but there is no other way to understand why it looks different on both themes. If you say that it works correctly on Basel, please, temporarily install it on the same website so we can do a quick check and see what is different.

Please take a look to the other brand web site with Basel. Inside the checkout you will find the Amazon Pay banner on the same area.

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

.wc-amazon-checkout-message .woocommerce-info {
    display: block;
    margin-bottom: 25px!important;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    color: #2d2a2a;
    font-weight: 600;
    font-size: 14px;
}
.wc-amazon-checkout-message .woocommerce-info:before {
  display: none;
}
.woodmart-dark .wc-amazon-checkout-message .woocommerce-info {
  color: #FFF;
}

Yeah, now it works great just like Basel. I always knew that you can help us! Why did you wait all this time? I don’t know, but YES.

Thanks a lot.

You are welcome 🙂

[Author]

Posts