Change which images are used for category-pages

  • Resolved windspeed

    (@windspeed)


    5 years, 8 months ago

    Hello,
    At present, my site takes the images it uses on Category pages from the Product image on the Product Page. Can I change which images it uses or where it gets them from?
    My images are distorted on the Category page because the placeholder has different dimensions to the image on the Product page.
    I think I can see the CSS that is used to get the images at:-
    OceanWP Child: content-category-product.php (woocommerce/content-category-product.php)
    as:-
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), ‘single-post-thumbnail’ );
    but I’ve got no idea if this is really the right place or the right code or what to change it to.
    In my old Dreamweaver I could create a folder with special images in it and point each link to that folder. Could something similar work on WP?
    Thanks (again!)

    The page I need help with: [log in to see the link]

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

  • Hello,

    Go to Dashboard > Products > Category and add an image for a category. For the image size, go to Appearance > Customize > Product Images and set image size as per your need. Use the Regenerate Thumbnail plugin after changing the image size.

    Thread Starter windspeed

    (@windspeed)

    Hi Amit,
    I must be missing something. When I try to go to go to Appearance > Customize > Product Images as per your instructions, I cannot see any ‘Product Images’ under Customize? Am I looking in the wrong place? Thanks Chris

    Ah…sorry for the mistake. It is under the Appearance > Customize > Woocommerce > Product Images.

    I am having a similar issue. My product images are 280 wide x 650 tall. The thumbnail that is generated for a category is 324 x 72. It is too wide, and not tall enough to show the entire product in the thumbnail. I have deleted all images, used regenerate, added the images back, all hoping that WP and Woo would create the proper size thumbnail. Im now stumped, nothing I do will give a decent looking thumbnail. Help?

    • This reply was modified 5 years, 8 months ago by jppaynesr.

    @jppaynesr can you please share your site link so that I can check it? Also, try to use a larger size image. Did you set the image size from the customizer settings as I mentioned above?

    Thread Starter windspeed

    (@windspeed)

    Amit,
    I have followed the instructions to set image size at Appearance > Customize > Woocommerce > Product Images. I have tried setting Thumbnail width to many options between 100 and 600 9the default is set to 300) and it made no difference. I have tried all 3 options for Thumbnail cropping and it also makes no difference. See screenshot at

    You will see that all images are stretched upwards.
    This makes sense to me because the image in Products is 600 x 500
    but the image I want to appear in category pages only has a box of 275 x 320 to fit into. One is a 6:5 ratio and the other is 275:320 ratio.
    Even if the image is cropped or edited, the ratio will still be reversed so it stands to reason that it will we stretched.
    The only solution I can see is to use a different image for the category page, NOT the one it gets from the Product page. I have to find a way to get the program look somewhere else for the image it uses, not get it from the Product page. Thanks

    Thread Starter windspeed

    (@windspeed)

    Also, in your first reply you said to me to “Go to Dashboard > Products > Category and add an image for a category.”
    I have done this and all it did was to put an image into the list of categories (I have a screenshot of this but I do not know how to attach a screenshot to this post)
    Have I missed something here? Thanks again

    To attach a screenshot, you can use tools like Imgur, Dropbox, etc. Have you used Regenerate Thumbnail plugin after changing the image size?

    Thread Starter windspeed

    (@windspeed)

    Thanks for the hint on screenshot. I’ll try it.
    About Regenate thumbnail… I understood that Woocommerce now does this automatically?
    On https://woocommerce.wordpress.com/2017/12/11/wc-3-3-image-size-improvements/
    it has the following article:-
    Automatic Thumbnail Resizing

    Apart from the new theme support and cropping settings, we have also introduced automatic thumbnail resizing. In the past when you changed a product image WordPress would not actually resize the image and you had to install a plugin like Regenerate Thumbnails in order to have WordPress resize the images for you. In WooCommerce 3.3 we have now added on-the-fly thumbnail resizing as well as background thumbnail resizing.

    Are we talking about the same thing?

    I think it is important in the discussion to be aware of versions. The latest version of Woo has removed the controls over image size and handed them off to the theme (3.6.4). Also, while regenerate is automatic, there is a built in regenerate tool under WooComerce/Status/Tools/Regenerate. Version is found under WooCommerce/Status/System Status. The latest version of WordPress (as of the date of this post) is 5.2.2.

    I was able to get a more acceptable thumbnail by adding my images to the product gallery. Previously I had not used the gallery, I was simply adding an image for each category and for each product. Now I need to go back and resize all my images so the entire product appears in the space allotted, because the dynamic resizing is not working either.

    This is frustrating. I am using nothing but Automatic products, and it doesn’t work properly out of the box. WordPress, WooCommerce, Storefront theme, hosted on Pressable, all owned by Automatic.

    • This reply was modified 5 years, 8 months ago by jppaynesr.

    Yes, OceanWP theme doesn’t control the product image size. The option is available under the Customize > Woocommerce > Product image is included from the woocommerce.

    Thread Starter windspeed

    (@windspeed)

    I’ve finally worked out an answer to my original question. “Change which images are used for category pages” or to put it better…”Can I have different images used in category pages then those used in product pages?”
    The answer is Yes. Just create a Custom Field called category_product_image in the product page of each product and make it’s Value the link to the image you want to use.
    Thanks for all the discussion.

    Glad to hear that you found a solution and thank you for sharing it.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Change which images are used for category-pages’ is closed to new replies.

Tags