When building a WooCommerce store, you might need to display product custom field. Custom fields offer a way to store and showcase extra data for products, enhancing user experience and product detail depth. In this guide, we’ll walk through displaying these custom fields using Elementor, a popular page builder for WordPress.
Prerequisites
- WooCommerce Installed and Configured: Ensure you have WooCommerce installed with products added.
- Elementor Pro: The Pro version is necessary since it supports dynamic content, which is essential for displaying custom fields.
Step 1: Adding Custom Fields to Products
To display custom fields, you first need to create them. This can be done using plugins like Advanced Custom Fields (ACF).
- Install and Activate ACF:
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Search for Advanced Custom Fields.
- Install and activate the plugin.
- Create Custom Fields:
- In the dashboard, go to Custom Fields > Add New.
- Create a new field group, e.g., “Product Details”.
- Add fields as required, like Brand, Material, or Warranty.
- Set the location rule to show these fields on the WooCommerce Product edit screen.
- Publish the field group.
Step 2: Adding Custom Fields Values to Products
- Edit a product from Products > All Products.
- You will see the custom fields section created with ACF.
- Fill in the custom field values for the product.
- Save or update the product.
Step 3: Displaying Custom Fields with Elementor
- Create or Edit Product Template:
- Go to Templates > Theme Builder in the Elementor dashboard.
- Create a new Single Product template or edit an existing one.
- Add Dynamic Custom Field Widgets:
- Drag and drop a Text Editor widget onto the product page template.
- In the widget’s settings, click on the dynamic tags icon (stack of papers) in the text editor panel.
- Select ACF Field from the dropdown.
- In the new field, click on the wrench icon, and choose the specific custom field you want to display, like Brand.

Customize and Style:
- Adjust the styling of the text editor widget to match your site’s design.
- Repeat the process for each custom field you want to display.
Save and Publish: - Save the template and set the display conditions to apply it to all products or specific categories.
Step 4: Testing
- Navigate to a product on your site to ensure the custom fields are displayed correctly.
- Adjust and tweak as necessary in Elementor for optimal presentation.
Conclusion
Using Elementor to display product custom field values adds significant flexibility and customization to your product pages. By following this guide, you can enhance your store’s functionality and provide richer product details, improving the user experience and potentially boosting conversions.