By default, WooCommerce adds the “autocomplete” attribute to almost all checkout fields. For example, “billing_phone” has “autocomplete=tel”, “billing_country” has “autocomplete=country” and so on.
When logged out or if the logged in user has never done a purchase before, the WooCommerce Checkout page fields are possibly autofilled by the browser based on saved data / addresses.
Today, we’ll take a look at how to disable this autofill behavior, so that the customer is forced to enter data inside an empty input, and maybe in this way you can apply your custom validation or pattern, such as a specific phone number format. Enjoy!
Continue reading WooCommerce: Disable Checkout Field Autocomplete
You may be aware that the WooCommerce Checkout page “order review” section reloads/refreshes every time there is a change of address – in this way shipping, taxes and optional fees are properly recalculated and customers are returned with the correct total.
But in case you add custom checkout fields that may cause a difference in pricing, or you want to keep the checkout UX consistent, or you have some other kinds of logic, it may be useful to refresh the order review section after a change on any checkout field. Enjoy!
Continue reading WooCommerce: Refresh Checkout Upon Any Input Field Change
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!
Continue reading WooCommerce: Populate Checkout Fields From URL
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.
Continue reading WooCommerce: Phone Input Mask @ Checkout
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.
Continue reading WooCommerce: Move Labels Inside 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.
Continue reading WooCommerce: Maxlength and Minlength for Checkout Fields
I had the honor to speak at WCEU 2020 thanks to WooCommerce, who hosted me in their Sponsor track. It was a short and sweet lightning talk on the first day (Friday), called “Customizing The WooCommerce Checkout To Improve Conversions“, followed by a live coding session on Saturday.
Here’s the video recording of the lightning talk, as well as a few PHP and CSS snippets you can copy/paste to improve your WooCommerce Checkout and immediately expect an increase in conversion rate. So, enjoy the video and then go test the snippets you find below!
Continue reading WooCommerce: How to Customize Checkout For Conversions
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!
Continue reading WooCommerce: Move Order Notes @ 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!
Continue reading WooCommerce: Add Shipping Phone @ Checkout
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!
Continue reading WooCommerce: Hide Checkout Fields if Virtual Product @ Cart
If you decide to delete or reorder checkout fields, you probably also need to change the checkout field with “autofocus”. In plain English, this is the checkout field where the keyboard cursor goes automatically to on checkout page load (by default, this is the Billing First Name).
As usual, changing this default behavior is very easy, even if you’re not familiar with PHP. In the example below, I’m removing the autofocus from Billing First Name and assigning it to the Billing Email field instead.
Copy the snippet, test it on your development environment and only then push it to your live website. Enjoy! Continue reading WooCommerce: Change Autofocus 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!
Continue reading WooCommerce: Add “Confirm Email Address” Field @ Checkout
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.
Continue reading WooCommerce Checkout Fields Customization Guide
This snippet could come really handy for several reasons. When you’ll need to do advanced customization of the checkout and its fields, hopefully you’ll thank me then 🙂
In today’s snippet, we will add a new checkbox and another new “hidden” field – then, if the checkbox is ticked, the field will show, otherwise it will disappear again.
Continue reading WooCommerce: Checkbox to Hide/Show Custom Checkout Field
WooCommerce Shipping Zones are quite easy to override / customize. With a simple PHP (and jQuery, sometimes) snippet we can accomplish many advanced shipping rules, such as the one we’ll study today.
This time, I’ve tested a snippet to add a dropdown to the billing section where users go choose the pickup destination. As a result, the shipping address is automatically populated, and so is the shipping method. What do you think?
Continue reading WooCommerce: Ship to Predefined “Local Pickup” Addresses
We’ve already seen how to set the default values for certain dropdowns (billing country and state, precisely). But what can we do when we want to define the defaults for the other “text” inputs, such as the billing_city?
Continue reading WooCommerce: Set Default Billing City (or other fields) @ Checkout
A North European client told me they’re really strict about billing and shipping addresses over there. Couriers usually require a separate “House Number” in order to dispatch packages within those countries.
This must be therefore placed on the checkout, BESIDE the “Address_1” field and made required. Also, it’s a good idea to make this show in the Admin Order, thank you page and notification Emails.
Continue reading WooCommerce: Add House Number Field @ Checkout
An annoying thing for sellers based in Ireland (for example), is that we still don’t use post codes (they recently introduced them, but nobody’s using them). So, in today’s task, I want to show you how to disable the “REQUIRED” feature of the postcode on the checkout page.
We already saw how to completely remove the PostCode/ZIP field… but this time we wish to leave it on the checkout, and just avoid a validation error if we don’t enter anything. Continue reading WooCommerce: Disable Postcode/ZIP Validation @ Checkout
Let’s say you require to make the “address” field at checkout bigger. Instead of an “input type = text”, we’d require an “input type = textarea” in HTML. This was my WooCommerce client’s challenge: how can I edit a checkout field input type programmatically? Here’s the snippet! Continue reading WooCommerce: Change Input Field to Textarea @ Checkout
In some countries there is no Postcode/ZIP (such as Ireland!). How do we make the Postcode/ZIP field not required, or how do we completely remove it? The answer is very simple. Continue reading WooCommerce: Disable PostCode/Zip Field on the Checkout Page