CSS conflict causing Plus and Minus qty buttons to expand

Hey there,

Can you provide a site URL for us to view this issue? Thanks!

Here is an example:

https://www.beyondhealthy.ca/shop/syntol-amd-advanced-microflora-delivery/

I’m having the same issue.

Let me give you some more details as to what’s exactly happening with your newest Woocommerce Stripe plugin on my site.

Here’s the sequence of events:
-Downloaded the updated Woocommerce Stripe plugin that contained Apple Pay and activated Apple Pay. The button for Apple Pay worked on the Product page but didn’t work anywhere else so I disabled it.
-Began using my site to be sure everything was working and discovered that on Safari I could only ever have one item in my cart. Every time I added a new item it increase the total number of items and made it all the same thing. Chrome was fine, Firefox was fine, IE was fine only Safari was messed up.
-I then deactivated the Stripe plugin and the site began working correctly.
-Reactivated the Stripe plugin and it began having the cart issue as before.

I’m not a programmer but when the Stripe app is activated, the site has problems, when it’s deactivated it works correctly.

P.S. – In addition the Stripe plugin is changing my button size and spacing. This ONLY happens on Safari, which is also where Apple Pay can only live.

fressocoffee.com

Thank you.

I have a similar issue (using Flatsome theme, currently in development) and it’s affecting the cart only on the Safari mobile version.

I updated the Stripe plugin and now the +/- quantity buttons and the add to cart button are stretched to full width on mobile. If I add more than one item to cart it will only display the most recent one added on the cart page, the others disappear. (Ps. I don’t have Apple pay activated)

Also getting an error if the product has only one left in stock saying it’s already in the basket or similar.

If I deactivate the plugin all works as normal.

I’ve restored a previous version of the site/plugin for the moment.

Thanks

I’m having the same issue with the +/- buttons and add to cart button getting all messed up once Apple pay is activated.

Same issue.

This is a big UX issue affecting all websites using quantity buttons, making these websites not usable on iOS since it only displays minus button with width 100%.
I didn’t notice it when I’ve updated Stripe gateway plugin, since the style sheet with these rules isn’t loaded on Google Chrome responsive testing tool, only on Safari / iOS and I was notified by a customer unable to proceed.

Please remove it ASAP.

Also, you should enqueue this style (stripe-apple-pay.css) ONLY if you choose to use Apple Pay! I’m not using it, but you load this style anyway.

Thanks

• This reply was modified 7 years, 8 months ago by Dademaru.

For a temporary solution, add this to your functions.php:

function dm_deregister_styles() {
	if ( class_exists('WC_Stripe_Apple_Pay') ) {
		wp_dequeue_style( 'stripe_apple_pay');
	}
}
add_action( 'wp_print_styles', 'dm_deregister_styles', 100 );

• This reply was modified 7 years, 8 months ago by Dademaru.
• This reply was modified 7 years, 8 months ago by Dademaru.

It seems to have been fixed in version 3.1.4.
Just updated.
Thanks

I have the sam issue.
Dademaru (@xendo) your function.php tip did the job on the product pages.
But it messed with the cart and checkout page, the Apple Pay logo is to small now.

any idea how you could make this function only for the product pages ?
Thank you

I just managed to do it.
`function dm_deregister_styles() {
if ( is_singular( ‘product’ ) ) {
if ( class_exists(‘WC_Stripe_Apple_Pay’) ) {
wp_dequeue_style( ‘stripe_apple_pay’);
}
}
}
add_action( ‘wp_print_styles’, ‘dm_deregister_styles’, 100 );

I now have another problem:
It’s working perfectly, but now I have a css conflict on the cart page.
The apple Pay button is going over the update cart button.
Any idea how I could add a css margin to the apple pay button on cart page only?
Thank you!

function dm_deregister_styles() {
if ( is_singular( ‘product’ ) ) {
if ( class_exists(‘WC_Stripe_Apple_Pay’) ) {
wp_dequeue_style( ‘stripe_apple_pay’);
}
}
}
add_action( ‘wp_print_styles’, ‘dm_deregister_styles’, 100 );

Just found out
.apple-pay-button {
padding:10px
}

Having these issues as well with the Flatsome theme, if I make my site https everywhere, the ApplePay button shows up on the product page and I have this overlapping issue.

I corrected it but when clicking the Apple Pay button nothing happens. On checkout it works fine.

Removing this line from the stripe css file fixed it for me.

.single-product div.product form.cart .quantity input, .single-product div.product form.cart .quantity ~ .button {
width: 100%
}