WooCommerce is a free e-commerce plugin (extension module) for WordPress and is popular especially among small businesses to run online stores. If you use WooCommerce, you may wish to collect extra information about customers, or display extra information about your products and services in a clear organized manner. The extra information is often stored as custom fields so you can display them the way you want. CIO Custom Fields for Woo: Customers, Members and Products is a tool to help you to manage custom fields and display them automatically without PHP code.

In some cases you may wish to display extra information about some special products, and display standard information if the products are in the standard range. For example some of your products are limited edition collectible items. You may wish to display an autograph or serial number to make the products special. If you know PHP and WooCommerce template system there are a few ways to achieve this. This tutorial will demonstrate how to create custom fields of WooCommerce products, and display them automatically. In the next tutorial we will demonstrate how to set location rules and display custom fields only when preset conditions are met. This can still be done even if you don’t know much about PHP and WooCommerce templates.

For the sake of this tutorial, we will assume the following:

* you have installed WordPress and the WooCommerce plugin

*you know how to set up WooCommerce and create products using WooCommerce

* you know what are plugins (WordPress extension modules), and how to install and activate new plugins.

If you are totally new to WordPress or don’t know how to install new plugins, you may find information or tutorial and come back to this tutorial later. A good place to start would be WordPress documentation, or WordPress support forum.

Preparation

 

The following plugins need to be installed and activated for this tutorial.

* CIO Custom Fields for Woo Professional Edition

* PODS

PODS is available for free download from WordPress plugin repository. CIO Custom Fields for Woo Professional Edition is available for download after paying a small once-off fee.

CIO Custom Fields for Woo Professional Edition extends PODS to deliver some features. Please activate both plugins before proceeding to the next steps.

Step 1. Extending WooCommerce Product with PODS

 

PODS is a plugin to manage content types and custom fields in WordPress, and is primarily used by website developers. Please relax if you are not a website developer. We will only use Pods’ graphical user interface to configure custom fields and display conditions (location rules). You can still accomplish this task without any programming knowledge or experience. If you are keen to know about  PODS, more information is available from PODS official website.

One of the unique features of PODS is that it can extend WordPress built-in content types (user, page, post, media, comment etc), and content types (custom post type) created by other themes or plugins.  “Product” is a content type (custom post type) created by WooCommerce. Our first step is to extend the content type “product” using Pods.

After you have activated the Pods plugin, a menu link (Pods Admin) will appear at the bottom left hand corner of the screen. Your menus may look different depending on what plugins you have installed, and which color scheme you have chosen in your theme.

Click on the Pods Admin link, and you will see the following screen. Two content types (user and cio custom field group setting page) are automatically created when you install CIO Custom Fields for Woo Professional Edition. So you should be able to see these two content types in this screen. Please click on “Add New” link next to “Manage Pods” heading. Just in case you are curious what is “pod”, it is a nickname for content type in this context.

After clicking on Add New link, you will see the following screen. Please click on Extend Existing as we are going to extend product as a content type.

The next screen will prompt you to choose content type and post type to extend. Please leave content type as the default Post Types, and choose “Products” from the second drop down list, as shown below.

 

Click Next Step button, and PODS will complete the extension, normally within a few seconds. You will see the next screen after extension has been completed successfully.

Step 2. Setting Up Custom Fields of WooCommerce Products

 

* Adding new custom fields for WooCommerce

Adding new custom fields to WooCommerce product is a straight forward process using Pods graphical user interface in the admin panel. At the top and bottom of the screen, you will see Add Field button. Click on the button, and you will see Manage Fields screen below. Type in label and field name of your choice, click on Add Field button below the edit screen to finish this field. Field name will be used to reference the field and should always be lower case following MySql convention.

TIPS: when you click on Add Field button, the field configuration is not saved to the database yet. To save the field configuration to the database, you need to click on the Save Pod button to the right of the screen. If you leave this page without clicking on Save Pod button, you will lose field configuration you have entered.  

For this tutorial, you may leave the field type as “plain text”. Pods will produce an input cell for you to enter information in the edit product screen later. Once you are familiar with the user interface, you may try different field types and see the changes in the edit product screen.

CIO Custom Fields for Woo professional version supports more field types implemented in Pods, such as radio button, check box, drop down list, file upload.

Changing the sequence of custom fields for WooCommerce

At the left of custom fields, you will see three bars as shown below. You may click on it, hold the mouse button and drag it upwards or downwards, and drop to the new position. Please remember to click Save Pod button to make the changes take effect.

* Adding Custom Field Groups

As the number of custom fields grow, you may find it necessary to organize the custom fields  into groups, for the following objectives:

1. Label the custom field groups so that it is easier for you, your employees and/or customers to understand in the future.

2. Set display conditions by the group. We will cover this topic in details later in this tutorial.

Custom Field Groups and location rules are features implemented in CIO Custom Fields for Woo Professional Edition. These features are not available in the public release of PODS package yet. 

CIO Custom Fields for Woo makes it simple to add custom field groups when you have already created some custom fields. This is often the case in real world. We start with a few custom fields, and add more fields as the need arises and the business grows. Then we realize groups are needed for clarity.

To add custom field groups, you simply add a new field, and give it a special name so that it will receive special treatment later on. By default setting, CIO Custom Field for Woo gives special treatment if a field name starts with the prefix “cio_section_”. You may configure this prefix in CIO custom field groups setting page, which will be covered in another tutorial.

Let’s say we are going to sell imaginary items – photographs of rare rose species by some well-known artists. We have added  custom fields (artist_name, artist_achievements, master_piece, cost), and now we want to put these fields in a group. What we need to do is to add a new field and give it a name such as cio_section_artist, and drag it to where we want the new group to begin.

CIO Custom Fields for Woo uses the field name and sequence to identify where a group starts and ends, the same way as the chapter headings appear in a table of context of a printed book.

After you click on “Save Pod” button to save the field configuration information to the database, the newly created special field will have a different color background (SkyBlue by CIO’s default setting). The color background helps us to quickly see which fields are group headings. You may change the group heading background to your favorite color in CIO custom field groups setting page.

The field type of such special field should always be Relationship. CIO Custom Field for Woo will ignore other field types if the field is used as group heading.

* Modifying Custom Field Groups

If you would like to change which group a custom field belongs to, you can either drag the  group heading field to the new position, or drag the custom field to the new position. Group heading field serves as a label to mark the beginning of a new group.

 Duplicating a custom field of WooCommerce product

When you move your mouse over a field name, you will see some menu links: Edit, Duplicate, Delete. You may click on duplicate so the field name and label are copied. You may then make changes to the field label and name before saving.

Please remember to click on Add Field button, and click on Save Pod button to save to the database.

 

Deleting Custom Fields for WooCommerce

When you move your mouse over a field name, you will see the following menu links: Edit, Duplicate, Delete. Click Delete, and you will be able to delete the field. Please remember to click “Save Pod” button to save the changes.

After you click on the delete button, you can still change your mind before clicking on the Save Pod button. Just refreshing the page, and the page will appear again. Clicking on Save Pod button will save the changes to the database.

If you want a field back, you can always create a new field and give it the same name or label.

 

Step 3. Filling in custom fields

 

After you have set up the custom fields of WooCommerce Product in Pods, the fields will be added to the edit product page for you to fill in extra information. The fields are normally grouped as “More Fields” as shown below.

The special field used for custom field group heading is receiving special treatment here. It is rendered as a label to mark the beginning of a group,  without input cells. Special fields used for group heading  are field definition only. No value will be actually stored in this special field when you create items (products).

 

For the sake of this tutorial,  we are going to enter some imaginary information in the custom fields to see how the extra pieces of information will be displayed in the front end.

If you have many items to update, and the extra information is already in electronic format, you may use CIO Custom Fields Importer to process your information and update your website automatically.  CIO Custom Fields for Woo is fully integrated with CIO Custom Fields Importer as part of an automated content management solution.

Step 4. Displaying Custom Fields

 

You needn’t do anything in this step except checking the display of custom fields on your product page.  CIO Custom Fields for Woo searches the database and automatically display custom fields in WooCommerce’s single product page. The default location of the custom fields is after product description, at the bottom of the product page. You may change the default settings and display the custom fields after product summary, normally at the right hand side of the product page, after the price information.

You needn’t do anything else to display the custom fields. This is the whole reason of using CIO Custom Fields for Woo to make it simple and easy, isn’t it?

Summary

 

As shown in this tutorial, you may manage unlimited custom fields of WooCommerce products by setting up the fields and displaying them automatically without PHP code. CIO Custom Fields for Woo can manage custom fields of WooCommerce customers (users) too. The basics of managing custom fields of WooCommerce customers are covered in another tutorial.

Using CIO Custom Fields for Woo, you will have full control and make WooCommerce truly yours.

 

What Is Next?

Pods is a powerful framework that can do much more than saving custom fields to a database as shown in this tutorial. It is a framework to build high performance content management system on WordPress platform. Your website can potentially speed up by a few times by changing custom fields storage and running optimised queries.  The actual performance enhancement depends on how you use your custom fields and how you store custom fields. If your website is struggling with increasing number of custom fields, please contact us for an obligation free consultation of optimising your website. In many cases you can keep the appearance of your current website, with a much better engine to power your online system as your business grows.

Some of your business processes can be automated to save you significant time and money in the long run.  This is especially the case where labor cost is high.  CIO Custom Fields suite of tools are designed for small and medium businesses to have a high performance online presence with low running/maintaining cost. These tools are part of the solution to turn spreadsheet based data into automatically updated online system. Please contact us to find out how your business can benefit from our suite of tools.