Back to contents

JetEngine: How to Add Meta Boxes to WooCommerce Products

Meta Boxes allow you to make the WooCommerce Shop management more convenient. Broaden the information about the products and attach fields according to which you can filter the content. Personalize the control settings of your website using the JetEngine plugin and its Meta Boxes. 

Collect all the needed meta fields in one meta box and apply them only to the desired sections. 

Step 1 — Adding a New Meta Box

Navigate to JetEngine > Meta Boxes and click on the “Add New” button.

adding a new meta box

General settings

general settings meta box
  • Type a Meta Box Title that will be displayed in the post/taxonomy/user profile the meta box will be attached to;
  • Appoint which content type will be the Meta Box assigned to in the Meta Box for drop-down list;
  • Enable For Post Types for the desirable post types. To attach Meta Box to WooCommerce Products, pick “Products” from the drop-down menu;
  • If desired, define what exact post will work in cooperation with Meta Box in the Specific Posts tab;
  • Choose which items you don’t want to be shown using Excluded Posts tab;
  • Toggle the ‘Edit meta box’ link to display a gear button during the product customization. When clicking on the button, it will redirect you to the meta box editing.

Meta fields

The following vital customization point is to add Meta Fields. You can set as many meta fields as you need to make the product editing more comfortable.

There are already some WooCommerce default meta fields attached to the products. Set some custom meta fields that will be also be displayed during product editing. 

created meta fields

Do not hesitate to create a new meta field if needed. “Add Meta Box” by pushing the similarly named button.

Go to Products > All Products and select any product to check the created meta boxes. Open the product editor, and there they are, the meta fields that were added.

meta box product editing

Place there the desired content and upload the product. Enhance all the needed products with meta field content.

Step 2 — Display Product Data Added with Metaboxes

Now let’s find out how we can display the meta field-inserted information on the front-end.

After adding a meta field to the product, we can display it using Product Listing Item or Single Product Template. To check the last one, head to Crocoblock > Woo Page Builder and find the template to display the products.

single template woo page builder

Show the product meta fields with the widgets that can pull out the meta data. For example, you can use the Price List widget from the JetElements plugin to display the meta field with the help of the Dynamic tag feature.

price list widget for meta data

Set all the items by completing all the fields and putting the needed Custom Field as the Price via JetEngine Dynamic Tag. Customize the information in the Elementor, click on the “Update” button. Go to the product page to check the results.

meta field check on the frontend

For now, all the WooCommerce products accompanied by the additional meta field input information will be displayed the same way. Apply the Dynamic Field widget whenever you want to display the Meta Box content.

Read about how to add the needed meta fields to the WooCommerce categories.

Step 3 — Apply Meta Data to Other Sources

Use products meta boxes data in smart filters

If you have a Shop Page, you may want to filter the content with meta fields. You can do it freely using the JetEngine meta fields and JetSmartFilters combo. 

For instance, let’s create a checkboxes filter for the language of books.

Navigate to Smart Filters > Add New

adding language checkboxes filter using custom fields
  • Type the Filter Label and Active Filter Label that will define the checkboxes filter;
  • Set Filter Type; in this case, it can be Checkboxes list that will show several options to choose from;
  • Use “Custom Fields” as Data Source for the filter and put the Custom Field Key that you have written in the Name/ID field while creating meta fields;
  • Enable Get Choices From Field Data to pull out the subfields of the meta field;
  • Pick the Field Source Plugin, set the JetEngine value;
  • The Is Checkbox Meta Field toggle is responsible for filtering the data from Checkbox meta fields type;
  • Complete the Query Variable field with the Name/ID field. This field is required.

Once you are ready to fill out the fields, publish the filter and proceed to the Crocoblock > Woo Page Builder. Create or edit the existing Shop Page Template. 

Add the Checkboxes Filter widget to the page and set the created filter as the source.

checkboxes filter widget settings

Adjust all the required settings, update the page, and check the results on the front-end.

language checkbox on the frontend

The filter based on the meta field is ready.

Set a query for products based on the Meta Boxes’ meta field data

Besides the filter customizations, you can query the products by meta field options. Go to JetEngine > Query Builder and add a new query.

creating a meta query

Begin with the General Settings by typing Name and choosing “WC Product Query” as Query Type. For instance, we will create a Year Query.

Since we don’t need General WC Product Query settings, you can adjust or skip them and pass on to the Meta Query Tab.

  • Fill in the Field key/name. Find this field in the created meta box under a Name/ID label;
  • Set Value you want to compare. Note that the written value should be contained in some of the products. Otherwise, the value can’t pull out the missing data;
  • Pick the Compare option that will be operated on the page;
  • Define the Type of value you wrote down. Now we choose “Numeric” as Value is “2021.”

Click on “Add Query” once all the settings are proper for you and head to the Shop Template.

Place the Listing Grid widget to display the queried products.

listing grid custom query tab editing

Set the General Settings and pay attention to the Custom Query field. Enable Use Custom Query to connect the newly created Custom Query

When the editing is done, update the page and check the changes on the Shop Page.

queried grid on the shop page

There they are, books that we have set as released in 2021.

Everything is ready. You have learned how to add Meta Boxes to WooCommerce products, filter products using meta data, and query them by meta field options.