Title: Styling Square Payment Input Fields
Last modified: January 21, 2021

---

# Styling Square Payment Input Fields

 *  Resolved [mcmayhem](https://wordpress.org/support/users/mcmayhem/)
 * (@mcmayhem)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/)
 * It seems that Square uses iframe elements to deliver the credit card input fields.
   I’m assuming this is for enhanced security which is great, but it leads to a 
   big issue in trying to style those fields.
 * Because the fields are delivered through iframe, I don’t have direct access to
   the style via CSS. This is a particular problem for me because the input fields
   have absurdly large font size making it get cut off on mobile devices.
 * To be clear, I’m not talking about anything **outside** the iframe elements such
   as the labels or the surrounding elements.
 * I’ve seen this question brought up in two other threads I could find. In both
   cases it seems like the person gave up and switched to another plugin, which 
   I would like to avoid.
    Topic 1: [Square credit card number field](https://wordpress.org/support/topic/square-credit-card-number-field/)
   Topic 2: [Issue customising the css for square payment form](https://wordpress.org/support/topic/issue-customising-the-css-for-square-payment-form/)
 * In the first topic, it is suggested to switch to the “Storefront” theme to see
   if that fixes it, but I don’t see how that could possibly fix the issue as the
   CSS for the iframe content is determined by the document within the iframe. If
   there is a way to do this via CSS, please let me know what selector to use and
   that will take care of it.
 * In the second topic, the response seemed more what I was expecting. The style
   cannot be changed by CSS alone because of the iframe document. Unfortunately,
   the response was vague about what WOULD fix the problem. It just says “It would
   require custom coding”.
 * Can anyone elaborate on that? Is there some kind of filter or action hook I can
   use to manipulate the font size of the payment input field values?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Support [Grigorij S. a11n](https://wordpress.org/support/users/grigaswp/)
 * (@grigaswp)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14029170)
 * Hi there,
 * Thank you for reaching out!
 * Indeed, the size of credit card fields cannot be controlled as easily as we’d
   like, unfortunately.
 * Those are rendered by Square and sent to the checkout page of your site, so regular
   CSS alone can’t be used to make it smaller. It’s possible to change that but 
   it will require diving into the PHP code and it will not be an easy change and
   you will need a developer.
 * I’ve opened an enhancement request with our developers so that they can add a
   way to adjust the size of these fields, however, it will likely take a while 
   before such functionality is implemented.
 *  Plugin Support [Grigorij S. a11n](https://wordpress.org/support/users/grigaswp/)
 * (@grigaswp)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14034298)
 * Hi there,
 * I was able to change the width and the height of the fields with some custom 
   CSS:
 * [https://d.pr/i/s5ikqD](https://d.pr/i/s5ikqD)
 * [https://d.pr/i/mdnmkG](https://d.pr/i/mdnmkG)
 * Although quite a few changes to CSS might be necessary in order to make the Square
   credit card fields look good with the smaller size and I can’t promise this will
   work well for you, but I hope this helps!
 *  Plugin Support [Grigorij S. a11n](https://wordpress.org/support/users/grigaswp/)
 * (@grigaswp)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14035009)
 * This CSS code can be used as a base for further adjustment:
 *     ```
       .wc-square-credit-card-hosted-field {
       	max-width: 50%;
       	font-size: x-small
       }
       ```
   
 * Further adjustments to the CSS code might be required in order to make the fields
   usable/good looking. Please note that the above code comes without a warranty.
 *  Thread Starter [mcmayhem](https://wordpress.org/support/users/mcmayhem/)
 * (@mcmayhem)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14037238)
 * Hey there and thank you for the replies and ideas, I appreciate you following
   up on this.
 * Regarding the rendering of the fields, I figured as much and I suppose arguments
   can be made in favor of that from a security perspective.
 * I do a significant amount of work in PHP and while I could make changes on the
   backend to the plugin directly, I’d prefer not to as it would mean keeping track
   of all the changes so that I could reinstate them once the plugin updates.
 * Thank you for putting in the enhancement request. It would be great to have the
   ability to style not just the size but the other elements of the field as well.
 * For my situation, I got by with some simple css to set the zoom on the field:
 *     ```
       .woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field
           {
               width: 115%;
               -ms-zoom: 0.85;
               -moz-transform: scale(0.85);
               -moz-transform-origin: 0 0;
               -o-transform: scale(0.85);
               -o-transform-origin: 0 0;
               -webkit-transform: scale(0.85);
               -webkit-transform-origin: 0 0;
           }
       ```
   
 * It’s a rather hacky way to go about it, but it suits my needs as it provides 
   plenty of room for the 16-digit card numbers without them being covered by the
   credit card icon.
 *  Plugin Support [Grigorij S. a11n](https://wordpress.org/support/users/grigaswp/)
 * (@grigaswp)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14047169)
 * Hi there,
 * Thank you for the additional details, I’ve added those to the enhancement request
   as well!
 * It’s hard to say how long will it take before such changes make it into a release
   of Square for WooCommerce extension but this should help other users attempting
   to style the Square credit card fields.
 * Have a lovely day!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Styling Square Payment Input Fields’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce-square/assets/icon-256x256.png?rev=3234354)
 * [WooCommerce Square](https://wordpress.org/plugins/woocommerce-square/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce-square/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce-square/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce-square/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce-square/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce-square/reviews/)

## Tags

 * [checkout fields](https://wordpress.org/support/topic-tag/checkout-fields/)

 * 5 replies
 * 2 participants
 * Last reply from: [Grigorij S. a11n](https://wordpress.org/support/users/grigaswp/)
 * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/styling-square-payment-input-fields/#post-14047169)
 * Status: resolved