BugWP logo BugWP
Back to Community
Home / Community / Theme → Storefront

Troubleshooting Storefront Theme Product Image and Gallery Issues

24 threads Sep 16, 2025 Theme → Storefront

Content

Working with product images in the Storefront theme for WooCommerce is a common source of questions. Based on community discussions, this guide covers the most frequent issues and their solutions.

Common Storefront Image Problems

Users often report issues with image sizing, cropping, gallery layout, and slider functionality. These problems typically stem from the theme's default settings, conflicts with other plugins, or a need for custom CSS or code adjustments.

1. Image Sizing and Cropping

The Problem: Product or category images appear cropped to an unwanted aspect ratio (like 1:1) or do not display in their original uploaded dimensions (e.g., panoramic).

Why It Happens: The Storefront theme has predefined image sizes for product catalogs and galleries. For instance, the default product catalog image size is 324x324 pixels. If your uploaded images do not match this aspect ratio, they will be cropped to fit.

Solutions:

  • Regenerate Thumbnails: After changing any image size settings, use a plugin like Regenerate Thumbnails to apply the new sizes to existing images.
  • Adjust Settings: Navigate to WooCommerce > Settings > Products > Display. Here, you can choose to display images as "Uncropped" to preserve their original aspect ratio.
  • Use High-Resolution Images: For best results, the Storefront team recommends using images with a minimum size of 800x800 pixels. Larger images (e.g., 1000x1000 to 2000x2000) are even better for detail but should be optimized for web use to avoid slowing down your site.

2. Gallery Thumbnail and Layout Issues

The Problem: Thumbnails appear too small, have excessive spacing, or the gallery layout breaks when multiple images are added.

Why It Happens: The theme's CSS dictates the gallery layout and thumbnail sizes. These defaults may not suit every design. Plugin conflicts can also cause unexpected behavior.

Solutions:

  • Custom CSS for Thumbnail Size: To adjust thumbnail dimensions, you will need to add custom CSS. For example, to increase their size, you would target the appropriate CSS class and define a new width and height.
  • Conflict Test: If thumbnails are not displaying correctly (e.g., a slider not advancing), a plugin or theme conflict is likely. To test for this:
    1. Temporarily switch your theme to a default like Storefront.
    2. Disable all plugins except for WooCommerce.
    3. Check if the problem persists. If it's resolved, reactivate your plugins one by one to identify the culprit.

3. Making Images and Sliders Larger or Full-Width

The Problem: A product image slider or featured image is not expanding to the full width of its container.

Why It Happens: The theme's templates often include CSS rules that constrain the maximum width of content areas for design consistency.

Solutions:

  • Custom CSS: The most common fix is to override the theme's maximum width rule for the specific container. This typically involves using your browser's inspector tool to identify the correct CSS class and then adding a snippet to your site's additional CSS section (under Appearance > Customize). For example: .homepage-template .content-area { max-width: 100% !important; }
  • Check Template Settings: Ensure you are using a suitable page template (e.g., "Full Width") that allows for larger content areas.

4. Disabling the Default Zoom Effect

The Problem: The default mouse-hover zoom effect on product images is unwanted.

Why It Happens: This is a default feature of the WooCommerce gallery.

Solutions:

  • Custom Code Snippet: You can disable the zoom feature by adding a small PHP code snippet to your site. This can be done safely using a plugin like Code Snippets. The code is: 
    add_action( 'wp', 'custom_remove_product_zoom' );
function custom_remove_product_zoom() {
  remove_theme_support( 'wc-product-gallery-zoom' );
}

5. External Image Links and Video Galleries

The Problem: You want a product image to link to an external URL or feature a video in the gallery instead of an image.

Why It Happens: This functionality is not provided by the core Storefront or WooCommerce software.

Solutions:

  • For External Links: This requires custom development, such as creating a meta field for the custom URL and modifying the WooCommerce template file that outputs the image link.
  • For Video Galleries: Compatibility issues between third-party video gallery plugins and the theme can cause layout problems. It is recommended to contact the support team for the specific video plugin you are using, as they will be best equipped to advise on integration with Storefront.

For persistent issues, especially those involving custom code, consulting the official WooCommerce documentation or a qualified developer is often the best course of action.

Related Support Threads Support