Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce | Expand and collapse child categories with custom toggle in the sidebar widget | https://i.gyazo.com/e1a39ed551096444134324bb429722bb.mp4
/* - woo cat toggling elements, injected via jQuery - */
/* make list item be relative, to be able to position toggle within this item, if desired */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent {
position: relative;
}
/* the new toggle element wrapper, which is added via jQuery */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle {
cursor: pointer;
display: inline-block;
text-align: center;
margin-left: 0.5em;
width: 1.5em;
line-height: 1em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: all 0.4s ease;
width: 20px;
height: 20px;
background: rgba(0,0,0,0.05);
text-align: center;
line-height: 20px;
border-radius: 50%;
}
/* when it's popped, style the toggle wrapper differently */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background: rgba(0,24,113,1);
color: white;
}
/* toggle icon */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle::before {
font-weight: normal;
font-style: normal;
font-size: 24px;
text-transform: none;
speak: none;
content: '+';
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
}
/* toggle icon when triggered */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped::before {
content: '\2013';
}
/* hide sub cats by default */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle ~ ul.children {
overflow: hidden;
max-height: 0;
transition: all 0.4s ease;
}
/* show sub cats when triggered via jQuery toggle */
#sidebar .widget_product_categories ul.product-categories > li.cat-parent .woo-cat-toggle.cat-popped ~ ul.children {
max-height: 300px;
}
jQuery(function($){
// add a new toggle element after the parent category anchor
$( "<div class='woo-cat-toggle'></div>" ).insertAfter( "#sidebar .widget_product_categories .product-categories > .cat-item.cat-parent > a" );
// when the new toggle element is clicked, add/remove the class that controls visibility of children
$( "#sidebar .widget_product_categories .product-categories .woo-cat-toggle" ).click(function () {
$(this).toggleClass("cat-popped");
});
// if the parent category is the current category or a parent of an active child, then show the children categories too
$('#sidebar .widget_product_categories .product-categories > .cat-item.cat-parent').each(function(){
if($(this).is('.current-cat, .current-cat-parent')) {
$(this).children('.woo-cat-toggle').toggleClass("cat-popped");
}
});
});
@MihalisPapatsimpas

This comment has been minimized.

Copy link

@MihalisPapatsimpas MihalisPapatsimpas commented Oct 28, 2020

Hi @Garconis, I am new to woocommerce and I am trying to do exactly what you implemented above. But, where should I include those files in order to work? I have tried to include them to functions.php, but nothing changed.

Thanks in advance!

@lemonph

This comment has been minimized.

Copy link

@lemonph lemonph commented Nov 6, 2020

I use wordpress and installed a plugin called snippets. I pasted both css and js in one snippet and it works well.

@Garconis

This comment has been minimized.

Copy link
Owner Author

@Garconis Garconis commented Nov 6, 2020

Add the CSS to your theme in its CSS area, or within your child theme's style.css

Then add the JavaScript to the footer area (you can use a Header Footer plugin) and make sure it's wrapped with <script> tags.

@MihalisPapatsimpas

This comment has been minimized.

Copy link

@MihalisPapatsimpas MihalisPapatsimpas commented Nov 6, 2020

Στιγμιότυπο οθόνης 2020-11-06 234138
As you in the above screenshot, this is the default product-category styling provided by the woocommerce. After doing your modifications nothing changed.

I followed the steps as described:

  1. Add the css to the theme's style.css ( I have no child theme). I use storefront.
  2. With the Head, Footer and Post Injections plugin I added the js code to the footer area as displayed below.
    image

Am I missing something? Thank you for your time! @Garconis @lemonph

@Garconis

This comment has been minimized.

Copy link
Owner Author

@Garconis Garconis commented Nov 6, 2020

I'd need a link to your site to troubleshoot it. Otherwise, you may need to check your category structure to make sure it's within a #sidebar, etc. If not, you may need to change some of the rules to match your own category widget structure: #sidebar .widget_product_categories ul.product-categories > li.cat-parent

@MihalisPapatsimpas

This comment has been minimized.

Copy link

@MihalisPapatsimpas MihalisPapatsimpas commented Nov 6, 2020

Yes. I have the widget inside a sidebar. The code is imported but no change is happening. I am working locally since I am still new to it. I don't know if the following screenshot helps, but it shows the elements of the product-categories, with the script included.
image

@Garconis

This comment has been minimized.

Copy link
Owner Author

@Garconis Garconis commented Nov 6, 2020

In all instances of my code, change #sidebar to be #secondary instead.

@MihalisPapatsimpas

This comment has been minimized.

Copy link

@MihalisPapatsimpas MihalisPapatsimpas commented Nov 6, 2020

@Garconis, now all set. Everything is working!!
Thank you very much!!

@MihalisPapatsimpas

This comment has been minimized.

Copy link

@MihalisPapatsimpas MihalisPapatsimpas commented Nov 7, 2020

Hi, I would like to ask one more thing. How could I modify the code in order to display only the child product-categories when a parent category is selected (clicked)?
Thanks!

@DEBA1801

This comment has been minimized.

Copy link

@DEBA1801 DEBA1801 commented Nov 13, 2020

Great job. Removed an extra plugin and piece of code. Although anybody using the code should take into notice that, this piece of code needs to be modified as per the ID of the sidebar wrapper. Works well!

@lemonph

This comment has been minimized.

Copy link

@lemonph lemonph commented Nov 19, 2020

The only problem i got here is it's not working on Safari and Firefox browsers. Any suggestion? thanks

@lemonph

This comment has been minimized.

Copy link

@lemonph lemonph commented Nov 19, 2020

it's my fault. It works after cleaning cache.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.