0

i have one simple problem:

i want to add some function to ::before, which represent (in my case) Down Arrow.

IMAGE

On this picture you could see product categories by default Woocommerce widget. The orange background means Active Parent Category.

PROBLEM: Whenever you click on parent category, it will automatically dropdown child categories, so you can't practically click on parent category and see all products from that cat. By now, it is possible to see products just if you click on child category or if you click on parent category which doesn't have any child category.

PLAN: I want this: when you click on text from one parent category, you could see products from this parent category. OR, if you want to see child categories, you have to click on Down Arrow (:before in code) and dropdown shows, so you can choose which child category do you exactly want.

Here is my code:

HTML:

<div class="widget woocommerce widget_product_categories">
<h4>Kategorije proizvoda</h4>
    <ul class="product-categories">
<li class="cat-item cat-item-1076"> <a href="https://www.akord-zupanja.hr/kategorija-proizvoda/akcija/">Akcija</a></li>
<li class="cat-item cat-item-388 cat-parent current-cat-parent"> ::before <a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/">Alati i pribor</a>
    <ul class="children">
        <li class="cat-item cat-item-412 cat-parent"><a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/akumulatorski-alati/">Akumulatorski alati</a>    <ul class="children">
        <li class="cat-item cat-item-952"><a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/akumulatorski-alati/aku-blanjalice/">Aku blanjalice</a></li>
        <li class="cat-item cat-item-414 cat-parent"><a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/akumulatorski-alati/aku-brusilice/">Aku brusilice</a>        <ul class="children">
        <li class="cat-item cat-item-949"><a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/akumulatorski-alati/aku-brusilice/brusilice-za-poliranje/">Brusilice za poliranje</a></li>
        <li class="cat-item cat-item-950"><a href="https://www.akord-zupanja.hr/kategorija-proizvoda/alati-i-pribor/akumulatorski-alati/aku-brusilice/brusilice-za-zid-zirafa/">Brusilice za zid (Žirafa)</a></li>
    </ul>

CSS:

.widget.woocommerce.widget_product_categories h4, .widget.eltdf-blog-list-widget>h4 {
padding-bottom: 5px;
border-bottom: 2px solid #dfb947;} 

.widget.woocommerce.widget_product_categories ul li {
margin: 4px;
padding-left: 0;}

.widget.woocommerce.widget_product_categories ul li ul {
margin: 0 !important;}

.widget.woocommerce.widget_product_categories ul li ul li a {
/* margin: 0 0 0 10px; */
padding-left: 15px;}

.widget.woocommerce.widget_product_categories ul li {
margin: 0 !important;}

CSS FOR ::BEFORE

.cat-item.cat-parent:before {
position: absolute;
content: "";
top: 11px;
right: 11px;
width: 20px;
height: 20px;
background-size: 15px;
background-position: center;
background-repeat: no-repeat;
background-image: url(https://www.akord-zupanja.hr/wp-content/uploads/2019/04/navigacijastreldole-crna.png);

}

If you need anything more, fell free to ask me in comment area.

Thank you very very much!!!

Željko Ronta
  • 35
  • 7
  • not possible, if you want to attach an event to the arrow, you will have to style an actual tag and not use a pseudo element – Pete Feb 09 '21 at 13:54
  • do you have an idea how to open parent category then? i don't want to use hover effect because it's not practical for this kind of dropdown - there is so much child categories and it's hard to handle if there is dropdown by hover. – Željko Ronta Feb 09 '21 at 14:11

0 Answers0