Oversized payment field in checkout

Hi there,

Thank you for reaching out!

I understand that you’d like to reduce the size of credit card fields on the checkout page with Square for WooCommerce.

You’re more than welcome to add a request for size adjustment options to our ideas board, however, most likely, our developers will leave the exact look for the themes to control.

E.G. in this support request users are complaining about the fields being too small on mobile and asking for the field size to be larger:

https://www.ads-software.com/support/topic/square-credit-card-number-field/

The sample CSS in that thread can be used as an example when crafting your own CSS for desktop and mobile:

https://en.support.wordpress.com/custom-design/editing-css/

It might require quite a bit of work though since you’d have to make sure your CSS code works with various screen sizes and devices.

I hope this helps!

Hi there,

Just a quick follow-up since it sounds like the credit card fields cannot be controlled as easily as it first looked like.

Those are rendered by Square and sent to the checkout page, 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 code.

I’ve opened an enhancement request with our developers so that there is a way to adjust field sizes, however, it will likely take a while before such functionality is implemented.

The support team of your theme might still be able to provide some CSS in case parts of these fields are being rendered outside the frame/screen.

hi @grigaswp

thanks for your reply.

I’m curious about the complaints that these fields are too small on mobile phones as on my iphone they fill up almost the entire screen –

Square on mobile phone

I don’t think you can call it “too small” by any stretch of imagination!

And on my computer they fill out more than 1/3 of the screen.

Square on computer

In this case, I will reach out to both Square and to my theme developer.

thanks

Hi @grigaswp

I had a look at the screenshot of the post by the user talking about the payment field being too small.

The field is still the same HUGE size – however it renders differently for some reason. This could be linked to the responsiveness of their theme.

I have reached out to my theme developer who upon investigation has confirmed that the issue is with the padding added by the WC Square plugin which can only be solved by the developers in the next update.

so – we are all looking forward to an update which allows adjusting the size of the payment field.

thanks

Hi @magicpowers

I have reached out to my theme developer who upon investigation has confirmed that the issue is with the padding added by the WC Square plugin which can only be solved by the developers in the next update.

so – we are all looking forward to an update which allows adjusting the size of the payment field.

Can you please specify what exactly did your theme developer say about the padding? I’ll forward this to our developers.

At this time, we still do not have any ETA.

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

Hi @grigaswp

He didn’t login to my admin panel but simply inspected my site in a way anyone can, including your developers.

this is what he said:

The sizing of the fields is due to a mixture of the Square plugin CSS and the Square form CSS itself (the latter is much more noticeable). The former the plugin developers will be able to help you with and the latter Square should be able to help you with.

re your screenshots – that’s much better!

could you provide this custom CSS so that I can copy it please?

Also – speaking about the next plugin update – could you please include at the top the Square logo?

thanks!

Hi there,

> The sizing of the fields is due to a mixture of the Square plugin CSS and the Square form CSS itself (the latter is much more noticeable). The former the plugin developers will be able to help you with and the latter Square should be able to help you with.

That helps! Indeed, it makes sense checking if the form size can be adjusted from your Square account, although I’m quite sure that won’t be an option.

> re your screenshots – that’s much better!

> could you provide this custom CSS so that I can copy it please?

Something like this should work:

.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. Please note that the above code comes without a warranty.

Also – speaking about the next plugin update – could you please include at the top the Square logo?

Can you please add this request to our ideas board?

https://ideas.woocommerce.com/forums/133476-woocommerce?category_id=175794

Thank you!

thanks for the code – however if you haven’t tested it in the actual Woocommerce checkout, I can’t use it.

My staging site is not showing your plugin in the checkout, so I can’t test it there.

I’m curious – since I have made this suggestion to you, the Plugin Support – why can’t you add it to your Ideas Board or pass it directly to your developers, just as you did with the adjustment to the payment field size?…. why do you ask me to do it myself?…

My theme developer gave me another css code to bring into line the card logos which were sticking outside the iframe.

.woocommerce #payment div.payment_method_square_credit_card iframe.wc-square-credit-card-hosted-field-card-number {
	padding: 0;
}

please note that it may not work on every theme (I have Vantage Premium).

Hi @magicpowers ,

CSS can indeed vary depending on the theme, glad to know your theme developer help you out with the CSS as well. I’ll set the thread to resolved now, however, feel free to open a new thread if you need any more help.

@wpnomad @grigaswp

I have reopened this thread to let you know that the custom CSS didn’t work on my site.

Your screenshots show exactly what I’m looking for, but I guess you have created this display with a code rather than custom css, which is something I can’t do.

would you have another idea? if not, we can close this ticket .
thanks

Hi there,

I’m curious – since I have made this suggestion to you, the Plugin Support – why can’t you add it to your Ideas Board or pass it directly to your developers, just as you did with the adjustment to the payment field size?…. why do you ask me to do it myself?…

We only open enhancement requests on GitHub in rare cases and Square for WooCommerce plugin’s GitHub repository is private, this is why I’ve opened an enhancement request myself.

We don’t open requests on the ideas board for our customers though.

Your screenshots show exactly what I’m looking for, but I guess you have created this display with a code rather than custom css, which is something I can’t do.

I’ve used CSS code on my site to adjust the size of these fields and this code worked on the site of another user, however, if it doesn’t work on yours – it might be due to your theme and the code might have to be adjusted.

If you’re having a hard time with this and/or you’d like to find a different way to achieve this – you may want to consider hiring a developer.

@grigaswp

I have posted my suggestions on your Ideas Board.

I simply wanted to let you know that the code you gave me (yes, without a warranty) didn’t work on my site – for your information. It’s not a criticism!

It’s nothing critical impeding the functionality of the plugin – it’s purely esthetics and as such it doesn’t warrant hiring a developer. If I can find a solution on this forum or online – great. If not – no problem.

thanks for your help.