Apple pay button is wider than the shopping cart button on variable products

for variable products, the width of the shopping cart button is smaller than the apple pay button. In addition, the shopping cart button is not exactly centered like the apple pay button. The shopping cart button and the apple pay button should both be centered below each other and the same size. The buttons are on the product page and the small shopping cart button is only visible on the variable products.

On the product pages without variable products, the shopping cart button is also not in the same position as the apple pay button.

What can I do here?

Thanks for a quick feedback

Greetings

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.single-product div.quantity+[id*="wc-stripe"]~button {
    margin-left: 0; 
}

Best Regards

Thanks for the code

Unfortunately this only helped with the single products. The cart button is still smaller than the Apple Pay button on the mobile view for variable products. It now fits properly on single products.

The problem is still there with the variable products.
Screenshot 1 Single product > OK.
Screenshot 2 Variable product > not ok.

Greetings

Attachments:

You must be logged in to view attached files.

Hello,

Please try this code:

body  div.quantity+[id*="wc-stripe"]~button {
    margin-left: 0; 
}

If you have any questions please feel free to contact us.

Best Regards

Did not work 😕 the button on variable products is still not the same size on mobile view.

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the page URL of the variable product.

Best Regards

I did put in the link below.

Now the design is looking kind of strange:

———————————
– oder –

Apple Pay Button

Add to cart Button
———————————

Correct would be as follow:

———————————
Apple pay button

-oder-

Add to Cart button
——————————-

Thanks for your help.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-type-variable .woocommerce-variation-add-to-cart-disabled {
display: flex;
}
.product-type-variable .product-image-summary .single_add_to_cart_button {
flex-grow: 1;
}
.product-type-simple .product-image-summary .cart {
display: flex;
}
.product-type-simple .product-image-summary .single_add_to_cart_button {
flex-grow: 1;
}

Best Regards

This helped a lot thank you!! There is one small thing. The text -oder- should be between the apple pay button and the cart. It should look like this:

———————————————
Apple Pay Button
-oder-
Cart Button
———————————————

Since the last modification the tex
„-oder-„ was moved up. Before it was after the Apple Pay button in the middle.

You can check the screenshot what i mean.

Thank you very much for your help.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single-product-page form.cart #wc-stripe-payment-request-button-separator {
    order: 3;
}

Best Regards

[Ueli]

Hi Elise

Perfect thank you it is now in the middle.

But the request button separator is not horizontally in the middle. Can you send me the code to have it also horizontally in the middle? Then its how it should be.

I think this is the last what is missing then im really confident and want so say thank you for your support 🙂

Regards

• This reply was modified 3 years, 8 months ago by Ueli.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code for a variable product with this one:

body .single-product-page form.cart #wc-stripe-payment-request-button-separator {
    order: 3;
	text-align:center!important;
}

Best Regards

Hi Elise

Thank you very much this was really helpful it works now perfectly 🙂

Regards Ueli

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts