You searched for custom field - Page 2 of 12

WooCommerce: Allow Order Editing For Custom Order Status

WooCommerce admins are allowed to “edit” an order only when this is in the “on hold” or “pending payment” status. By “edit” I mean having the chance of modifying or adding products, fees, shipping and recalculating the totals, which are not allowed once the order has been placed (“processing“, “completed“, etc.).

However, there are many reasons why you’d want to have the right to edit a processing, completed, or custom status order – of course as long as you don’t end up changing the total, as customers already paid at that stage.

Think about the following scenarios:

you customized the items table and added a custom field, and you want to set the custom field value when the order is “processing“
you need to edit the shipping method name AFTER checkout, and you want to be able to rename it when the order is “completed“
you need to add a fee and a discount of equal amounts (so that the total stays the same) before completing the order

Either way, let’s enable the little “pencil icon” on a custom order status, so that the admin can customize the order whenever they wish!

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: Allow Customers To Define the Product Price

This is a great customization for those WooCommerce store owners who are willing to accept donations, custom amounts, or need anyway that the customer enters a custom price on the product page for paying an invoice or a bill.

This is as simple as creating a simple product with $0 price, and after that using the snippet below to display an input field on the single product page, where customers can enter their custom amount. Enjoy!

WooCommerce: Add Custom Meta Box @ Order Admin

When you edit an order as an admin, you’re presented with the usual WooCommerce layout: order details on the left, order action on the right, the list of order items on the bottom left, and – possibly – additional meta boxes added by third party plugins (e.g. the PDF Invoice and Packing List plugin order meta box where you can define the invoice date and number).

On top of that, it’s also possible, of course, to define our own custom meta boxes, so that the administrator and/or shop managers can view (or even enter) additional information.

I’ve used it on a client website to show a custom field, but you can print anything you wish – even documentation for shop managers (how to complete the order for example).

So, here’s how we add a new “section” (meta box) to the single order edit page in the WordPress dashboard, and how we display some content in it. Enjoy!

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: How to Shop As a Customer

You launched a new feature on your WooCommerce store or added a subscription functionality for your customers but aren’t sure how your customers will take it, if it’ll help them, and wish to review the functionality yourself first?

Or, do you take remote orders over the phone and need a solution that lets you place orders on your WooCommerce store on behalf of your customers?

Well, there’s a solution. Several “Shop As A Customer” plugins are available in the market today for distinct WooCommerce use cases. They help you review your WooCommerce store’s functionalities for optimal performance.

So, in this article, we’ll review the top Shop As A Customer WooCommerce plugins and their main features. But first, let’s see how shopping as a customer can benefit your business.

WooCommerce: How to Send Newsletters to Your Customers

Sending emails (newsletters, broadcasts or similar) to customers is an integral part of a WooCommerce marketing strategy. Email marketing is an outstanding tool that allows you to connect with your customers, keep them informed about your products, services, or discounts, get them to return to your site, and drive new sales.

Unlike other popular channels, like social media – emails provide a personal touch and let you reach your target consumers directly in their inboxes. Statistics suggest that while 87% of B2B marketers leverage email as a distribution channel – 79% of B2C marketers use emails to promote their new blog posts and articles.

And one such critical email marketing solution is email newsletters. They are extremely beneficial to stay in touch and build trustworthy relationships with existing and potential customers.

So, if you’re looking for solutions to send automated newsletters to your WooCommerce customers – you’re at the right place. But first, let’s learn more about the benefits of actually sending newsletters.

WooCommerce: The Need For Custom Order Tables

Scaling WooCommerce stores while ensuring optimum performance and pushing a store live from staging while keeping all the orders and customers intact are significant problems stores face, even today.

Each time a consumer places an order on a WooCommerce store, it adds dozens of order data and entries to the WordPress postmeta database table – which creates a major problem for stores that handle huge volumes of orders and eventually results in performance degradation.

Hence, WooCommerce received several requests over the years to resolve this issue and make separate and custom tables for each WooCommerce entity – without affecting the site and existing extensions.

And finally, WooCommerce is now working on the custom order tables implementation to solve the bottleneck issues and ensure more store stability.

In this article, we introduce you to the WooCommerce custom order tables – what is it, the new tables added to the structure, and how they can benefit your WooCommerce store. Let’s begin!

WooCommerce: Get List Of All Customers

Today’s snippet is a helpful shortcut for getting the list of customers in your WooCommerce website. This may be necessary during customization, especially if you need tailor-made features for administrators and shop managers in the backend or frontend.

How did I find out about the solution below? Well, our job is mainly copy/paste from online forums or read thoroughly the WooCommerce core files on a daily basis – so it must’ve been one of the two. Enjoy!

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 Product Search Plugins to Enhance Customer Experience

Say you’re at a clothing store. You know exactly what you want to buy but have to go through the store’s entire catalog to find the product. Sounds like a pointless hassle, right?

Now imagine you had a salesperson to assist you. They’d ask you a few questions – What are you looking for? What’s your budget? What size and color do you want? – and voila, you’ll get just what you wanted.

This is exactly what a product search feature on your store can do for your customers.

Product search allows customers to find items they’re looking for faster, improving their experience at your store and increasing the chances of a sale.

Now, if you have a small WooCommerce store with a handful of products, navigating your website and finding products will be fairly easy.

But if you offer a wide variety of products spread across categories, product search becomes an essential feature.

Given its importance, WooCommerce comes with a default search form, which is great for getting started with this feature on your store. However, this form offers only basic features, letting customers search for products mainly by their names.

For more advanced features – like live search, autocorrection, and providing more relevant results – Woo Product Search plugins can prove to be helpful.

We’ve done the legwork and compiled a list of some of the best WooCommerce Product Search plugins that can enhance your customers’ shopping experience. Let’s explore them!

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: How to Customize Email Templates Without Coding

On a daily basis, you probably use drag-and-drop in a variety of interfaces. For instance, drag and drop your Gmail items to its category, upload files to WordPress media library, or organize your phone home screen apps.

While many page builder platforms come in to help you design your website with drag-and-drop, building WooCommerce transactional emails is still considered as a complex task.

By default, WooCommerce email settings only allow you to change basic color profiles and text. In order to customize further, you will have to modify the theme code.

If you are a non-techie and don’t want to crack the code between the scripts in wp-content/plugins/woocommerce/templates/emails/email-styles.php or so, using a drag-and-drop email builder framework is the best solution.

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: Add a WordPress Customizer Setting

If you’ve taken the ConfigureWoo online course, you’ll know that WooCommerce adds its own “WordPress Customizer” section called “WooCommerce”, indeed. From there you can manage some settings such as the store notice, product images, checkout fields and so on.

What if you want to add your own settings, and let yourself or your client toggle options or type input values, so that this can be applied to your current WooCommerce website? Well, that’s quite doable, so in this post we’ll see how they do it. Enjoy!

WooCommerce: Update Order Field Value After a Successful Order

We’ve already seen how to update user meta after a successful order, but this time our goal is to “correct” or “edit” a checkout field value after the order is placed.

You could for example add a phone number prefix if it’s not there, and by doing so, correct the phone number before sending it to your courier. Likewise, you could remove punctuation, trim spaces, format accents, and do any manipulation you desire on whatever order field.

So, here’s how they do it. 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: 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!