How to resize products (woocommerce) on home page?

  • I only have 2 product options available to purchase through my web store powered by woocommerce.

    I would like to feature these products on my home page but currently the way my layout is set up, it sizes the products on the home page so that four can be displayed.

    Since I only have two, there is just white space. The page looks unbalanced and I would like to double the size of both products to fill the entire space of that particular div.

    Should I edit the CSS or is there something I can change with woocommerce? I’ve done lots of googling but haven’t come upon the exact solution, so I apologize if this has been asked/solved before I just didn’t come upon it

    My website is https://www.californiabeardco.com

Viewing 7 replies - 1 through 7 (of 7 total)

  • You can use css like this:

    .woocommerce.columns-2 .products .kad_product {
    width: 50%;
}

    To make the images larger you will need to go to the theme options > shop settings and turn off the theme aspect ratio for archives.

    Then in your woocommerce settings > products > display you will want to set the catalogue image size to like 600×600

    Kadence Themes

    Thread Starter csterling

    (@csterling)

    Thanks for the help!

    I implemented those changes and am about 80% happy with the results.

    If you check my website now you will see the changes, but I would like it if the actual image (not the containing div) took up the entire space. There is too much white space, wasted real estate for images in my opinion.

    Any tips on enlarging the photo as well?

    Thanks so much for your quick reply and useful tips!

    https://www.californiabeardco.com

    Hey,
    Doesn’t look like you did this part?

    To make the images larger you will need to go to the theme options > shop settings and turn off the theme aspect ratio for archives.

    Then in your woocommerce settings > products > display you will want to set the catalogue image size to like 600×600

    Can you check that for me? I’m still seeing that you have the theme resize turned on.

    Kadence Themes

    Thread Starter csterling

    (@csterling)

    Under the header Shop Category Image Size I set the Category Image Aspect Ratio to “Turn Off”

    And I also changed the values in the woocommerce store

    Sorry to barge in on here but csterling may i ask how you got the instagram part to work? i cant get my instagram to work like that

    thanks

    Csterling, have you cleared your site’s cache since making the changes to the woocommerce image sizes?

    Mrgem, as for his instagram feed, I believe he’s using a plugin such as this one:
    https://www.ads-software.com/plugins/wp-instagram-widget/

    csterling, this is not for the category images… it’s for product images… Please scroll a little further in the theme options > shop settings. You will see a section for “product images”

    There your can turn off “Enable Product Image Crop on Catalog pages”.

    Please try that and let me know?

    Kadence Themes

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to resize products (woocommerce) on home page?’ is closed to new replies.

Tags