Return to previous page

How can I change the image shape displaying for category

This topic has 12 replies, 2 voices, and was last updated 2 years, 4 months ago ago by Awais Ahmed

Saira

Participant

July 28, 2022 at 12:24

How can I change the image shape displaying for categories in home page.
https://snipboard.io/5WRfsy.jpg

Please, contact administrator
for this information.

#330615 Copied Theme version: 0.0.1

11 Answers

Awais Ahmed

Participant

July 29, 2022 at 06:28

Hello, @Saira,

If you are using the Product Categories element on your site home page then, unfortunately, there is no such option in the particular element to change the image shape, you have to try with the Custom CSS, I tried to check your site but it is on Maintainance Mode, so I am unable to check it on your site.

Regards 8Themes Team.

#330651 Copied

Saira

Participant

July 29, 2022 at 10:17

I will give you the dashboard login details. Can you please check and provide a solution to make the images to some other design.

Please contact administrator
for this information.

#330664 Copied
Awais Ahmed

Participant

July 29, 2022 at 10:28
Hello, @Saira,

You can make them round using the Custom CSS, Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global Custom CSS.
```
.category-grid img {
    border: 1px solid !important;
    border-radius: 100% !important;
}
```
Regards 8Themes Team.
#330667 Copied
Saira

Participant

July 29, 2022 at 12:17

Can you provide a solution to keep the design as rectangle and the corners curved.

#330680 Copied
Awais Ahmed

Participant

July 30, 2022 at 05:42
Hello, @Saira,

You can make them the design a rectangle and the corners curved using the Custom CSS, Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global Custom CSS.
```
.category-grid img {
    height: 200px !important;
    width: 300px !important;
    border-radius: 30px !important;
}
```
Note: You can change the values in the given Code as per your requirements.

Regards 8Themes Team.
#330705 Copied
Saira

Participant

August 1, 2022 at 05:24

Hi,
Thankyou for the solution.

Can you provide a solution to give the section images dynamic on placing the mouse.

#330777 Copied

Awais Ahmed

Participant

August 1, 2022 at 07:05

Hello, @Saira,

You can set Product image style on hover from Dashboard >> Theme Settings >> WooCommerce(shop) >> Shop >> Product style >> Image Hover Effect and Select option as per your need See image for better reference: https://postimg.cc/yJGrk3gv

Also, you can Set Product Style on hover as Box Shadow and you can turn it ON/OFF, See screenshot: https://postimg.cc/WhRz09cP

Regards 8Themes Team.

#330784 Copied

Saira

Participant

August 1, 2022 at 09:01

I have enabled these two options, but there is no change for the category section in home page. The shop page product images are only showing these effects.

There are design options for the product category section. I have tried to enable that. The effects are showing but the section is broken and the product categories are displaying on the images and the categories name are not visible.
https://snipboard.io/4ScWjA.jpg

#330798 Copied

Awais Ahmed

Participant

August 1, 2022 at 09:36

Hello, @Saira,

There is no such option with the particular element, right now, unfortunately. You can submit a request here https://www.8theme.com/taskboard/ as a feature request, so our dev team read it.

Thanks for your understanding.

Regards 8Themes Team.

#330802 Copied

Saira

Participant

August 16, 2022 at 11:58

After adding this CSS the images are not clear.

https://snipboard.io/jIEix8.jpg

#331857 Copied

Awais Ahmed

Participant

August 17, 2022 at 06:41

Hello, @Saira,

Yes, The images are not clear after adding the code because the image size are different as you can see in the image: https://postimg.cc/sM4zKj3C I have removed the CSS code for the width and height of the image so that the images will appear on their actual size and you see images are very small size and some are in big sizes. So that’s why the issue appears.
In order to solve this issue please use the same size images on your site.

Regards 8Themes Team.

#331926 Copied
Tagged: category, change, display, image shape, themes, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)