Sidebar Categories highlight

bartekszopa
(@bartekszopa)

2 years, 9 months ago

Hi, I set sidebar widget with product categories on Botiga.

Is there option to make category highlighted with css class when active?

Or is that maybe possible on Pro version?

Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

(@kharisblank)

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.product-categories .current-cat > a {
        color: #ff0000;
        background-color: #ddd;
}

Thread Starter

bartekszopa

(@bartekszopa)

2 years, 9 months ago

Thank you! thats useful.

Im using botiga and dont see such .current-cat class in html.

While Im in one of categories, its html shows:

<div data-block-name="woocommerce/product-categories" class="wp-block-woocommerce-product-categories wc-block-product-categories is-list " style="">

<ul class="wc-block-product-categories-list wc-block-product-categories-list--depth-0">

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/swiece-wolnostojace/">
<span class="wc-block-product-categories-list-item__name">Świece wolnostojące</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">1</span>
<span class="screen-reader-text">1 produkt</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/kominki-zapachowe/">
<span class="wc-block-product-categories-list-item__name">Kominki zapachowe</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">5</span>
<span class="screen-reader-text">5 produktów</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/kubki/">
<span class="wc-block-product-categories-list-item__name">Kubki</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">9</span>
<span class="screen-reader-text">9 produktów</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/bokserki-meskie/">
<span class="wc-block-product-categories-list-item__name">Bokserki męskie</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">6</span>
<span class="screen-reader-text">6 produktów</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/prezent-dla-niego/">
<span class="wc-block-product-categories-list-item__name">Prezent dla niego</span>
</a><span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">20</span>
<span class="screen-reader-text">20 produktów</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/prezent-dla-niej/">
<span class="wc-block-product-categories-list-item__name">Prezent dla niej</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">12</span>
<span class="screen-reader-text">12 produktów</span>
</span>
</li>

<li class="wc-block-product-categories-list-item">
<a style="" href="../sweetchill/kategoria-produktu/zapakuj-na-prezent/">
<span class="wc-block-product-categories-list-item__name">Zapakuj na prezent</span>
</a>
<span class="wc-block-product-categories-list-item-count">
<span aria-hidden="true">1</span>
<span class="screen-reader-text">1 produkt</span>
</span>
</li>

</ul>

</div>

Kharis Sulistiyono

(@kharisblank)

2 years, 9 months ago

Hi @bartekszopa,

Thank you for getting back.

My guess you are having categories list in a particular section of your page. It would be better if you could have included this field in your query. So I could have suggested the exact CSS code to recommend for fixing the issue.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Sidebar Categories highlight’ is closed to new replies.