Checkout Fields Archives - Business Bloomer

WooCommerce: Add Optional Checkout Email CC: Field

marker, checkbox, red, checkbox, checkbox, checkbox, checkbox, checkbox

In a recent Business Bloomer Club Slack thread, a member asked how to let customers optionally enter a second email address at checkout—specifically if they want WooCommerce emails sent to someone else too.

Their goal was to display a checkbox labeled “Send to another email address,” and, if checked, reveal an additional email field. Any email entered here should be CCed on all WooCommerce order emails.

This is a common request for B2B stores or for people who manage orders on behalf of others, such as virtual assistants, procurement officers, or accounting teams. The good news? This can be achieved without installing yet another plugin.

In this post, we’ll show you how to add a custom checkbox and email field at checkout, use JavaScript to conditionally show the field, save the additional email in the order meta and CC that email on all WooCommerce transactional emails.

Let’s get it done with a few clean snippets.

Does WooCommerce Match the Browser Language?

letter tiles, word, 4k wallpaper 1920x1080, letters, scrabble, laptop wallpaper, english test, linguistic proficiency, language assessment, english language test, aptitude test, toefl, cambridge english, wallpaper hd, free wallpaper, full hd wallpaper, mac wallpaper, wallpaper 4k, english language skills, desktop backgrounds, free background, beautiful wallpaper, cool backgrounds, language competency test, 4k wallpaper, windows wallpaper, english proficiency test, hd wallpaper, background

In a recent Business Bloomer Club Slack thread, we discussed what happens when a user visits a WordPress website using a browser set to a different language than the one defined in the settings.

The conversation started from a simple question: if a site isn’t multilingual, can it still adapt to the visitor’s language settings in some way?

It’s an important topic for WooCommerce store owners who want to offer a more personalized shopping experience to international users without relying on multilingual plugins. In some cases, you might want to display content in another language, show different notices, or adjust field labels depending on the user’s browser language — without going full WPML or Polylang.

Let’s explore what WordPress and WooCommerce do by default, what you can expect, and how you can build conditional content for international visitors based on browser settings alone.

WooCommerce: Moving and Editing Fields on the Checkout Page

The WooCommerce checkout page is a critical area of customization for many store owners. Adjusting the placement of fields and fine-tuning their text can significantly enhance user experience and usability.

A recent inquiry in the Business Bloomer Club discussed moving a checkbox with an associated action and editing field text due to incomplete translations.

This article dives into practical steps to manage such customizations effectively, even when custom plugins add complexity. Let’s explore how you can modify your WooCommerce checkout layout and text without resorting to overkill solutions or excessive expenses.

WooCommerce: Simplify Free Checkout

If your WooCommerce store occasionally offers free products—whether as part of a promotion, a free trial, or a lead magnet—you may have noticed that the default checkout still displays all billing (and shipping) fields. This creates unnecessary friction for customers who don’t need to enter full address or payment information just to get something for free.

Thankfully, there’s a simple way to customize this behavior and show only the checkout fields you truly need. With a few lines of code, you can conditionally reduce the checkout form when there’s no payment required. This improves the user experience, boosts conversions, and keeps things clean and relevant.

I actually use this exact snippet on Business Bloomer whenever someone “purchases” one of my free WooCommerce mini plugins—just a name and email, no extra hassle.

In this example, we’ll indeed keep just the billing email and billing first name fields when the cart total is zero. You can easily tweak the snippet to include any other fields depending on your needs.

Here’s how to make it happen.

Running Custom Server-Side Code on Checkout Field Blur in WooCommerce

A recent query in the Business Bloomer Club asked for advice on executing custom server-side code when a user enters their email address during checkout in WooCommerce, specifically after the field loses focus (similar to how the cart updates for coupons and shipping).

This setup can be useful for verifying user input dynamically without a full page refresh.

Here’s a guide on how to achieve this functionality using AJAX and JavaScript.

How to Prevent Customers from Changing Billing and Shipping Details on WooCommerce Checkout

In a recent Business Bloomer Club Slack thread, a WooCommerce store owner managing a wholesale platform wanted to prevent customers from editing their billing and shipping details on the checkout page.

This restriction was necessary to maintain data consistency with their Fishbowl Inventory system, as mismatches could lead to order processing errors.

Here’s a guide on setting specific checkout fields as read-only or fully disabling them to prevent customer edits.

WooCommerce: Read-only Checkout Fields

Especially for B2B sites, it’s likely that customers are managed by the store admin and are not allowed to change their billing/shipping address unless they request to update it.

But even if you’re simply curious, there is a way to turn each checkout field into read-only inputs. In this way, the saved billing and shipping address will load, and the logged in customer won’t be able to change any data before checkout.

A little note: country and state are dropdowns, and this means adding the “readonly” attribute won’t stop you from changing the selected value. However, if we turn all fields to input type “text”, this problem will go away. And this is why you find two statements in the snippet below; first we turn the field into a text input, and then we make it read-only.

Enjoy!

WooCommerce: Remove “(optional)” From Checkout Field Labels

If a WooCommerce checkout field is set to “not required“, its label will get the “(optional)” suffix. Considering the required fields get the red “*” suffix, you may want to get completely rid of the (optional) string.

Sure, you could be using CSS to hide it… but as usual this is not ideal. With CSS display:none, the string loads and then you hide it; with PHP you avoid the loading in the first place.

So, let’s see how this is done – this snippet is also running on this same website so it should definitely work!

WooCommerce: Super Simple EU Vat Number Validation (VIES)

As an EU merchant dealing with VAT customers, I often find myself doing manual checks on the VIES VAT number validation website. Thankfully most of my customers are outside the EU so I don’t use the tool often, but still, for a developer this is just a waste of time!

By studying the available options on various online forums, I found a super simple workaround that doesn’t even require signing up for an API.

In fact, you can simply visit an URL and get the response straight away – which means we can access the same URL via PHP, get the response, and possibly return an error on the WooCommerce Checkout page in case the number is not valid.

Read on to find out how I use this validation on this same website.

WooCommerce: Disable Checkout Field Autocomplete

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!

WooCommerce: Refresh Checkout Upon Any Input Field Change

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!

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!

Tag: Checkout Fields