• Resolved manhten

    (@manhten)


    Hi. I using plugin. I setup full live payment for Google Pay and Apple Pay.
    I using both Stripe and Paypal payment in product page.
    But Paypal button is full width, Google Pay and Apple Pay button limit width size.
    How i can change button size to equal with other payment button like Paypal.
    Full paypal button
    https://prnt.sc/txzk0q
    lager Paypal button
    https://prnt.sc/txzl5u
    ————————————————————————-
    It same on mobile:
    Apple Pay and Google Pay button not equal
    I can remove paypal button. But i need Apple Pay and Google Pay button equal.
    ————————————————————————
    On mobile, with product have attributes, when i choice attribute sometime it show ” Need select product option before update quantily.

    https://prnt.sc/txzq44

    • This topic was modified 4 years, 7 months ago by manhten.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    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,

    Thread Starter manhten

    (@manhten)

    @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.

    Plugin Author Payment Plugins

    (@mrclayton)

    @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,

    Thread Starter manhten

    (@manhten)

    @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,

    Plugin Author Payment Plugins

    (@mrclayton)

    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,

    Thread Starter manhten

    (@manhten)

    @mrclayton

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

    Plugin Author Payment Plugins

    (@mrclayton)

    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,

    Thread Starter manhten

    (@manhten)

    @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.

    Plugin Author Payment Plugins

    (@mrclayton)

    @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.

    Plugin Author Payment Plugins

    (@mrclayton)

    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,

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change button width size.’ is closed to new replies.