How can I change the image shape displaying for category

This topic has 12 replies, 2 voices, and was last updated 1 year, 6 months ago ago by Awais Ahmed

  • Avatar: Saira
    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.
    11 Answers
    Avatar: Awais Ahmed
    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.

    Avatar: Saira
    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.
    Avatar: Awais Ahmed
    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.

    Avatar: Saira
    Saira
    Participant
    July 29, 2022 at 12:17

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

    Avatar: Awais Ahmed
    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.

    Avatar: Saira
    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.

    Avatar: Awais Ahmed
    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.

    Avatar: Saira
    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

    Avatar: Awais Ahmed
    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.

    Avatar: Saira
    Saira
    Participant
    August 16, 2022 at 11:58

    After adding this CSS the images are not clear.

    https://snipboard.io/jIEix8.jpg

    Avatar: Awais Ahmed
    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.

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.