Add Collapse funcions

I understand. I set the color by yourself, but I want to use them in child themes. An example :

.xo10-product-categories-list-holder > ul > li {
background: #a52a2a;
}

but the child theme I’m working this code

in what shape it comes to child themes?

It might not be bad even add a choice between a flat white or gray variant;) in widget setting that people have a choice. Can I send my CSS code ideas as to look like a white version

Sure, I can take a look at your CSS ideas.

If you have a flat black version, it will be great also.

CSS code does not work in child themes. Please confirms a pattern of CSS code to childthemes take to change color send me exemple thx

/* -----------------------------------------------------------------------------
 *
 * How to override widget CSS styles in your theme or custom stylesheet
 *
 * 1. Add ".widget" class before the ".xo10-product-categories-list-holder" class.
 * 2. Add "!important" rule if required.
 *
 * -------------------------------------------------------------------------- */

/*
 * Example 1: change background colors.
 */
.widget .xo10-product-categories-list-holder > ul > li,
.widget .xo10-product-categories-list-holder > ul > li > a {
  background: white; /* 1st level */
}

.widget .xo10-product-categories-list-holder > ul > li > ul > li {
  background: white; /* 2nd-level */
}

.widget .xo10-product-categories-list-holder > ul > li > ul > li > ul > li {
  background: white; /* 3rd-level */
}

/*
 * Example 2: change 2nd-level hyperlink colors.
 */
.widget .xo10-product-categories-list-holder ul > li li a {
  color: magenta !important;
}

Ok here it is the white version :

.widget .xo10-product-categories-list-holder > ul > li {
  background: #FFFFFF;
}

.widget .xo10-product-categories-list-holder > ul > li > ul > li {
  background: #FFFFFF;
}

.widget .xo10-product-categories-list-holder ul > li li a {
  color: #4A4A4A !important;
}

.widget .xo10-product-categories-list-holder > ul > li > a {
  font-size: 14px;
  line-height: 20px;
  padding: 14px 22px;
  background: #FFFFFF;
  color: #4A4A4A !important;
}

.widget .xo10-product-categories-list-holder > ul > li:not(:last-child) > a, .xo10-product-categories-list-holder > ul > li:not(:last-child) > .accordion-btn-wrap {
  border-bottom: 1px solid #FFFFFF !important;
}

.widget .xo10-product-categories-list-holder > ul > li > ul > li > a, .xo10-product-categories-list-holder > ul > li > ul > li > .accordion-btn-wrap {
  border-bottom: 1px solid #FFFFFF !important;
}

.widget .xo10-product-categories-list-holder > ul > li:not(:last-child) > .accordion-btn-wrap {
    border-bottom: 0px solid #FFFFFF !important;
}

Can not add cell surface to click at the category which has subcategories? example here

https://screenshot.cz/HQ/HQUYC/cek.png

And one more thing. Can not do with that when you click on a category and subcategory that it does not close but will remain even after the redirect is still open?

I found myself one mistake, if the long name category, so that category name under the picture

Sorry for the long absence.

I’ve taken a look at your stylesheet and it works. However, it’s only for 2-levels instead of the 4-levels. It’s my fault for making things so complicated in order to support so many different scenarios.

I’ve taken some time to re-think and re-code the plugin to use a different approach which should mean less CSS customisation for you.

So re-download the plugin again.

This time choose “Plain – Accordion” from the “Look – Effects” field.

If you need to customise the accordion. The CSS class has been changed from “xo10-product-categories-list-holder” to “xo10-accordion-list-holder”.

I don’t quite understand what you mean by “cannot add cell surface to click”.

Maybe you can try adding headersOnly=true to the Effects options (optional) field. Save the widget. Refresh the widget and see if its what you want?