Custom Product Fields in WooCommerce Product Page

Hey there! In this tutorial, I’ll show you how to easily add custom dynamic fields to your WooCommerce product pages using the Advanced Custom Fields (ACF) plugin. This is perfect for displaying unique product information like dimensions, shipping details, and more, all without diving into complex code. Let’s dive in!

Step-by-Step Tutorial:

1. Install the Advanced Custom Fields (ACF) Plugin

• Go to your WordPress dashboard.
• Navigate to Plugins > Add New and search for Advanced Custom Fields.
• Install and activate the plugin by WP Engine (formerly Delicious Brains).

2. Create a New Field Group for Your Product Pages

• Once ACF is installed, head to the ACF tab in your dashboard.
• Click Add New to create a new field group.
• Name your field group, for example, “Product Page Fields”.

3. Add Custom Fields to the Group

• Inside your new field group, click Add Field.
• For each field (e.g., Dimensions, Shipping, Specifications):
  • Set the Field Label (e.g., Dimensions).
  • Choose the Field Type as “Text” or What You See Is What You Get (WYSIWYG) Editor if you want formatting options.
• Repeat this for all the custom fields you want (e.g., Shipping, Specifications).

4. Assign the Field Group to WooCommerce Products

• Scroll down to the Location section and set the rule to:
  • Post Type equals Product.
• This ensures that the custom fields only appear in your WooCommerce products.

5. Save and Publish the Field Group

• Hit Save to publish your new field group. Now, when you edit a product, these custom fields will appear.

6. Edit a Product and Add Dynamic Content

• Go to Products in your WooCommerce dashboard.
• Open a product, scroll down to the custom fields section, and add your dynamic content (e.g., 100×50 cm for dimensions, 2 weeks for shipping).

7. Add Custom Fields to Your Product Layout

• Open the UX Builder for your product layout in Flatsome.
• Add an element like a text box or accordion where you want the dynamic content to appear.

[acf field="your_field_name"]

• Make sure the field name matches exactly (case-sensitive).

8. Update and Preview Your Custom Product Page

• After updating, preview the product page. You’ll now see the dynamic fields you added earlier (e.g., dimensions, shipping info) displayed on the front end.