WC Catalog Images to DIV Converter

Апісанне

🖼️ WC Catalog Images to DIV Converter transforms the way WooCommerce displays product images. Instead of relying on default <img> tags that often cause cropping, stretching, and resize conflicts, this plugin wraps product images inside <div> elements using CSS background-image — giving you perfectly contained, uniformly displayed product photos everywhere.

🔧 Zero Configuration Required — Simply install and activate. No settings to configure, no code to write. The plugin works automatically across your WooCommerce store.

✅ Use Cases

  1. 🛒 Fix stretched or squished product images on the Shop page — Products with different aspect ratios display uniformly without distortion.
  2. 🖼️ Eliminate image cropping issues — No more awkwardly cropped thumbnails. Images are contained and centered automatically.
  3. 📐 Uniform catalog grid layout — All product images in the catalog grid appear at consistent sizes regardless of the original image dimensions.
  4. 🛍️ Clean cart thumbnails — Product images in the cart and mini-cart display neatly as background images instead of inconsistent thumbnails.
  5. 🔍 Better product gallery display — Single product page gallery images and thumbnails are enhanced with background-image rendering.
  6. 📱 Responsive image handling — Built-in responsive CSS ensures product images look great across all devices and screen sizes.
  7. 🎨 Work with variable product swatches — Automatically handles variation swatch images on product detail pages.
  8. 🏪 Multi-column shop layouts — Supports 3, 4, and 5 column shop layouts with properly sized image containers.
  9. Reduce image processing overhead — By setting gallery thumbnails to a higher resolution (1000×1000), the plugin avoids WooCommerce regenerating multiple image sizes.
  10. 🧩 Theme compatibility — Works with most WooCommerce-compatible themes without additional configuration needed.

🔌 Works Great With These Popular Plugins

  • WooCommerce (Required) — The core eCommerce plugin this is built for.
  • Variation Swatches for WooCommerce — Enhanced swatch image display on product pages.
  • YITH WooCommerce Wishlist — Catalog images remain consistent in wishlist views.
  • WooCommerce Product Filter — Filtered product grids maintain uniform image display.
  • Jetpack — Compatible with Jetpack’s lazy loading and CDN features.
  • Smush / ShortPixel / Imagify — Image optimization plugins work seamlessly alongside.
  • Elementor / WPBakery — Compatible with popular page builders that use WooCommerce widgets.
  • WooCommerce Blocks — Works with the classic WooCommerce shortcode-based catalog display.

Screenshots

  • Catalog image without plugin.
  • Catalog image after using this plugin.
  • Product detail image without plugin.
  • Product detail image after using this plugin.

Ўсталёўка

📋 Requirements

  • WordPress 5.0 or higher
  • WooCommerce plugin installed and activated
  • PHP 7.2 or higher

🚀 Installation Steps

  1. From WordPress Dashboard:

    • Go to Plugins > Add New
    • Search for “WC Catalog Images to DIV Converter”
    • Click Install Now, then Activate
  2. Manual Upload:

    • Download the plugin ZIP file
    • Go to Plugins > Add New > Upload Plugin
    • Choose the ZIP file and click Install Now
    • Activate the plugin
  3. Via FTP:

    • Upload the plugin folder to /wp-content/plugins/
    • Go to Plugins in your WordPress Dashboard
    • Find the plugin and click Activate

⚙️ Settings & Usage

This plugin is zero-configuration — there are no settings to adjust. Once activated, it works automatically:

  • ✅ Shop/catalog page images are converted to background-image DIVs
  • ✅ Cart and mini-cart thumbnails are converted
  • ✅ Product gallery and gallery thumbnails are enhanced
  • ✅ Responsive breakpoints handle all screen sizes
  • ✅ Variable product swatch images are processed on product pages

Simply activate the plugin and browse your shop — you will see the difference immediately.

Tip: If you are using a caching plugin, clear your cache after activation to see the changes right away.

Часта задаваныя пытанні

Does this plugin require WooCommerce?

Yes, WooCommerce must be installed and activated. The plugin will display a notice if WooCommerce is not found.

Are there any settings to configure?

No. The plugin works automatically once activated. No configuration needed.

Will this affect my product images in the WordPress media library?

No. The plugin only changes how images are displayed on the frontend. Your original images remain untouched.

Does it work with my theme?

The plugin is designed to work with any WooCommerce-compatible theme. It hooks into standard WooCommerce template actions.

Can I customize the image container height?

The plugin includes responsive CSS with predefined heights for different screen sizes and column layouts. Advanced users can override these styles in their theme’s custom CSS.

Водгукі

На гэты плагін няма водгукаў.

Удзельнікі і распрацоўшчыкі

“WC Catalog Images to DIV Converter” is open source software. The following people have contributed to this plugin.

Удзельнікі

Журнал змяненняў

1.3.0

  • Updated compatibility with WordPress 6.9.1
  • Improved plugin description and documentation
  • Added support contact notice for quick assistance

1.2.3

  • Tested with WordPress 6.3.1

1.2.2

  • Tested with WordPress 6.2

1.2.1

  • Tested with WordPress 6.1.1

1.2.0

  • Tested with WordPress 6.0.1

1.1.0

  • Added donation URL
  • Tested with WordPress 5.8.3

1.0.0

  • First version of the plugin.