Customs CSS help needed to change text size with this plugin.

Hi @ryankanwal,

Thanks for reaching out to us about Braintree for WooCommerce! I’m happy to help out here. ??

While this sort of thing is generally inherited from your theme and, therefore, doesn’t fall under our support policy, I can take a quick look here and see if I can point you in the right direction.

So to be clear, you’d like for the text within the input fields to be the same size as the text outside of the input fields? To be sure I’m looking at the right text, could you please take a screenshot to point out which text should resemble which text?

Thank you!

Julie ??
SkyVerge

Hi Julie

Thanks for your quick reply.

Actually I think this is a bug in the plugin. I have been using this plugin for years now and always had the same issue, just always overlooked it.

I also tried the same plugin on different themes and always the text appears bigger here (within the Braintree credit card payment section) compared to the rest of the font-sizes that run throughout the rest of the default Woocommerce checkout form.

This really needs to be solved as it breaks the flow at arguably the most important stage of the e-com flow (when someone inputs their credit card details).

It doesn’t seem I can share screen shots here, so I have created a page on my site with the relevant screen shot.

Please see here…

https://kalsiayurveda.com/braintree-screenshot/

Alternatively, please add a few items to cart and see how the checkout page loads on your end.

Hope you can solve this…. look forward to your reply and thanks.

Hi @ryankanwal,

Benjamin here, stepping in!

I confirmed with one of our support engineers that the plugin does default to a font size of 1.3em in these fields. You should be able to adjust this using the following snippet:

https://gist.github.com/benjenjenj/b90af8f58272e07b2723f8c8bf3b667c#file-braintree-hosted-fields-font-size-php

If you attempt this, please be sure that you know how to add code to your website safely! We have a post on the SkyVerge blog with instructions on how to do this. Personally, I like the free Code Snippets plugin method. ??

Would you be willing to give the snippet a try and let me know if it solves the issue for you?

Cheers,
Benjamin

Hi Benjamin

Thanks so much for stepping in and offering this fix!

I actually ended up switching over to another plugin, because it gave me the ability to customise these fields without having to touch the code.

However, (for the sake of anyone else reading this) I just reinstalled the plugin and tried the code snippet you shared above and it worked a treat for me ??

SOLVED!

I pasted the snippet you shared above into my child theme functions.php file and it worked perfectly!

Thanks for sharing this and hope this thread can be useful to others.

Hey @ryankanwal,

Thanks so much for letting us know that the code snippet worked! Really appreciate it. ??

I’m going to go ahead and mark this thread as resolved now.

Thanks again for letting us know,

Julie ??
SkyVerge

Hi @benjaminskyverge and @julieskyverge !

I’m having the same issue as @ryankanwal and I would like to try the code snippet. Unfortunately, the link doesn’t seem to work anymore. Would you be kind to share it again?

Thanks,
Fernando

Hey @casalepress,

Apologies! I’m not sure what happened to the snippet, I’ve managed to duplicate the functionality, however, and am happy to share this with you.

As mentioned above, please make sure you understand how to add the snippets to your site (I personally like Code Snippets too!) and then you should be able to use: https://gist.github.com/199c785b5ef93c5091b7163aa9117a15#file-sv_braintree_credit_card_adjust_font_size_for_inputs-php

Could you give that a go and let me know if it does the trick?

Cheers!

Simon.

Hi Simon!

It worked like a charm.

Thanks for your quick reply, and sorry that I posted this as a separate thread, didn’t know if you guys looked inside solved threads.

Cheers,
Fernando