Apple pay button covered by quantity selector

Put the add to cart button on the line below with some custom css:

.woocommerce div.product.elementor form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: block !important;
}
.woocommerce div.product.elementor .quantity+.button {
  margin-left: 0 !important;
  margin-top: 10px;
}
.woocommerce div.product form.cart div.quantity {
  float: none !important;
}
.woocommerce div.product form.cart .button {
  float: none !important;
}

Activate the Apple Pay button, then come back here.

@lorro sorry im kind of a noob, how do I do that? and do i need a custom css plugin?

No, the custom css should be copy-and-pasted to:
Dashboard > Appearance > Customize > Additional CSS

@lorro okay I copy pasted your code exactly into the custom css and then activated apple pay button on product page again.
YOURE A FREAKING GENIUS I LOVE YOU

Glad to hear it worked – thanks for letting us know!

I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

Thanks.

@lorro hey, i have been adding some new items without an option for sizes, and whenever that is the case the applepay button is messed up on mobile still.

View post on imgur.com

Thanks!

I can’t find that product. Please post the product link. I’ll need to see it in a browser and be able to use browser tools.

@lorro here it is https://hapi.clothing/product/beige-frog-socks

It looks alright to me. Do you have to add Apply Pay to get the corruption?

@lorro yeah if you use safari browser which has Apple Pay the quantity selector covers the Apple pay button. Similarly on other browsers the quantity selector covers the google pay button

I don’t see Apple Pay when I use Safari. Is Apple Pay enabled on the page? I don’t have Apple Pay so maybe that’s why I don’t see the button. Unless I can see the corruption in the browser I can’t try to fix it. You may need to get a developer in.

@lorro yes that’s the problem we’re having , the button is hidden just behind the quantity selector. If you go to any other product where we have a variation to select such as size, the solution that you provided up above let’s the Apple Pay show through, but on the socks without a size selector the formatting is a bit messed up. Thanks !

I can see a stripe-payment-request-button div in the markup, just after the quantity selector and before the add-to-cart, but there is no button. This is usually an indication that the payment method is not fully functioning.

@lorro theres a button somewhere, im not sure whats going on because If you tap on the sliver of apple pay button that shows you get this https://imgur.com/gI9B6HO and it pulls apple pay up
also apple pay works fine on pages like this https://hapi.clothing/product/colin-the-frog-hoodie-pink

I’m not seeing a sliver of a button. In the markup, there is only the skeleton markup for a stripe-payment-request button, but not the button itself. Its the same on the variable product. Have you tried it when you are logged out? However, it looks like Apple Pay is not setup fully.