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:
- Advanced Custom Fields (ACF) – Free or Pro
- ACF for WooCommerce Variation – From KrazyPlugins
- WooCommerce – Already installed if you’re running an online store
Step 2: Create ACF Fields for Variations
- Go to Custom Fields > Add New in your WordPress admin.
- Create a field group (e.g., “Variation Details”).
- 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)
- Under Location Rules, set:
- Post Type is equal to Product Variation
- Click Publish.
Now, these fields will appear in the backend when editing individual product variations.
Step 3: Assign Variation Data
- Go to Products > Edit any variable product.
- Open the Variations tab.
- For each variation, you’ll now see the ACF fields defined earlier.
- Upload your brochure file, video link, or custom text.
- 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:
- Copy the
variation.php
template file from the following WooCommerce directory:woocommerce/templates/single-product/add-to-cart/variation.php
- Paste it into your active theme (or child theme) under the same relative path:
your-theme/woocommerce/single-product/add-to-cart/variation.php
- 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:
- Drag an HTML widget or Text Editor widget where you want to display the custom field.
- 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.