1. BLACK FRIDAY SALE Get 85% OFF Pro membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Side Bar Categories

Discussion in 'Free Divi Community Forum' started by Karen Browning, Nov 8, 2023.

  1. Karen Browning

    Karen Browning New Member

    Hi,

    I have a side bar with product categories, which is going to be huge by the time I've added them all. How do I have it just showing the 1st tier for example Suppliers, Servo Motors, Stepper Motors. Then you click on the category to expand it?
    The 1st image is our wordpress site, the 2nd 2 are how it looks on the current site which is how I'd like it to work on the new wordpress site.

    Thanks
     

    Attached Files:

    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    That would require custom code.

    I roughly did the coding. Try the below code in WP Admin > Divi > Theme Options > Integration > Body Code & see if it works:
    Code:
    <style>
        .wc-block-product-categories-list--depth-1 {
            display: none;
        }
        .wc-block-product-categories-list--depth-0>li.open .wc-block-product-categories-list--depth-1 {
            display: block;
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            $('.wc-block-product-categories-list--depth-0>li').click(function(e) {
                if ($(this).find('li').length > 0) {
                    e.preventDefault();
                    $(this).toggleClass('open');
                }
            });
        });
    </script>
     
    Karen Browning likes this.
  3. Karen Browning

    Karen Browning New Member

    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below instead & see if it works:
    Code:
    <style>
        .wc-block-product-categories-list--depth-0, .wc-block-product-categories-list-item.open>ul{
            display: block!important;
        }
        .wc-block-product-categories-list {
            display: none;
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            $('.wc-block-product-categories-list-item>a').click(function(e) {
                if ($(this).parent().find('li').length > 0) {
                    e.preventDefault();
                    $(this).parent().toggleClass('open');
                }
            });
        });
    </script>
     
  5. Karen Browning

    Karen Browning New Member

    That looks good, would it be possible for when you click on a product for example under servo motors, if I select rotary
    https://www.servernetworks.uk/product-category/servo-motors/rotary/ the relevant category stays open?
    currently the side bar closes so just the 1st level categories are showing.
    The servo_rotary1.jpg is how it currently looks.
    I'd like it to look like servo_rotary2.jpg
     

    Attached Files:

    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below & see if it works:
    Code:
    <script>
    jQuery(function($) {
          // Get the text of .woocommerce-products-header__title
          var pageTitle = $('.woocommerce-products-header__title.page-title').text().trim();
    
          // Find matching elements in .wp-block-woocommerce-product-categories
          $('.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item__name').each(function() {
            var categoryText = $(this).text().trim();
    
            // Check for text match
            if (pageTitle === categoryText) {
              // Find closest parents and add 'open' class
              $(this).closest('.wc-block-product-categories-list-item')
                .closest('.wc-block-product-categories-list-item')
                .addClass('open');
            }
          });
    });
    </script>