Customize WooCommerce: Adding Custom Fields to Your Simple Products

Maybe you’re setting up your eCommerce website from scratch and want to sell different types of products. Perhaps you’ve had an eStore for the past couple of years, and you want to expand your horizons and offer new products. Whatever has brought you to this tutorial, the fact is that you need to customize WooCommerce. And you can find everything you need to know with Bright Vessel!

WooCommerce is the most popular WordPress plugin for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its backstage.

Many of our clients at Bright Vessel are looking for a unique eCommerce solution that takes into account the nuances of their specific business. With our vast experience with WooCommerce, we can help you set up your eStore to fit your needs. With that in mind, let’s get started!

What You’ll Need to Customize WooCommerce

Below, you’ll find the basic setup you’ll need to customize WooCommerce:

• Your preferred desktop operating system, be it MacOS, Microsoft Windows, Linux distributions, etc.
• Hypertext Preprocessor (PHP) at least 5.6.25.
• HTTP servers Apache or Nginx.
• MySQL 5.6.33.
• An updated WordPress, or at least version 4.7.
• The WooCommerce plugin in at least the 3.9 version.
• The integrated development environment (IDE) of your choosing.

Customize WooCommerce to Add Personalized Fields

That said, custom fields in WooCommerce differ a little from those in WordPress. Instead of working with metadata on posts, as WordPress defines this, we’ll refer to “custom fields” as a real text field. On the WooCommerce menu, go to the Linked Products tab of the Simple Products type.

WooCommerce API - Hooks

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPBeginner, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

WooCommerce provides its API that allows users to hook into its pages’ lifecycles. However, the WooCommerce API is a little different from the WordPress metadata one. There are two main hooks you need to get to know:

• Woocommerce_product_options_grouping. This hook serves the purpose of creating a description as well as text input that accepts our values.
• woocommerce_process_product_meta. The use of this function is to process, sanitize and save the value of the text input.

To use these hooks, you’ll need to define them and customize their functionality.

Customizing Functionality

• Define a class with a since variable as its instance data. This variable will be a representation of the input field’s ID as shown to the user:

You can now use the hooks above by adding an initialization function that registers two custom functions on the hook.

Text Input Field

To add a Text Input Field, you should first add a function hooked to woocommerce_product_options_grouping:

To implement the function, you should:

• Create a unique ID to identify the text field. Use the instance data in the constructor.
• Use a label to add a description to the input field.
• If you want, you can specify a placeholder.
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• To add text to the tooltip, you can use the option for a description.

The information above will be in an associated array and will then reach woocommerce_wp_text_input. This API function to customize WooCommerce outputs a text element with the information you just provided.

Saving Information

To save the changes above, you’ll need to:

• In the init method, add this code:
• Check that several nonce values are present; otherwise, you should return false as a security precaution. You can detect nonce values by looking into what WooCommerce specifically provides the source code.
• In the  $_POST collection corresponding to the user input, sanitize the data.
• Save the previously recorded information to the post metadata table.

Rendering Information on the Front-End

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

A text field ID and initializing it in the constructor.

• An initialization function to hook the front end to the previously created code.
• To render the real value.

Starting the Plugin

You’re almost finished with this tutorial on how to customize WooCommerce! The last step is setting up a bootstrap file to start the plugin with all the recent changes. Here’s the code to start things up:

A couple of extra notes:

• This is where you include the dependencies.
• Once the function is working, check whether it’s displaying the dashboard. If it is, the proper part of the plugin is loaded correctly; if not, the standard display is.

In Conclusion

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more WooCommerce tutorials on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, contact us for more information!