Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    Display WooCommerce categories as accordion

    Display WooCommerce categories as accordion

    When you have a WooCommerce shop and sell goods online, it can be useful to have a sidebar with a list of all product categories, including subcategories. The default built-in feature are widgets, and they have been based on blocks since WordPress 5.8. We can navigate to wp-admin / Appearance / Widgets and select “Product Categories List” or “Legacy Widget” → “Product Categories”. You can also configure widgets by applying options ”Show product counts” or “Show hierarchy”. The downsides of using default widgets are that you can’t control output markup and the fact that the configuration of the list is limited.

    Custom WooCommerce Widget

    We’re going to create a custom function that is querying product_cat terms from the database – WooCommerce accordion. The Markup of the list is based on Bootstrap5. If you’re enqueuing BS5 in your project, the list will already be styled. We will skip the default WP category “Uncategorized” by hardcoding term_id in the code.

    /*
     * WooCommerce Product List as accordion (BS5)
     */
    function ct_render_cat_list()
    {
        global $wp_query;
        $current_cat = $wp_query->get_queried_object();
        $current_term_id = null;
        $current_parent_id = isset($current_cat->term_id) ? $current_cat->term_id : null;
        if(!is_null($current_parent_id)){
            if($current_cat->parent != 0) {
                $current_parent_id = $current_cat->parent;
            }
            $current_term_id = $current_cat->term_id;
        }
        /**
         * Product categories list
         */
        $args = array(
            'taxonomy' => 'product_cat',
            'hide_empty' => false,
            'parent' => 0
        );
        $product_cat = get_terms($args);
        echo '<h4>'. __('Categories') .'</h4>';
        echo '<div class="accordion" id="accordionExample">';
        foreach ($product_cat as $parent_product_cat) {
            $parent_id = $parent_product_cat->term_id;
            // skip 'Uncategorized'
            if($parent_product_cat->term_id == '15'){
                continue;
            }
            $button = '
                      <a class="accordion-button collapsed text-decoration-none" href="' . get_term_link($parent_product_cat->term_id) . '">
                        ' . $parent_product_cat->name . ' ('. $parent_product_cat->count .')
                      </a>
                ';
            if($parent_id == $current_parent_id) {
                $button = '<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse'. $parent_id .'" aria-expanded="true" aria-controls="collapse' . $parent_id .'">
                           ' . $parent_product_cat->name . ' ('. $parent_product_cat->count .')
                        </button>';
            }
            echo '
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            ' . $button .'
        </h2>
              ';
            if($parent_id == $current_parent_id) {
                $child_args = array(
                    'taxonomy' => 'product_cat',
                    'hide_empty' => false,
                    'parent' => $parent_product_cat->term_id
                );
                $child_product_cats = get_terms($child_args);
                if (!empty($child_product_cats)):
                    echo '<div id="collapse' . $parent_id . '" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                  <div class="accordion-body"> ';
                    echo "<ul class='navbar-nav me-auto mb-2 mb-md-0 '>";
                    foreach ($child_product_cats as $child_product_cat) {
                        $active_class = '';
                        if($current_term_id == $child_product_cat->term_id ) {
                            $active_class = 'active';
                        }
                        echo '<li class="nav-item"><a href="' . get_term_link($child_product_cat->term_id) . '" class="nav-link link-dark '. $active_class .'">' . $child_product_cat->name . ' ('. $child_product_cat->count .')</a></li>';
                    }
                    echo '</ul>';
                    echo '</div>
                    </div> <!-- / accordion-collapse -->';
                endif;
            }
            echo '</div> <!-- accordion-item -->';
        }
        echo '</div> <!-- / accordion -->';
    }
    

    Define WordPress Widget

    To have a WooCommerce Product List available on the Widgets list in the Admin Area, we need to define the proper PHP class that extends the WP_Widget class.

    /**
     * Define WordPress widget
     */
    class CT_Cat_list_Widget extends WP_Widget
    {
        function __construct()
        {
            parent::__construct(
                'CT_Cat_list_Widget',
                esc_html__('Product categories2', 'text_domain'),
                array('description' => esc_html__('Product categories as accordion', 'text_domain'),)
            );
        }
        /**
         * Front-end display of widget.
         *
         * @param array $args Widget arguments.
         * @param array $instance Saved values from database.
         * @see WP_Widget::widget()
         *
         */
        public function widget($args, $instance)
        {
            ct_render_cat_list();
        }
    }
    function register_ct_widget() {
        register_widget( 'CT_Cat_list_Widget' );
    }
    add_action( 'widgets_init', 'register_ct_widget' );
    

    Register WP Shortcode

    To use our ct_render_cat_list() function as page content, we can define the shortcode: [ct_render_cat_list] . We were using echo in the original function, but a proper shortcode needs returning the output. A simple solution will be to use ‘Output Buffering’ that will capture the HTML code and copy it to a variable.

    /**
     * Register WP shortcode
     */
    add_shortcode( 'ct_render_cat_list', 'ct_render_cat_list_func' );
    function ct_render_cat_list_func( $atts ) {
        ob_start();
        ct_render_cat_list();
        return ob_get_clean();
    }
    

    Bootstrap5 styles

    Our widget uses Bootstrap5 Accordion markup, we can enqueue BS5 styles from CDN using the wp_head action.

    /**
     * Enqueue Bootstrap CSS
     *
     */
    function ct_add_styles_to_head() {
        echo '<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">';
    }
    add_action('wp_head','ct_add_styles_to_head');
    

    Additional improvements

    An example would be to show how to query data from the database, prepare output compatible with Bootstrap v.5, or define the widget and shortcode in WordPress CMS. Currently, some texts / values are hardcoded in PHP code. The next step will be to add proper widget settings or shortcode arguments, for example: ‘List title’ or ‘ID of category to be skipped’.

    We hope you find the information above useful. Make sure to follow us for other tips and guidelines.

    Comments
    2 response
    1. Hello! This code brings the accordion looking element to website with correct content, but the accordion itself is now working (WP, Woo, Divi + child theme).
      Any ideas why this doesn’t work.

      • Hello, thanks for your comment. If the accordion isn’t functioning as expected, there could be several reasons for this. Here are a few things to check:

        1. Bootstrap 5: The accordion functionality in this code relies on Bootstrap 5. Ensure that Bootstrap 5’s JavaScript file is correctly enqueued in your project. The CSS alone is not enough for the interactive elements like accordion to work.

        2. jQuery: The WordPress version of Bootstrap 5 might require jQuery to work properly. Ensure that jQuery is correctly enqueued in your WordPress project.

        3. JavaScript Errors: Check your browser’s console for JavaScript errors. These errors could prevent the accordion from working. If you see errors, try to resolve them.

        4. Conflicting Scripts: Other JavaScript files or libraries loaded by your theme or other plugins could be causing conflicts that stop the accordion from working. Try temporarily deactivating other plugins to see if the issue resolves, which would indicate a conflict.

        If you’ve checked all of these and are still having issues, it would be helpful to have more information. Could you share any error messages you’re seeing in your console or any other details about what happens when you try to use the accordion?

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us