Support » Theme: Storefront » “Popular products” list widget uses full size product images resized with CSS

  • Resolved kosmicare

    (@kosmicare)


    Hi there,
    After a recent update, the storefront “popular items” widget had the image sizes broken. The developer said that this wasn’t something they wanted to fix and made this suggestion: https://github.com/woocommerce/storefront/issues/883

    Unfortunately I have absolutely no idea where to start with this? I don’t have a command line that I could type any of that into because i am on a shared server

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

Viewing 1 replies (of 1 total)
  • Jesse Pearson (a11n)

    (@jessepearson)

    Automattic Happiness Engineer

    @kosmicare I took a look, and you are correct, the image sizes being returned in the widget are quite large. This is WooCommerce specific and not Storefront specific, so the developer is correct.

    You do not need command line at the server to correct this. What you need to do to specify a different image size in the template is first use Simple Image Sizes to create a new image size you’d like to use: https://wordpress.org/plugins/simple-image-sizes/

    Once that is done, you need to get a child theme. There is a pre-made one for Storefront here:
    https://github.com/stuartduff/storefront-child-theme/releases

    Once downloaded, you can unzip the folder. If you do not have a copy of WooCommerce locally, you will need to get a copy of it:
    https://wordpress.org/plugins/woocommerce/

    From here, copy the /woocommerce/templates/content-widget-product.php file to /storefront-child-theme/woocommerce/content-widget-product.php. You can then edit the new copy of the file with any text editor and specify your image size as mentioned before:

    <?php echo $product->get_image( 'custom-image-size-name' ); ?>

    Once this is done, you can then zip up the child theme folder and upload it as a new theme to your site. This will still use the Storefront theme, it will just override that one part is all.

Viewing 1 replies (of 1 total)
  • The topic ‘“Popular products” list widget uses full size product images resized with CSS’ is closed to new replies.