Checkout Fields Archives - Business Bloomer

WooCommerce: Upload File @ Checkout Page

No matter what you try, but simply adding an HTML input type=”file” won’t work on the WooCommerce Checkout page. I believe this is a security measure and as such, we need to find a workaround.

The only possible solution is to upload the file BEFORE the checkout is submitted, so that upon “Place Order”, the file is already available in the Media section and can be attached to the order as a simple string (URL).

Such upload can happen via Ajax, so that the customer won’t notice anything on the Checkout page – they are actually uploading a file to your website without even noticing it (yes, you need to apply some security measures, of course).

Here’s how it’s done – enjoy!

WooCommerce: Add a New Country For Billing/Shipping

There are times when the WooCommerce countries database is simply not enough. While the WooCommerce team is usually very fast at updating its code (though, the newest country is apparently South Sudan, which became independent in 2011, the year WooCommerce launched!), you may need to DIY in certain cases.

Think of Northern Ireland for example. It’s not a “country”, however most Irish businesses would ship to Northern Ireland and not to “UK”, so having “Northern Ireland” in the Checkout page country dropdowns may help.

In this edge case study, we’ll basically take a look at how to add a custom country, how to make sure this custom country shows at checkout as a possible option (and in the shipping zones admin section), and also how to assign to it a custom list of states. You never know!

WooCommerce: Populate Checkout Fields From URL

On top of adding products to cart via URL and redirect to checkout, there is a way to also fill out the Checkout page input fields within the same link.

This could be super handy when you know the billing/shipping details of a registered or guest customer and want to speed up the order process.

It’s important to note that the URL will need to contain personal data e.g. email address, billing address, phone number, and so on; you need to make sure the URL is only shared with the specific customer (in an email, for example, as content is tailored to the subscriber; or only when the WooCommerce customer is logged in if you’re using the URL behind a website button).

Once that’s clear, let’s go ahead, and let’s see how my WooCommerce snippet works. Enjoy!

WooCommerce: 10 Most Popular Free Plugins

WooCommerce is one of the most popular eCommerce platforms that allows you to launch your online business, build high-functionality online stores for your clients, or take your brick-and-mortar store online.

Powering over 28.19% of all online stores, WooCommerce’s versatility and open-source nature allow businesses to build their dream store, add unlimited products and consumers, take orders, and increase sales.

The core WooCommerce plugin holds 68% of the usage distribution – the highest on the internet. However, despite its popularity, the official WooCommerce plugin lacks several features you might need for your eCommerce store. But to make up for that, it offers several plugins that allow you to enhance your store’s functionality and improve customer experience.

But choosing from over 4228 WooCommerce plugins from WordPress.org can get overwhelming. So, to make your job easier, we’ve hand-picked the best free WooCommerce plugins you can use on your store to take it to the next level. Let’s dive in!

WooCommerce: Retain Field Values @ Checkout Reload

Go to WooCommerce Checkout as a logged out user. Fill out billing name, surname, address, email and phone. Change your mind and go back to Cart. Return to Checkout. Billing name, surname, email and phone (basically everything but the address) are gone!

But hey, this annoying WooCommerce flaw is about to go away with a few lines of code. Either reload the Checkout page or go back to it later – your info will still be there (as long as you haven’t cleared your cache/cookies and the WooCommerce session hasn’t expired of course).

Enhoy!

WooCommerce: Phone Input Mask @ Checkout

The WooCommerce checkout page has a default phone input field that gets validated upon checkout (for HTML geeks, it’s actually an input type = “tel”). Usually, if such phone number contains letters, it will fail and checkout will stop.

But that’s not the problem. Let’s suppose you only have US customers, or that you want to force customer to enter a certain format (e.g. “+” or “01” as prefix)… well, there is no way to achieve that out of the box within the WooCommerce settings.

However, anything is possible in regard to customization, so all we need are 3 small changes: force the billing phone input to stay within a “maxlength“, set the phone input placeholder so that users know what the format should be before typing in, and finally add some JavaScript to provide an input “mask”, so that the final output is exactly what we want (123-456-7890 in this case scenario, but it could be anything).

Enjoy!

WooCommerce: Top Checkout Field Editor Plugins

If you haven’t thought about checkout page customization before, perhaps it’s time to start doing so.

There’s no question that it’s a hot topic in the WooCommerce community since, admittedly, the default checkout page leaves a lot to be desired.

You don’t want to be behind the curve. Here at Business Bloomer, Rodolfo has put out 90+ different checkout page snippets that have been eagerly lapped up by the WooCommerce developer and merchant community. Seriously, these are some of our most widely read and engaged posts.

But in addition to snippets, it’s worth checking out some checkout field editor plugins. Sometimes, instead of a specific tool with a narrow focus, you need a Swiss army knife. Think of snippets as the tools, and checkout field editors as the Swiss army knife.

WooCommerce: Move Labels Inside Checkout Fields

Although UX and accessibility experts won’t like this customization, it’s still important to know “what’s possible” with WooCommerce.

In regard to the checkout form (billing + shipping + notes), there is a useful “woocommerce_checkout_fields” hook (filter) that is widely used by developers like me to alter the behavior of input fields.

In today’s episode we will take a look, indeed, at how to remove the checkout field labels from their default position (above fields), and use them as placeholders instead, so that we save up some vertical space.

Enjoy!

WooCommerce: Move Email Field to Top @ Checkout

This tutorial is a spin-off of a previous article (WooCommerce: Move / Reorder Checkout Fields) as I feel there is a huge boost of requests for this task alone.

Moving the billing email field to the top of the WooCommerce checkout gives you many benefits: because it’s the first field customers need to fill out, you can capture their email address (upon marketing permission) and send them cart reminders, feedback requests and similar if they do not complete the checkout.

Also, having the email first can make you save time in case the user is already registered, and you could save them time while checking this against the list of customers, so a prompt can be displayed to load all their billing/shipping details for example.

Either way, it’s super easy to move the email field to the top. Enjoy!

WooCommerce: Maxlength and Minlength for Checkout Fields

If you’re familiar with HTML, you can add “maxlength” and “minlength” attributes to an input field in order to force its value to be min X and max Y characters long. This is all good and easy, so we might as well see what happens on the WooCommerce Checkout page once we apply such attributes to a given custom field.

Spoiler alert: maxlength works, while minlength does not. Hence, forcing a given checkout field to have a minimum length is actually quite impossible, unless we validate the posted data (a field input value that is not long enough) once the checkout is submitted. That’s a bummer, and in this article I will also explain how to contact WooCommerce so they can improve a functionality / fix a bug.

Enjoy!

WooCommerce: Dynamically Hide / Show Checkout Field

We already saw a lot of examples e.g. hiding checkout fields if a product is virtual or hiding checkout fields if a checkbox is manually checked… but this time I want to hide a field dynamically – automatically – based on whether another checkout field is empty or has a specific value.

In this example, I will demonstrate how to hide the “billing phone” if “billing company” is empty or no information is entered. Of course, you also have to disable the mandatory attribute for the billing phone from the Customizer settings, otherwise checkout validation will fail. You can readapt this snippet to any other checkout field combo – just identify the input IDs and change jQuery accordingly. Enjoy!

WooCommerce: Move Order Notes @ Checkout

We already saw how to hide Order Notes on the WooCommerce checkout page. This time around, however, our goal is to “move” them – and specifically remove them from their default position (under the shipping form) and add them back under the billing form.

As you can imagine, this is a combo snippet: (1) we remove them (and we’ll use the snippet as per the link above) and (2) we create a new billing field. Finally, (3) we also need to “save” this new field value into the original order notes custom field meta.

If this is difficult to understand don’t worry – just copy/paste the snippet into your functions.php and see magic happen. Enjoy!

WooCommerce: Rename “State” Label @ Checkout

Here’s a super quick snippet you can use to rename the WooCommerce checkout “state” field label for both billing & shipping.

Of course you can learn by example and apply the same snippet to other checkout fields, all yopu need to change is the field ID. Enjoy!

WooCommerce: Add Shipping Phone @ Checkout

I’m surprised WooCommerce doesn’t offer this field out of the box. Most ecommerce websites actually require a shipping phone to organize delivery and communicate with the end customer in case there are problems.

Thankfully, there is a hook (filter) for that. It’s called “woocommerce_checkout_fields” and can be used to remove, move or add checkout fields quickly. And here’s how to add, for example, a new shipping field called “shipping_phone”. Enjoy!

WooCommerce: Set Checkout Field Value @ Order Creation

This is a very specific function. Sometimes, you need to “set” a checkout field value upon order creation (because it was not required and left empty for example). In some other cases, you might want to override what the customer input if you have certain requirements.

Either way, overriding the checkout fields on order creation is super easy. Here’s how it’s done – enjoy!

WooCommerce: Display Required Field Errors “Inline” @ Checkout

If you’re familiar with the upcoming Gutenberg editor, you’ll know there have been a million doubts in regard to accessibility. So, accessibility matters – and WooCommerce has a few issues as well.

One interesting accessibility fix is the error notification system on the checkout page. Yes, the missing fields error show on top of the page when trying to place an order, but once you scroll down to fill them out again you might need a reminder of which field is missing without having to scroll back up to check the error.

This is quite difficult to explain, so take a look at the screenshot. The suggestion here is to also add “inline” error notifications (“XYZ is a required field“) right above each field, so that the user knows exactly what to do. So, let’s see how it’s done.

WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

If you sell downloadable/virtual products and need to simplify your WooCommerce checkout when such product type is in the Cart, you’ve come to the right place!

Here’s a simple snippet to check if there are only “virtual” products in the Cart and if yes, all the billing fields and order notes are hidden (but name and email address). Go test this on your development environment and let me know if this works!

WooCommerce: Turn Checkout Field Into a Drop-down

Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. Shopping cart abandonment is a huge issue – think about hidden charges, lack of payment methods, checkout bugs and, also, too many checkout fields to fill out manually.

Today, we will see how to turn a checkout text field into a select dropdown. Why not let customers pick from a list instead of typing in? Enjoy!

WooCommerce: Add “Confirm Email Address” Field @ Checkout

A correct email address is worth a thousand dollars, some ecommerce expert would say 🙂 So, you don’t want your WooCommerce checkout visitors to mess up with that, do you?

What about adding an “Email Verification” field? In this way, we can make sure they double check their entry – and also show an error message in case they don’t match!

Let’s see how I implemented this for a freelancing client of mine – I’m sure you will be grateful!

WooCommerce Checkout Fields Customization Guide

Checkout page plays a huge role in your eCommerce success. It is one of the most important part of your conversion funnel. This is the page that brings revenue.

It doesn’t matter how many people are visiting your website if no one makes any purchase. Complicated checkout process is one of the main reason of high shopping cart abandonment.

You should always look for ways to make your checkout process as simple as possible. If you are using WooCommerce as your eCommerce solution you can easily change the checkout page design, remove or change the existing checkout fields order.

Join 75,000+ Monthly Readers & 16,500+ Subscribers.

Become a Business Bloomer Supporter.