Step 1: Understand the Big Picture

Creating conditional templates for WooCommerce categories, where each category displays its products with accordion-style product specs tailored to the category, is a more advanced customization. Let’s break it down step-by-step!

Step 1: Understand the Big Picture

We’re aiming to:

Create unique templates for specific product categories.
Add an accordion layout to display product specifications.
Customize the specs dynamically, based on the category.

Step 2: Setting Up the Environment

Before diving into code:

Child Theme: Ensure you’re working in a child theme.
Backup Your Site: Use tools like UpdraftPlus to create a backup.
Install Advanced Custom Fields (ACF) Plugin (Optional): For managing custom fields if needed.

Step 3: Create Conditional Templates for Categories

3.1 Copy the `archive-product.php` Template

Navigate to your theme’s WooCommerce template folder:

wp-content/themes/your-theme/woocommerce/archive-product.php

Copy this file to your child theme:

wp-content/themes/your-child-theme/woocommerce/archive-product.php

3.2 Create Separate Templates for Categories

Duplicate the archive-product.php file and rename it for each category. For example:
- archive-product-electronics.php
- archive-product-clothing.php

Add this to the top of each new file:

<?php
/**
 * Template Name: Electronics Category
 */

3.3 Link Templates to Categories

To tell WooCommerce which template to use, add a filter in your functions.php file:

add_filter('template_include', 'custom_category_template');
function custom_category_template($template) {
    if (is_product_category('electronics')) {
        $new_template = locate_template('woocommerce/archive-product-electronics.php');
        if ($new_template) return $new_template;
    } elseif (is_product_category('clothing')) {
        $new_template = locate_template('woocommerce/archive-product-clothing.php');
        if ($new_template) return $new_template;
    }
    return $template;
}

Replace 'electronics' and 'clothing' with your actual category slugs.

Step 4: Add Accordion Layout for Products

4.1 Modify the Product Loop

In your custom category template (e.g., archive-product-electronics.php), replace the default product loop with a custom loop that includes an accordion structure.

Here’s an example:

<?php
if (woocommerce_product_loop()) {
    woocommerce_product_loop_start();
    while (have_posts()) {
        the_post();
        
        // Get Product Data
        global $product;
        $specs = get_post_meta(get_the_ID(), 'product_specs', true); // Example for custom fields
        
        // Start Product HTML
        ?>
        <div class="product-item">
            <h2 class="product-title"><?php the_title(); ?></h2>
            <div class="product-price"><?php echo $product->get_price_html(); ?></div>

            <!-- Accordion for Specs -->
            <div class="product-specs-accordion">
                <button class="accordion-toggle">View Specifications</button>
                <div class="accordion-content">
                    <?php if ($specs) : ?>
                        <ul>
                            <?php foreach ($specs as $key => $value) : ?>
                                <li><strong><?php echo esc_html($key); ?>:</strong> <?php echo esc_html($value); ?></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php else : ?>
                        <p>No specifications available.</p>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php
    }
    woocommerce_product_loop_end();
} else {
    do_action('woocommerce_no_products_found');
}
?>

4.2 Style the Accordion with CSS

Add this to your child theme’s style.css:

.product-specs-accordion {
    margin-top: 10px;
}

.accordion-toggle {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.accordion-content {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
}

.accordion-toggle.active + .accordion-content {
    display: block;
}

4.3 Add JavaScript for Accordion Behavior

Enqueue a custom JavaScript file in your child theme’s functions.php:

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-accordion', get_stylesheet_directory_uri() . '/js/custom-accordion.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Create a file called custom-accordion.js in your child theme’s js folder and add:

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

Step 5: Add Dynamic Specifications for Categories

5.1 Use Custom Fields for Specifications

If your product specifications vary by category, you can use custom fields:

Install and activate Advanced Custom Fields (ACF).
Create a custom field group and assign it to products in a specific category.
Add fields like “Battery Life,” “Material,” or “Weight” based on category requirements.

5.2 Retrieve Custom Fields in the Loop

In the product loop, replace this line:

$specs = get_post_meta(get_the_ID(), 'product_specs', true);

With:

$specs = get_field('product_specs'); // ACF function

Step 6: Test Your Templates

Navigate to a category page to see your new layout in action.
Verify that:
- The correct template is loaded for each category.
- The accordion works as expected.
- Specifications match the category’s products.

Step 7: Fine-Tune and Optimize

Performance: Minimize custom scripts and styles.
Responsiveness: Test on mobile and adjust CSS as needed.
SEO: Ensure category descriptions and product titles are visible to search engines.

End Result

You now have:

Custom category-specific templates.
Accordion-style product specifications tailored for each category.
A maintainable system for future tweaks.

Step 1: Understand the Big Picture