Elementor + ACF Product Accordions System

A complete solution for managing dynamic product accordions in WooCommerce using Elementor and Advanced Custom Fields (ACF).

📦 What's Included

1. JavaScript Optimizer - Automatically cleans empty accordions and fixes video loading
2. ACF Field Group - Pre-configured fields for 5 product accordions
3. Complete Integration - Works seamlessly with Elementor's nested accordion widget

🚀 Quick Start

Step 1: Import ACF Fields

1. In WordPress admin, go to Custom Fields → Tools
2. Click Import Field Groups
3. Copy the contents of acf-product-accordions.json
4. Paste and import

Step 2: Add JavaScript

Add to your theme's functions.php:

add_action('wp_footer', function() {
    if (is_product()) { // Only on WooCommerce product pages
        ?>
        <script>
        // Paste contents of elementor-accordion-optimizer.js here
        </script>
        <?php
    }
});

Step 3: Configure Elementor

1. Edit your product template in Elementor
2. Add a Nested Accordion widget
3. For each accordion item:
   • Title: Use ACF dynamic tag → accordion_1_title
   • Content: Use ACF dynamic tag → accordion_1_content
4. Repeat for accordions 2-5
5. The JavaScript will automatically hide empty accordions

📋 ACF Fields Overview

The field group includes:

• 5 Accordion Sections (each with enable toggle, title, and WYSIWYG content)
• Product Video URL field (bonus field for video embeds)
• Conditional Logic - Fields only show when enabled
• WooCommerce Integration - Automatically appears on product edit screens

Field Names Reference

enable_accordion_1 → accordion_1_title → accordion_1_content
enable_accordion_2 → accordion_2_title → accordion_2_content
enable_accordion_3 → accordion_3_title → accordion_3_content
enable_accordion_4 → accordion_4_title → accordion_4_content
enable_accordion_5 → accordion_5_title → accordion_5_content
product_video (URL field)

✨ Features

• ✅ Automatically removes empty accordion items
• ✅ Fixes YouTube/Vimeo embeds not loading
• ✅ Fixes iframe content appearing blank
• ✅ Toggle-based UI for clean admin experience
• ✅ Conditional fields reduce clutter
• ✅ Works with WooCommerce products
• ✅ Performance optimized
• ✅ Compatible with ACF Free & Pro

🎯 Use Cases

Perfect for:

• Product specifications
• Shipping & returns information
• Size guides
• Technical details
• FAQ sections
• Video demonstrations

🔧 Customization

Change Number of Accordions

Edit the ACF JSON and duplicate/remove accordion field sets. Update your Elementor template accordingly.

Target Different Post Types

In acf-product-accordions.json, change:

"location": [
    [
        {
            "param": "post_type",
            "operator": "==",
            "value": "product"  // Change to "post", "page", etc.
        }
    ]
]

Adjust JavaScript Timing

If accordions load slowly, increase the timeout in the JavaScript:

setTimeout(() => {
    requestAnimationFrame(() => initNestedAccordions(document));
}, 600); // Increased from 400ms

🐛 Troubleshooting

Empty accordions still showing?

• Check that ACF fields are actually empty (no spaces, line breaks, etc.)
• Clear Elementor cache
• Increase JavaScript timeout

Videos not loading?

• Ensure video URLs are valid
• Check browser console for errors
• Verify iframe src attributes are set

Fields not appearing in admin?

• Ensure ACF is activated
• Check field group is assigned to correct post type
• Verify conditional logic settings

📚 Requirements

• WordPress 5.0+
• WooCommerce 3.0+
• Elementor Pro (for nested accordion widget)
• Advanced Custom Fields (Free or Pro)

📄 License

Free to use and modify for your projects.