Adding Custom Fields to WooCommerce Products with ACF Plugin and Elementor Pro for Advanced Product Detail Page Designs

Using the ACF (Advanced Custom Fields) plugin can add custom fields such as video, QA fields, etc. to WooCommerce product categories and products. Combined with Elementor Pro's template feature, advanced product listing pages and product detail pages can be created. Below are the detailed step-by-step and example tutorials:

Add custom fields to product detail pages

Step 1: Install the ACF plugin

1. Log in to your Wordpress dashboard and navigate toplug-in (software component)In the search bar, type "Advanced Custom Fields".

2. Install and enable the ACF (Advanced Custom Fields) plug-in.

Step 2: Add Fields

1. Go to "field"menu, click "newly built".

2. Add a field group name, such as "offerings".
3. Set the location to "Content type equals product", so that the field is added to all product pages.
4. Click "Adding Fields".

Step 3: Setting up the fields

1. Enter a field label, such as "QA". The field name will be automatically generated based on the field label, and English is recommended.
2. Select the field type as "Visualization Editor" and save.

Example: How to add custom fields to product details and product list with ACF

Go to the product list, edit any product and a new QA field will be added at the bottom of the page. To populate the content, you can use the same method to add other fields such as BROCHURE, WHY CHOOSE US and so on.

Step 4: Create a product detail page template with Elementor Pro

1. Create a completed single product template (product detail page template).
2. Edit the product detail page template with Elementor.
3. Add a text editor element below the heading.
4. Click on the dynamic tag and select "ACF Field".

5. In the key, select the field "QA" that you just added.

caveat If the product to which the QA field has just been added is not the current previewed product, you need to set the previewed product by clicking on the gear in the lower left corner and clicking on "Apply & Preview" button to see the QA field contents.

Add custom fields to product listing pages

Step 1: Add video fields to product categories with ACF

1. Add as aboveACF Video FieldsThe
2. When you add a product category, you will see the video field.

Step 2: Create Product archive template page with Elementor Pro

1. Adds a video element to the template.
2. Set the video element's link to "ACF Field" and select the ACF video field you just added.

caveat

Enter a video link when editing product category information, and the corresponding video will be displayed when viewing the product category page.

With the above steps, you can use ACF and Elementor Pro to flexibly add custom fields to WooCommerce products to create personalized product detail pages and product listing pages.