Replace Woocommerce Product Categories Bulet Point

Shapely
1

Hi,

Is there anyway I can replace the bullet point with a thick line like in the image attached.

Thank you

P.S. Sorry for all the questions

2

Hi @shahidul,

Thank you for your another question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

.content ul li {
    list-style: none;
    border-left: 3px solid #F0C417;
    padding-left: 6px;
}

Best Regards,
Movin

3

Hi Movin,

Unfortunately this code had no affect.

Any other suggestions.

Thanks

4

Could you please share me the page URL from your site where it is not working so that i can troubleshoot it?

5

The URL.

I would like to also mention that the shop page is a page that the woocommerce plugin created. In this sense the product category pages that you see are woocommerce pages and not ‘true’ pages.

6

Hi Movin,

Sorry to say this but I have abandoned the idea of replacing the bullet points.

I would now like to just remove the bullet points symbols entirely.

Sorry for the trouble.

7

Use the below CSS code to make it work on that page.

.widget ul li {
    list-style: none;
    border-left: 3px solid #F0C417;
    padding-left: 6px;
    margin-top: 5px;
}
I would now like to just remove the bullet points symbols entirely.

You can achieve this by using the below css code instead.

.widget ul li {
    list-style: none;
}
8

Hi Movin,

Now that the code you have provided works and I like how it looks after testing, I’m sorry to ask this but can you tell me how to only show the border on hover state and active state.

In an inactive state the categories will have no borders. when hovered over, the border will appear. When selected the border will remain on that category.

Thank you once again.

9

Sorry got it working. Had the border colour has white so didn’t see no change.

But for some reason when on active state it doesn’t stay. Below is the code I am using.

.widget ul li {
    list-style: none;
    padding-left: 6px;
    margin-top: 5px;
}
.widget ul li:hover {
    list-style: none;
    border-left: 3px solid #000;
    padding-left: 6px;
    margin-top: 5px;
}
.widget ul li:active {
    list-style: none;
    border-left: 3px solid #000;
    padding-left: 6px;
    margin-top: 5px;
}
10

You are most welcome here :slight_smile:

To help us keep support thread separates could you please create new thread for your other questions here https://colorlibsupport.com/c/shapely/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.