Change button width size.

Hi @manhten,

On mobile, with product have attributes, when i choice attribute sometime it show ” Need select product option before update quantily. You must have a product attribute selected before you update the quantity value. Are you saying you already have an attribute selected and update quantity and you see that message?

In my opinion, the way the Stripe plugin sizes buttons is better for UX. The screenshot you provided shows a PayPal button that is spanning the entire link of your page where as the Stripe plugin aligns the button width with the width of your Add to Cart button.

I wouldn’t recommend you make the buttons span the entire width but if you insist on doing that here is the CSS:

.wc-stripe-product-checkout-container ul.wc_stripe_product_payment_methods li[class*=payment_method_stripe_]{
    max-width: 350px;
}

Kind Regards,

@mrclayton Thanks for fast reply.
I try add css but look like nothing change ( I clear cache.. ).
Yes, I agree that plugin sizes button is better for UX. I consider change paypal button size or remove it.
But on mobile, Apple and Google Pay button not equal.
https://prnt.sc/txznr0 How to make them equal.
…
For product select. I just only open new product, choice attribute. Not update or change quantity.

@manhten,

My bad I forgot to add the !important identifier to the css:

.wc-stripe-product-checkout-container ul.wc_stripe_product_payment_methods li[class*=payment_method_stripe_]{
    max-width: 350px !important;
}

I’ll have to look at your theme’s css. It’s overriding the width of the Apple Pay button I believe.

Kind Regards,

@mrclayton It working correct.
Yes. I believe that is problem on my theme. Because i checked your demo site.
All button show beautiful.
I hope you can give me advice.

Kind Regards,

Try this:

.wc_stripe_product_payment_methods li.payment_method_stripe_applepay .apple-pay-button{
   width: 100%;
}

That should make the button expand to the width of its container.

Kind Regards,

@mrclayton

Nothing change friend.
I try add !important too. Nothing change. ??

Interesting. Try this if you are able:

1. Disable your current theme and enable something like the 2020 theme and test.
2. Verify that the button’s width is correct then.
3. If the button is looking good then we know it’s your theme.
4. Within your theme, look for some css that is targeting buttons generically. Many themes apply some base style to elements which can cause conflicts.

Kind Regards,

@mrclayton
Yes. I did as you say.
2020 theme working correct. Apple pay and Google Pay button show correct. They equal and look good.
–> That is my theme. I’m using WoodMart theme.
I’m end user, not dev so i will contact theme author to ask them about css for button on product page, and ask about this effect.

However, I would also be pleased to hear from you.

Kind Regards.

@manhten

Can you send me a zip file of your theme so I can test? If you look on all the settings pages for the stripe plug-in you will see a purple help button, if you click it you will be able to email me directly and also provide attachments.

Or send me a link to a file share via that help button.

Hi @manhten,

I looked through the code of your theme and I found why the Apple Pay button is not expanding. Your theme directly references the webkit-appearance: -apple-pay-button and it’s overriding the plugin’s css.

On line 20790 of file style-rtl.css of your theme there is the following css:

body.single-product div.product form.cart .apple-pay-button {
    margin-left: 10px;
    max-width: 20%; }

The max-width is what’s causing the conflict. In the next version of the plugin I am adding some additional css but all you have to do is remove that max-width: 20% from your theme.

Or add the following css to your site:

body.single-product div.product form.cart .wc_stripe_product_payment_methods .apple-pay-button{
        max-width: 100%;
    }

Kind Regards,

• This reply was modified 4 years, 6 months ago by Payment Plugins.