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!

Continue reading WooCommerce: Phone Input Mask @ Checkout

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!

Continue reading WooCommerce: Move Labels Inside Checkout Fields

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!

Continue reading WooCommerce: Maxlength and Minlength for Checkout Fields

WooCommerce: How to Customize Checkout For Conversions

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

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!

Continue reading WooCommerce: Move Order Notes @ Checkout

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!

Continue reading WooCommerce: Add Shipping Phone @ Checkout

WooCommerce: Hide Checkout Billing 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! Continue reading WooCommerce: Hide Checkout Billing Fields if Virtual Product @ Cart

WooCommerce: Change Autofocus Field @ Checkout

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

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!

Continue reading WooCommerce: Add “Confirm Email Address” Field @ Checkout

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.

Continue reading WooCommerce Checkout Fields Customization Guide

WooCommerce: Checkbox to Hide/Show Custom Checkout Field

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: Only Ship to Predefined “Local Pickup” Addresses

Woo 2.6 introduced Shipping Zones – and with that we can play with simple PHP (and JQuery) to accomplish lots of “advanced” shipping rules, such as local pickup.

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: Only Ship to Predefined “Local Pickup” Addresses

WooCommerce: Set Default Billing City (or other fields) @ Checkout

We’ve already seen how to set the default values for certain dropdowns (country and state default: https://businessbloomer.com/woocommerce-set-default-state-checkout-page/). 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

WooCommerce: Add House Number Field @ 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

WooCommerce: Disable Postcode/ZIP Validation @ 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