You searched for custom field

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!

WooCommerce: Hide Products Based On Custom Field / ACF Value

We’ve already seen how to hide products based on IP addresses, hide products belonging to a specific category and even hide all products from the Shop page.

Today I want to publish another version of those, but this time we’ll use a custom field / ACF in our conditional logic, so that we can toggle the product visibility based on its value. Enjoy!

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!

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!

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.

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!

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!

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 🙂

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?

WooCommerce: Display Advanced Custom Fields @ Single Product

Advanced Custom Fields plugin is a great way to add custom, advanced fields to the WooCommerce Single Product Page. Many struggle to display such fields on the front-end, so this simple snippet should help you!

WooCommerce: Show Product Custom Field in the Category Pages

A client asked me to show a given custom field in the loop (i.e. Shop page, Category pages, Tag pages = anywhere woocommerce products are returned). Interestingly enough, she didn’t want to show the product short description (see “show product short description on the homepage only” snippet) but a custom field, so here’s how you do it! Continue reading WooCommerce: Show Product Custom Field in the Category Pages

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.

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.

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?

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!

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!

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!