Apple pay blocking size selector on mobile

Hi there @dswpinfo ??

Thank you for contacting Woo support!

Apple pay blocking size selector on mobile

I went ahead with checking out the page at https://shop.famousorgy.com/product/the-elites/, and this is what I see from my end:

The Apple Pay button appears to not be blocking any other elements.

I hope this is helpful! Please let us know if you have any further questions or concerns.

Hello,

Try selecting the different size options and you will see the issue. Like I stated “ you can only select Medium in vertical mode and XL-S on landscape mode“.

Apple Pay’s frame is now vertical instead of horizontal, below is a desktop browser pic.

• This reply was modified 1 year, 2 months ago by dswpinfo.
• This reply was modified 1 year, 2 months ago by dswpinfo.

Hello @dswpinfo,

Thank you for sharing the screenshot!

I noticed there’s a width property added to the wrapper, which doesn’t seem to originate from the plugin. Did you add this? :?)

Link to image: https://d.pr/i/aUKD9m

Additionally, could you please let us know if this issue also happens when switching to the default Storefront theme?

Look forward to hearing back from you.

Hello,

Yes, I added that to center the Apple pay button on mobile. I just briefly removed the CSS Code and the Apple Pay button frame is even wider blocking more size options on mobile. Also while switching to the Storefront theme the size selector is a completely different layout.

Btw I had reached out to Betheme about this issue and they stated “We’ve spent a while on this today and found that this has nothing to with the theme at all. We’re going to explained what happened. WooCommerce did recently update and throw away this button from form where button was previously. As proof, we attach the following screenshot. All we can give you is css to float that button but it won’t look ideal because plugin responsible for this button isn’t compatible with latest version of Woocommerce and vice versa.”

Hi there!

Thanks for getting back and providing us with more details.

It appears that some elements on your product page such as the add to cart form have been applied CSS float property.

As a result – the float effect is propagated to the Apple Pay button. To resolve this, you can clear the float:

.wcpay-payment-request-wrapper {
  clear: both;
}

OR give it float:right to align it with the add to cart form:

.wcpay-payment-request-wrapper {
  float: right;
}

Let us know how it goes!

The first code

.wcpay-payment-request-wrapper {   clear: both; }

worked, Thx!

• This reply was modified 1 year, 2 months ago by dswpinfo.

Hi @dswpinfo

The first code .wcpay-payment-request-wrapper { clear: both; } worked, Thx!

I’m delighted to know that the CSS code we provided has successfully fixed the Apple Pay button issue on your mobile site! It’s always a pleasure when we discover a solution that does the trick.

The CSS code .wcpay-payment-request-wrapper { clear: both; } is meant to clear the float property that was applied, which in turn should prevent the Apple Pay button from blocking other elements on your product page.

I’ll go ahead and mark this thread as resolved. However, if you ever have more questions or issues in the future, don’t hesitate to kick off a new topic.

We’d be thrilled if you could spare a few minutes to leave us a review at ?? https://www.ads-software.com/support/plugin/woocommerce/reviews.

Cheers!