[Resolved] Woocommerce Product Categories Widget

[Stelios]

Hi there,

I’m wondering to what extent the aforementioned sidebar widget can be customized with CSS.

For instance, can the selected/current category be highlighted? Or, can it have a transparent box around the category?

Here’s a pic of the sidebar:

Woocommerce sidebar

This is the CSS related to that sidebar:

/* Woocommerce sticky sidebar*/

.site-content {
    display: flex;
}
.site-content > div {
    left: unset !important;
}

#left-sidebar {
    order: -1;
}

#left-sidebar .inside-left-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

/* Woocommerce sidebar*/

.widget_product_categories {
    margin-left: -45px;
}

.widget_product_categories .children {
    margin-left: 20px;
    margin-top: 5px;
}

@media (min-width: 769px) and (max-width: 1024px) {
.widget_product_categories {
				margin-left: px;
	}
}

@media (max-width: 768px) {
		.widget_product_categories {
			margin-left: 1px;
			margin-top: -20px;
	}
}

/* Sidebar position on top for mobile view */

@media (max-width: 768px) {
    .left-sidebar #content {
        display: flex;
        flex-direction: column;
    }

    #left-sidebar {
        order: -1;
    }
}

Thanks

[David]

Hi there,

you can style the current category like so:

.sidebar .widget .product-categories .current-cat > a {
    color: #f00;
}

[Stelios]

Thanks David, it works.

However, when I select the parent category all the child categories are highlighted too. I can live with it but if there’s a solution it’ll be nicer.

[David]

Updated the CSS above to target the immediate link.

[Stelios]

Thank you!

[David]

You’re welcome

[Author]

Posts