[Resolved] Woocommerce Product Categories Widget

Home Forums Support [Resolved] Woocommerce Product Categories Widget

Home Forums Support Woocommerce Product Categories Widget

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1459798
    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

    #1460033
    David
    Staff
    Customer Support

    Hi there,

    you can style the current category like so:

    .sidebar .widget .product-categories .current-cat > a {
        color: #f00;
    }
    #1460306
    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.

    #1460351
    David
    Staff
    Customer Support

    Updated the CSS above to target the immediate link.

    #1460389
    Stelios

    Thank you!

    #1460760
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.