/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 4.6.2.1772449854
Updated: 2026-03-02 11:10:54

*/

Perfect 👍 — we’ll go with Option 3 so your roll‑down curtain menu in Storefront automatically lists all your WooCommerce product categories without you having to create or update a menu manually.
Here’s exactly what to do:

1. Add the Curtain Menu Code
Open your child theme’s functions.php and paste this at the bottom:
Php<?php
// Add a roll-down curtain menu with WooCommerce product categories
function my_dynamic_category_menu() {
    ?>
    <button id="curtain-toggle">☰ Categories</button>
    <div id="curtain-menu" class="hidden">
        <ul class="curtain-menu-list">
            <?php
            // List all WooCommerce product categories
            wp_list_categories( array(
                'taxonomy'   => 'product_cat',
                'title_li'   => '',
                'hide_empty' => false
            ) );
            ?>
        </ul>
    </div>
    <?php
}
add_action( 'storefront_header', 'my_dynamic_category_menu', 40 );


2. Add the CSS Styling
Go to Appearance → Customize → Additional CSS and paste:
Css/* Curtain menu container */
#curtain-menu {
    display: none;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
}

/* Category list styling */
.curtain-menu-list {
    list-style: none;
    margin: 0;
    padding: 20px;
}

.curtain-menu-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.curtain-menu-list li a {
    text-decoration: none;
    color: #333;
}

.curtain-menu-list li a:hover {
    color: #0073aa;
}

/* Toggle button styling */
#curtain-toggle {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px;
}