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!
Continue reading WooCommerce: Turn Checkout Field Into a Drop-down
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
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
Let’s imagine you want to add a custom checkout field (and not an additional billing or shipping field) on the WooCommerce Checkout page. For example, it might be a customer licence number – this has got nothing to do with billing and nothing to do with shipping.
Ideally, this custom field could show above the Checkout page order notes – right after the shipping form. It will feature a label, an input field, and will be required.
So, here’s how you do it – hope it helps you understand that anything is possible with WooCommerce!
Continue reading WooCommerce: How to Add a Custom Checkout Field
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
We’ve already seen how to disable fields on the checkout page by using a simple snippet.
Given my ultimate goal of trying to do as much as possible without installing heavy-weight plugins, today we’ll take a look at how to move fields around inside the billing & shipping sections.
Continue reading WooCommerce: Move / Reorder Checkout Fields (Email, Country, etc.)
This challenging task (yet very simple at the end…!) was requested by one of my WooCommerce Support clients. As they trade in USA only, they wanted to force “numbers only” in the ZIP input field, so that letters would not be allowed. Strange WooCommerce doesn’t do this out of the box! Continue reading WooCommerce: Change Input Type @ Checkout Fields
If you have country-specific shipping conditions, or you want to show a message conditionally after country selection on the checkout page, here’s a simple WooCommerce PHP snippet you can freely use. This can be slightly customized to target state selection instead.
I’ve also edited the initial code to make this work on load as well, so that the message would conditionally show even then. Enjoy!
Continue reading WooCommerce: Show Message Upon Country Selection @ CheckoutLet’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