Specialized Accordion Templates

Let’s create specialized accordion templates for each child category, so every child category can have its own unique accordion design and behavior. This approach ensures flexibility, allowing you to tailor the product spec layout for each child category.

---

Big Picture

1. Dynamic Template Loading: Each child category uses its own unique accordion design.
2. Child-Category-Specific Accordions: Specialized HTML and CSS for the product items.
3. Reusable Components: Keep the implementation modular and maintainable.

---

Step 1: Create Specialized Accordion Templates

We’ll create separate PHP files for each child category and include them dynamically in the main category template.

Directory Structure

Organize your custom files in the child-theme folder:

/your-child-theme/
  /woocommerce/
    archive-product.php
    /accordions/
      accordion-electronics.php
      accordion-clothing.php
      accordion-furniture.php

Specialized Accordion Files

Example: accordion-electronics.php

<div class="accordion-item-electronics">
    <h3 class="product-title"><?php the_title(); ?></h3>
    <div class="product-price"><?php echo $product->get_price_html(); ?></div>
    <button class="accordion-toggle">View Electronics Specifications</button>
    <div class="accordion-content">
        <ul>
            <li><?php echo do_shortcode('[wave_length]'); ?></li>
            <li><?php echo do_shortcode('[trans_wave]'); ?></li>
        </ul>
    </div>
</div>

Example: accordion-clothing.php

<div class="accordion-item-clothing">
    <h3 class="product-title"><?php the_title(); ?></h3>
    <div class="product-price"><?php echo $product->get_price_html(); ?></div>
    <button class="accordion-toggle">View Clothing Specifications</button>
    <div class="accordion-content">
        <ul>
            <li><?php echo do_shortcode('[fabric_type]'); ?></li>
            <li><?php echo do_shortcode('[care_instructions]'); ?></li>
        </ul>
    </div>
</div>

Example: accordion-furniture.php

<div class="accordion-item-furniture">
    <h3 class="product-title"><?php the_title(); ?></h3>
    <div class="product-price"><?php echo $product->get_price_html(); ?></div>
    <button class="accordion-toggle">View Furniture Specifications</button>
    <div class="accordion-content">
        <ul>
            <li><?php echo do_shortcode('[material]'); ?></li>
            <li><?php echo do_shortcode('[dimensions]'); ?></li>
        </ul>
    </div>
</div>

---

Step 2: Dynamically Load Accordion Templates

Modify your main category template (archive-product.php) to include the specialized accordion files dynamically.

Updated Product Loop in archive-product.php

<?php
if (woocommerce_product_loop()) {
    woocommerce_product_loop_start();
    while (have_posts()) {
        the_post();

        // Get Current Category and Determine Child-Specific Template
        $category = get_queried_object();
        $category_slug = $category ? $category->slug : null;

        // Include Specialized Accordion Templates
        if ($category_slug) {
            $template_path = locate_template("woocommerce/accordions/accordion-{$category_slug}.php");
            if ($template_path) {
                include $template_path; // Load the child-category-specific accordion
            } else {
                // Fallback for categories without a specialized template
                echo '<p>No specialized template available for this category.</p>';
            }
        }
    }
    woocommerce_product_loop_end();
} else {
    do_action('woocommerce_no_products_found');
}
?>

---

Step 3: Style Each Specialized Accordion

Each child category can have its own styling. Add CSS rules specific to each accordion type in your child theme’s style.css.

Example CSS for Electronics Accordion

.accordion-item-electronics {
    background-color: #f9f9ff;
    border: 1px solid #dfe4f7;
    padding: 15px;
    margin-bottom: 10px;
}

.accordion-item-electronics .accordion-toggle {
    background-color: #dfe4f7;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 10px 15px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}

.accordion-item-electronics .accordion-content {
    display: none;
    padding: 10px;
    border-top: 1px solid #dfe4f7;
    background-color: #ffffff;
}

Example CSS for Clothing Accordion

.accordion-item-clothing {
    background-color: #fff8f2;
    border: 1px solid #f4e1d1;
    padding: 15px;
    margin-bottom: 10px;
}

.accordion-item-clothing .accordion-toggle {
    background-color: #f4e1d1;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 10px 15px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}

.accordion-item-clothing .accordion-content {
    display: none;
    padding: 10px;
    border-top: 1px solid #f4e1d1;
    background-color: #ffffff;
}

---

Step 4: Add JavaScript for Accordion Toggle

Ensure all specialized accordions share the same JavaScript behavior.

Add to custom-accordion.js

jQuery(document).ready(function ($) {
    $('.accordion-toggle').click(function () {
        $(this).toggleClass('active');
        $(this).next('.accordion-content').slideToggle();
    });
});

---

Step 5: Test and Debug

1. Navigate to child category pages:

   • Electronics should load the accordion-electronics.php layout.
   • Clothing should load the accordion-clothing.php layout.

2. Check:

   • Each accordion style and behavior.
   • Shortcode execution for specs.

3. Debug:

   • If a child category doesn’t load, verify the $category_slug matches the template filename.

---

Step 6: Modular Additions

Adding a new child category is now simple:

1. Create a new accordion-{child-category-slug}.php file.
2. Define its unique layout and shortcodes.
3. Add CSS for its styling.

---

Bonus: Fallback Default Accordion

Add a default accordion for categories without specialized templates:

Default Accordion Template: accordion-default.php

<div class="accordion-item-default">
    <h3 class="product-title"><?php the_title(); ?></h3>
    <div class="product-price"><?php echo $product->get_price_html(); ?></div>
    <button class="accordion-toggle">View Specifications</button>
    <div class="accordion-content">
        <ul>
            <li>Default spec 1</li>
            <li>Default spec 2</li>
        </ul>
    </div>
</div>

Include Default Accordion in the Loop

In archive-product.php:

if ($category_slug) {
    $template_path = locate_template("woocommerce/accordions/accordion-{$category_slug}.php");
    if ($template_path) {
        include $template_path;
    } else {
        include locate_template('woocommerce/accordions/accordion-default.php');
    }
}

---

Final Output

• Each child category has its own custom accordion design and behavior.
• Adding new categories is simple and modular.
• The layout is responsive and styled for a polished look.

Let me know if you’d like to refine any specific part! 🚀