In this part of the tutorial, we show how to add custom fields and custom taxonomy to WooCommerce products. We will use these custom attributes to organize our products and add more information to them.

WooCommerce creates the products custom post type for us. We’ll use Types to customize the products by adding our own custom fields and taxonomy to them. Later in the tutorial, we’ll show how to display these new product attributes using Views plugin.

Here is the customized WooCommerce product edit screen:

Customized product screen
Customized Product admin screen

It includes the standard WooCommerce elements, such as title, body and product settings. We use Types to add our custom fields and include them in the WordPress admin. Later, we’ll show you how to use Views to create custom templates for WooCommerce products and develop parametric product searches.

Adding custom fields for ‘product styles’

We want to allow to add styles to products. For that, we’ll use custom fields. Here is how to do that:

  1. Go to Types → Custom Fields → Add a custom fields group.
  2. Name it Product Style.
  3. Add three Checkbox fields.
  4. The first one is Casual. Value to store: Casual. When unchecked: don’t save anything to the database. Make sure that Display the value of this field from the database is selected.
  5. For the next two checkbox fields make the same settings, but name them Formal and Sport.
  6. Save and we’re done.

Product style custom fields

Adding additional product images using custom fields

Types lets us add image custom fields. Types image fields are powerful and easy to use. You can upload one image and use it to display the product in different sizes. We’ll make the product-image custom field ‘repeating’, so that we can upload a number of images to the same product, creating a mini product-gallery.

  • Go to Types → Custom Fields → We’ve added a custom fields group.
  • Name it Images.
  • Add an Image field.
  • Name the field Thumbnails and make the field repeatable.
  • Add a second custom fields group and name it Product Style
  • Add three checkbox fields and name them Casual, Formal and Sport.
  • Save and we’re done.

Arranging products by gender using custom taxonomy

The most effective way to create a Gender box for all of our products is with Custom Taxonomy. Since products belong to some (or multiple) genders, taxonomy is the natural way to add this information.

Gender taxonomy for products

  • Go to Types → Custom Types and Taxonomies → Add Custom Taxonomy.
  • Name it Gender.
  • For Visibility choose Make this taxonomy public (will appear in the WordPress Admin menu) .
  • From the box Select Post Types choose Products. This way we’re attaching the Gender taxonomy to Products post type only.
  • Another important thing is to make the taxonomy Hierarchical from the Advanced settings
  • Click Save Taxonomy and we’re ready.

  • WooCommerce product fields

    By adding WooCommerce Views to our site, not only have we added all the shortcodes we need to display our Products, we’ve also added ‘complex’ product fields for you to use in Views to filter you product queries or to conditional display sections of your views.

    • views_woo_price – Is our Product price filter- It ‘knows’ about sales prices, and understands ‘from’ prices for Variable Product
    • views_woo_in_stock – will return 1 (true) if the product has stock and 0 (false) if the product out of stock.
    • views_woo_on_sale – will also return values of 1 (true) and 0 (false) if the product is on sale. For Variable products, this will be true if any of the Product Variants are on sale..
    • You can read more about these fields and other functionality, in WooCommerce Views – build e-commerce sites with Toolset.

      Our WordPress Backend is Ready, What Next?

      In this step, we’ve added custom fields to products and organized products using taxonomy. Now, we can manage the store from the WordPress admin. In the next parts, we’ll see how to build the public pages that display all this information. You guessed right. We’ll do that with Views, all from the WordPress admin and without any coding.