Display Custom Fields Per Variation in WooCommerce – Guide

WooCommerce allows you to create product variations such as size, color, or weight. But what if you want to add custom fields for each variation, like a PDF brochure, size chart, video, or spec sheet? By default, WooCommerce doesn’t support this level of customization without writing custom code.

That’s where the ACF for WooCommerce Variation plugin comes in — it bridges the gap between Advanced Custom Fields (ACF) and WooCommerce variations, letting you manage variation-level fields with zero code.

In this step-by-step guide, you’ll learn how to display ACF fields per variation using this plugin.

Why Not Custom Code?

While developers can hook into variation data using PHP, maintaining such code over time is risky and tedious. Each WooCommerce or theme update could break your logic.

With the ACF for WooCommerce Variation plugin:

  • No need to write a single line of PHP or JS.
  • Fields are created using the ACF interface.
  • It’s compatible with most themes and builders like Elementor.

Step 1: Install Required Plugins

You’ll need the following plugins:

  1. Advanced Custom Fields (ACF) – Free or Pro
  2. ACF for WooCommerce Variation – From KrazyPlugins
  3. WooCommerce – Already installed if you’re running an online store

Step 2: Create ACF Fields for Variations

  1. Go to Custom Fields > Add New in your WordPress admin.
  2. Create a field group (e.g., “Variation Details”).
  3. Add fields you want per variation:
    • File (e.g., Brochure)
    • Image (e.g., Size Chart)
    • URL (e.g., Demo Video)
    • Text (e.g., Technical Specs)
  4. Under Location Rules, set:
    • Post Type is equal to Product Variation
  5. Click Publish.

Now, these fields will appear in the backend when editing individual product variations.

Step 3: Assign Variation Data

  1. Go to Products > Edit any variable product.
  2. Open the Variations tab.
  3. For each variation, you’ll now see the ACF fields defined earlier.
  4. Upload your brochure file, video link, or custom text.
  5. Save the variations.

Step 4: Display custom fields on the Frontend (with minimal code)

To display a custom field value when a variation is selected, follow these steps:

  1. Copy the variation.php template file from the following WooCommerce directory:
    woocommerce/templates/single-product/add-to-cart/variation.php
  2. Paste it into your active theme (or child theme) under the same relative path:
    your-theme/woocommerce/single-product/add-to-cart/variation.php
  3. Inside the copied variation.php file, add the following HTML where you want the custom field to appear:
<div class="woocommerce-variation-specs">Product Code: {{{ data.variation.spec }}}</div>

Note: Replace spec with the actual custom field slug you’ve created for your variation using ACF or other methods.

Once done, the specified custom field value will be displayed dynamically when a variation is selected.

Step-by-Step: Display Variation Custom Field in Elementor

Step 1: Make sure the custom field is passed to frontend

Ensure your custom field (e.g., spec) is passed to the variation data via PHP. If you’re using ACF, you can add this in your functions.php or a plugin:

add_filter( 'woocommerce_available_variation', 'add_spec_to_variation_data' );
function add_spec_to_variation_data( $variation_data ) {
    $spec = get_post_meta( $variation_data['variation_id'], 'spec', true ); // Replace 'spec' with your field name
    if ( $spec ) {
        $variation_data['spec'] = $spec;
    }
    return $variation_data;
}

Step 2: Add Placeholder in Elementor

In your Elementor Single Product Template:

  1. Drag an HTML widget or Text Editor widget where you want to display the custom field.
  2. Add this HTML:
<div id="variation-spec-output" style="margin-top: 10px; font-weight: bold;"></div>

Step 3: Inject JavaScript Using Elementor or Footer

If your theme or Elementor allows adding custom JS (or you can inject it via wp_footer), use this:

jQuery(function($) {
    $('form.variations_form').on('found_variation', function(event, variation) {
        if (variation.spec) {
            $('#variation-spec-output').html('Specification: ' + variation.spec);
        } else {
            $('#variation-spec-output').html('');
        }
    });

    $('form.variations_form').on('reset_data', function() {
        $('#variation-spec-output').html('');
    });
});

When a customer selects a variation, the value of the custom field (e.g., “Specification”) will dynamically appear in the Elementor-designed layout without modifying WooCommerce templates.

Benefits Recap

Variation-Level Customization – Each variation feels like a unique product
Boosts Conversion – Show more relevant info, improve buyer confidence
Flexible – Supports any ACF field type
Time-Saving – Set it up once, scale to hundreds of products

Final Thoughts

If you’ve been struggling with WooCommerce’s limited variation capabilities, the ACF for WooCommerce Variation plugin is a game-changer. It gives you full control over variation-specific data using the intuitive ACF interface — without the cost or risk of custom development.

Get the Plugin Now to empower your product pages with smarter variation-level content today.