widget category with scroolbar and box checked

Good evening, how can I make the category widget with a scrollbar and a checked box? in your theme?
Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You need to configure the default Woocommerce product category widget in Appearance > Widget > Shop page widget

You can add scroll in the Theme Settings > Product Archives > Widgets > enable Scroll for filters widgets
and set the widget height.

If you have any questions please feel free to contact us.

Best Regards

I did what you said, nothing happens, please check it yourself please.

Attachments:

You must be logged in to view attached files.

I put this code and it works, but the box is not remain checked can you help me?

div#woocommerce_product_categories-2 {
max-height: 300px;
overflow: auto;
}
div#woocommerce_product_categories-2 a:before {
content: “”;
display: inline-block;
margin-top: -2px;
margin-inline-end: 8px;
width: 14px;
height: 14px;
border: 2px solid var(–brdcolor-gray-300);
vertical-align: middle;
transition: all .2s ease;
}
div#woocommerce_product_categories-2 a:after{
position: absolute;
top: 3px;
inset-inline-start: 2px;
color: #fff;
font-weight: 600;
font-size: 10px;
opacity: 0;
content: “\f107”;
font-family: “woodmart-font”;
}
div#woocommerce_product_categories-2 a.wd-active:before {
background-color: var(–wd-primary-color);
border-color: var(–wd-primary-color);
}
div#woocommerce_product_categories-2 a.wd-active:after {
opacity: 1;
}

Hello,

Please replace your custom CSS with this one:

.widget_product_categories .product-categories li a {
	position: relative;
}

.widget_product_categories .product-categories li a:before {
 content: "";
 display: inline-block;
 margin-top: -0.2em;
 margin-inline-end: 8px;
 width: 1em;
 height: 1em;
 border: 2px solid var(--brdcolor-gray-300);
 vertical-align: middle;
 transition: all .2s ease;
}

.widget_product_categories .product-categories li a:after {
	position: absolute;
  top: 1.2em;
  inset-inline-start: 0.2em;
  color: #fff;
  font-weight: 400;
  font-size: .7em;
  opacity: 0;
  content: "\f107";
  font-family: "woodmart-font";
}

.widget_product_categories .product-categories li a:hover:before {
	position: relative;
	border-color: var(--wd-primary-color);
}

.widget_product_categories .product-categories li.current-cat a:before {
	background-color: var(--wd-primary-color);
  border-color: var(--wd-primary-color);
}

.widget_product_categories .product-categories li.current-cat a:after {
	opacity: 1;
}

If you have any questions please feel free to contact us.

Best Regards

thank you su much…tichet close

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts