Button Sizes

  • Resolved cnnr1995

    (@cnnr1995)


    4 years, 1 month ago

    Hi I was wondering if I could get some help regarding the button sizes of the Apple Pay & Google Pay using the Stripe WooCommerce Plugin. The Google Pay box is slightly larger than the Apple Pay box and it would be great if I could make them the same size. If possible it would also be good to make them smaller as they are a bit big currently.

    https://snipboard.io/JZpbwf.jpg

    Any help much appreciated!

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

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

    (@mrclayton)

    Hi @cnnr1995,

    Thank you for contacting us. Those buttons are definitely bigger than the standard size generated by the plugin. Your theme is most likely overriding the height style that the Stripe plugin sets for the payment buttons.

    You can target those buttons via css using the following selector:

    .wc_stripe_product_payment_methods li div.payment-box button{
    max-height: 40px !important; /*set your max height here*/
}

    Kind Regards,

    Thread Starter cnnr1995

    (@cnnr1995)

    Hi, thanks for getting back to me. I added it the custom css area but it doesnt appear to change the buttons size. Any other suggestions?

    Thanks

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cnnr1995,

    Can you share your website so I can take a look? If I can see what css is overriding the Stripe plugin’s I can make a more targeted css selector for you.

    Kind Regards,

    Thread Starter cnnr1995

    (@cnnr1995)

    Sure thanks for getting back to me it is – https://bluesecret.co.uk/

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cnnr1995,

    I will take a look and get back to you on what CSS is conflicting. I think it has something to do with the padding.

    Kind Regards,

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cnnr1995,

    Here is the css that you can add that will make the button normal size:

    .wc_stripe_product_payment_methods * {
    box-sizing: border-box;
}

    Your theme had the box-sizing set to inherit which was throwing off the button’s padding.

    Kind Regards,

    Thread Starter cnnr1995

    (@cnnr1995)

    Thats brilliant thank you so much it is now working.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Button Sizes’ is closed to new replies.