WooCommerce: Search Products By Custom Field (Backend)

In WooCommerce, there are two kinds of search: the customer one (frontend) and the admin one (backend). We’ve already covered how to let customers search into custom field values on top of the default product title and description, so this time we’ll talk about the backend search.

Let’s say, as a WooCommerce store admin, that you’ve added a product custom field (e.g. “gtin“), and you want to make sure the backend search also returns products where “gtin” is equal to the search term. The snippet below will help you do that. Enjoy!

Continue reading WooCommerce: Search Products By Custom Field (Backend)

WooCommerce: Item Custom Field @ Edit Order Page

Alright, this title may not really help you understand what I mean, so let’s put it in another way. When, as an administrator, you edit an order and are in the Order Items table, you have the chance to edit the item quantity, subtotal and discounted price (see screenshot below).

Now, what if you also want to have the freedom to display and edit another custom field, so that it is saved inside the order once you hit the “Save” button?

This could be useful for custom setups – for example let’s imagine the admin has the necessity to also define the “shipped quantity”, so that they know exactly if a specific order has been entirely fulfilled or requires a second shipment to get completed.

Either way, see the screenshot below, play with the snippet, and see how it goes. Enjoy!

Continue reading WooCommerce: Item Custom Field @ Edit Order Page

WooCommerce: Search By Custom Field (Frontend)

The default WooCommerce frontend product search returns results based on whether the search term is present in the product title, short and long description. Also, you can optionally search products by SKU.

But what if you also want to search for a custom field value e.g. you have a custom field called “_brand” and you want to get the products where “_brand” is equal to “apple“?

Now, I’m not sure I’ve explained this in plain English, so let’s take a look at a practical example. Enjoy!

Continue reading WooCommerce: Search By Custom Field (Frontend)

WooCommerce: How to Add Custom Fields to Variations

When selling products on your WooCommerce store – you want to provide as much product information as possible to your customers. This is especially because, unlike a physical shop or a brick and mortar store – your online customers cannot physically touch or experience the products before buying them. 

Hence, providing additional information and keeping customers informed about the multiple facets of your products is essential. And an effective way to enhance customer experience is by adding custom fields for product variations. 

Product variations are product attributes – including the product’s size, color, pattern, texture, and style. On the other hand, WooCommerce custom fields allow you to add additional data for individual products – to display on a single product page. 

Custom field variations let you add data unique to an individual product – which can include anything from the product’s ISBN, additional product specifications, radio buttons, and checkboxes. Thus, custom fields for product variations could either mean: 

  • Fields to display additional product variation’s information, or 
  • Fields to accept customer input to customize the product variation through dropdowns or radio buttons. 

So, in this article, we share simple yet efficient ways to add custom fields to product variations. But, first – let’s see how adding fields for product variations help your WooCommerce store. 

Continue reading WooCommerce: How to Add Custom Fields to Variations

WooCommerce: Add Custom Field to “Quick Edit”

WooCommerce product custom fields are possibly the most used customization from what I’ve seen over the years on clients’ websites.

Adding custom fields to the product backend is pretty straight forward (including the input fields to be used for editing their values), however there are two additional areas where you need to do more work in order to allow for custom field editing: the “Quick Edit” and the “Bulk Edit” sections (WordPress Dashboard > Products).

We already saw how to allow a new custom field to appear in the Bulk Edit section, so this time we’ll talk about the Quick Edit window. So, how do we add a custom field in there (WordPress Dashboard > Products > Hover on a given product > Quick Edit)?

Well, here’s a fully working snippet for you. Enjoy!

Continue reading WooCommerce: Add Custom Field to “Quick Edit”

WooCommerce: View Product/Order Hidden Custom Fields (“Protected Meta”)

I was working on a WooCommerce project recently and I didn’t want to waste time searching through all the hidden product post meta.

Post meta are basically product custom fields that are added via the update_post_meta() WordPress function by WooCommerce itself, a custom plugin, a snippet, a theme. For example, “total_sales” is a default WooCommerce product custom field that updates every time the product is purchased. You can “get” total sales with the get_post_meta() WordPress function.

In the same way, there are dozens of default and third party product custom fields that are stored inside the WooCommerce product meta. If the product custom field “meta key” starts with an underscore (“_”), however, this won’t be visible in the “Custom Fields” section of the edit product page screen. Which is a bummer.

So, today, I’ll show you a quick trick so you can always know what the values for product meta keys are without having to mess with print_r() or error_log() in your PHP functions. In the image below, you see the final outcome.

Please note this also shows order hidden meta.

Enjoy!

Continue reading WooCommerce: View Product/Order Hidden Custom Fields (“Protected Meta”)

WooCommerce: Add Custom Field to “Bulk Actions” > “Edit”

As you know, one of the product bulk edit methods comes with WooCommerce out of the box. It can be found under “WP Dashboard” > “Products” > “Bulk Actions” > “Edit”. For example, you can decrease all prices by 10%, or bulk assign a new product category.

However, if you added a custom product field such as RRP, this won’t show automatically there in the bulk edit form – you’ll therefore need to add it via code. Thankfully, WooCommerce gives us a “hook” we can use to display the input in the bulk edit form. After that, another PHP function will be used to save and store the value.

Easy as pie! Just copy & paste into your functions.php. Enjoy 🙂

Continue reading WooCommerce: Add Custom Field to “Bulk Actions” > “Edit”

WooCommerce: Add Custom Field to Product Variations

Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.

Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?

Continue reading WooCommerce: Add Custom Field to Product Variations

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: Add Custom Product Fields (e.g. RRP) Without a Plugin

The manufacturer’s suggested retail price (MSRP), or the recommended retail price (RRP), is the price at which the manufacturer recommends that the retailer sells the product at. You might have seen this in an ad, on a magazine, on a price tag: “RRP: $50. Our price: $39!”.

WooCommerce entrepreneurs can take advantage of this “marketing trick” too. The only problem is: how do we show this “extra field” on the single product page AND in the product edit page, so that the website owner can add this easily?

Continue reading WooCommerce: Add Custom Product Fields (e.g. RRP) Without a Plugin

WooCommerce: How to Add a Custom Checkout Field

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

WooCommerce: Add Custom Tab @ Admin Settings

WooCommerce offers a comprehensive set of settings organized into several tabs within the WordPress admin dashboard: General, Products, Shipping, Taxes, Payments, Accounts & Privacy, Emails, Integration, Advanced.

These are the core WooCommerce settings tabs. Depending on your specific setup and any additional plugins you might be using, you might see additional custom tabs as well.

Which is exactly what we’re doing today – creating a custom tab!

By adding a dedicated section within the WooCommerce settings, you can organize your custom settings and keep everything neatly categorized and consistent. This not only improves your own workflow but also makes it easier for any future collaborators to manage your custom options.

This tutorial will guide you step-by-step through the process of creating a custom tab in your WooCommerce settings. We’ll cover everything from setting up the basic structure to implementing functionalities like saving your custom options.

Enjoy!

Continue reading WooCommerce: Add Custom Tab @ Admin Settings

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!

Continue reading WooCommerce: Read-only Checkout Fields

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!

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

WooCommerce: Customize Product Search Form HTML

The “Search products…” WooCommerce form usually appears in the website header and/or the Shop page sidebar based on your theme settings and widget setup.

It usually features an input form with a magnifying glass icon (unless your theme customizes it via CSS), without a visible search button, and on enter it redirects users to the search result page.

Case study: most WooCommerce Ajax Search plugins target the WooCommerce product search form input, so that when you start typing, the “instant search results” window pops up. However, I needed to disable this behavior on certain subsites/languages and the only workaround here was to add a class to the search form input, so that I could target it in my Ajax plugin selector exclusions.

Even if the above scenario is very unlikely, the challenge is still valid. So, how do we customize the HTML of the “Search products…” WooCommerce form (so, not the CSS, but the actual HTML output)? Let’s go!

Continue reading WooCommerce: Customize Product Search Form HTML