Circle categories

Hi, I want to know how do i put the categories like this (circle shape)

Attachments:

You must be logged in to view attached files.

Hello,

Please set a similar design in the Theme Settings > Shop > Categories styles or if you use the Product category element or widget, chose the design with the image and title below and we will give you custom CSS to make as per your needs.

Best Regards

Done, I’ve already have that one selected. I just need the custom CSS for the circle categories.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .cat-design-alt img {
    border-radius:50%;
}
body .category-grid-item:hover .category-image {
    -webkit-transform:none;
    transform: none;
}

Best Regards

How do I reduce the size of the circles? they are big

Attachments:

You must be logged in to view attached files.

Hello,

Replace the code with this one:

body .cat-design-alt img {
    border-radius:50%;
    width:50%;
    height :auto;
}
body .category-grid-item:hover .category-image {
    -webkit-transform:none;
    transform: none;
}

Change 50% as per your needs.

Best Regards

Hi, on the demo accessories, I want the exact same layout for the categories (circle) and with the code you provided I don’t get it like that, I attached an image so you can see what I get (a rectangle around the circle)

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the page URL I will give the code.

Best Regards

I put the ink on private content. Please let me know

Hello,

Disable the shadow in the element or add this custom:

body .cat-design-alt.categories-with-shadow .category-image-wrapp {
    box-shadow: none;
}

Best Regards

[Author]

Posts