Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #276368

    Hi guys,

    Apologies for sending a post on a topic that appears to be asked quite often. I’ve read many of the previous posts and corresponding answers, but haven’t quite been able to get it working the way I want.

    I’m trying to figure out the relationship between the product image size settings in WooCommerce/Settings/Products, the Enfold image size settings in the config.php (config-woocommerce/config.php) and editing the container wrapper topic I’ve read about on here as well.

    This is my understanding, but please feel free to confirm or correct me if I’m wrong.
    WooCommerce/Settings/Products – the image sizes in here control the resolution of the image displayed. Therefore if I set the catalog image size here to 240×360, that is the resolution of the thumbnail it creates from my original image. However, this doesn’t control the way that thumbnail image is displayed.

    config-woocommerce/config.php – this image setting controls the size of the image as it is displayed. So if using my example above, if I set the catalog image to 300 x 450, the image would be fuzzy as it’s enlarging a 240×360 image to fit 300 x 450 right? But if I set it to 240×360, in theory the image should look sharp and clear correct?

    Here’s where my issue comes in. I’ve tried changing both the woocommerce settings and the woocommerce config.php settings to a size smaller than what the default was, but the image is still showing up larger than I want. I’m guessing this is due to the container wrapper used in the product grid correct? If so, how would I change this to be smaller? I saw a post or two on the container wrapper already but it seemed way above my abilities so if you have a more visual example or simple instructions, that would be great!

    I did try switching from 3 columns to 4 columns and that helped, but not quite down to the size I want. Also, I would prefer to have 3 columns and just more space between them or keep the extra space on the right. Here are the sizes/format I’m hoping for.

    Grid: 3 columns wide
    Product catalog images: 240×360
    Single product image: 300×450

    Can you help me achieve this? Thanks so much!!!

    Bobby

    Bonus question: How can I get rid of the search results in the catalog grid? Right now, it shows “No products found which match your selection.” and then displays my products. Thx!!

    #276851

    Hi Mudfish488!

    Thank you for using the theme.

    The code on config.php file controls the size of the thumbnail and you’re correct about the image inheriting the size of its container. You can add this on Quick CSS or custom.css if you want to specify the actual width of the image inside the product grid, default width is 100%:

    #top .thumbnail_container img {
    margin: 0 auto;
    width: 240px;
    position: relative;
    }

    Regarding the search results, how did it get there? Add this css snippet to hide it:

    .woocommerce-page div.page-description {
    display: none;
    }

    Cheers!
    Ismael

    #280336

    That was fantastic. Worked perfectly. Thanks so much!

    BP

    #280357

    Hi!

    Glad it worked. If you have any questions, let us know. :)

    Regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Resize image containers for product grid using WooCommerce’ is closed to new replies.