No transaction history on Square Dashboard after completed order on Woocommerce

Hey @sunrootsoftit,

When you go to WooCommerce > Orders and click on the order, do you see a Square transaction ID near the top? What happens if you click on this link?

Thanks

Hello,

For a completed order, I don’t see any Square transaction ID there on the top.
Check this screenshot, url:- https://postimg.cc/zVR2v99L

and https://postimg.cc/GH0J7952

Just tested again after updating the plugin to the new latest version but the same thing.

Thanks.

Hello,

I debug and got the issue and solved it but another question is:- Can I change the design of the credit card form in this plugin?

I mean I want to change the generic credit card input fields design to my own. Possible? Any lead?

Thanks.

You can but you’ll need to create custom css rules in a child theme to override or add to the css rules that wordpress and the square plugin use to render the form/fields. There’s no way to do it from the admin interface.

Hey @sunrootsoftit,

There’s not a lot that you can do to change the appearance of the Square credit card fields. They are loaded via an iFrame so you can’t change much beyond their size with CSS.

Square does have some styling options that can be applied but it will require editing the JavaScript in the Square extension. You can learn a bit more about how that works here:

https://developer.squareup.com/docs/web-payments/customize-styles

To the best of my knowledge, there’s no way to apply this short of editing the Square plugin directly.

When I inspect on this site I work on, the form is not in an iFrame: https://ibb.co/Rcf8mj7

You can see there are styles being applied to the CC# field from a style-sheet, wc-square.scss that is loaded from the local server, not remotely from an external server.

You can also see in the screenshot that the form is using my sites own custom font. That wouldn’t be possible if the form was being loaded from an iframe.

So I am confused why you are saying the woocommerce square plugin’s form is loaded from an iframe. Are you talking about a different form?

That’s inside an iFrame. Many payment gateway credit card fields are iFrames so that the actual credit card information doesn’t go through the local server. For security they want that information going directly to them.

That must be a different form, when I search for iFrame in my source, there is no iFrame tag AT ALL anywhere on the page. Feel free to look yourself: https://longhairrecords.com … I have styled the form using CSS, sooo… ::shrugs::

• This reply was modified 2 years, 6 months ago by Richard Bakos.

Let’s make sure we’re talking about the same parts here. I’m specifically referring to the credit card inputs. When I checked on the site linked above, the fields aren’t actually loading. I couldn’t enter a credit card number into them.

The items outside of these can be modified via CSS in the theme. The appearance of the credit card field changed in 3.0 of the plugin but even before that, the actual inputs are loaded via iFrames.

Oh, I see, I wasn’t signed in, so the fields weren’t loading. When I sign into the site, the fields are fillable and indeed the input fields themselves are in an iframe as you stated.

This has helped me discover something odd though… noone should have to sign in to place an order because I have guest checkout enabled under “Accounts & Privacy”. I have no idea why these fields can’t be filled out by a guest now. This must be recent because the last order placed via credit card was just a few days ago and it was a guest, they have no account.

Hello,

Yes, I also checked there about the form, actually to tweak the form design is there still need to have access to the HTML codes, not only CSS. but I was checking some examples and I saw, that is a custom-made design using a framework. I was wondering if it could be possible to do that similar using this plugin with custom code or not. Any idea?

Example Form:- https://postimg.cc/tZtbjJ2Q

Thanks.

Hey @sunrootsoftit,

That may be possible but it would likely take quite a bit of modifying. If you don’t want to tackle that on your own, there are freelance developers at Codeable who would be happy to help you out. It’ll be a pretty good bit of work.

@resonancedesigns,

Whenever a feature works logged in but not logged out, it’s almost always a result of caching. Many caching plugins/server systems are automatically disabled when a user logs in. That would explain why the fields load for you logged in but not logged out.

Try clearing out any caching and then temporarily disable it to see if that works. If it does, then make sure to exclude the cart, checkout, and account pages from the cache so they work as expected.

Okay. I will check about that.

Thank you.