Leírás
🖼️ 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
- 🛒 Fix stretched or squished product images on the Shop page — Products with different aspect ratios display uniformly without distortion.
- 🖼️ Eliminate image cropping issues — No more awkwardly cropped thumbnails. Images are contained and centered automatically.
- 📐 Uniform catalog grid layout — All product images in the catalog grid appear at consistent sizes regardless of the original image dimensions.
- 🛍️ Clean cart thumbnails — Product images in the cart and mini-cart display neatly as background images instead of inconsistent thumbnails.
- 🔍 Better product gallery display — Single product page gallery images and thumbnails are enhanced with background-image rendering.
- 📱 Responsive image handling — Built-in responsive CSS ensures product images look great across all devices and screen sizes.
- 🎨 Work with variable product swatches — Automatically handles variation swatch images on product detail pages.
- 🏪 Multi-column shop layouts — Supports 3, 4, and 5 column shop layouts with properly sized image containers.
- ⚡ Reduce image processing overhead — By setting gallery thumbnails to a higher resolution (1000×1000), the plugin avoids WooCommerce regenerating multiple image sizes.
- 🧩 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.
Képernyőmentések
Telepítés
📋 Requirements
- WordPress 5.0 or higher
- WooCommerce plugin installed and activated
- PHP 7.2 or higher
🚀 Installation Steps
-
From WordPress Dashboard:
- Go to Plugins > Add New
- Search for „WC Catalog Images to DIV Converter”
- Click Install Now, then Activate
-
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
-
Via FTP:
- Upload the plugin folder to
/wp-content/plugins/ - Go to Plugins in your WordPress Dashboard
- Find the plugin and click Activate
- Upload the plugin folder to
⚙️ 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.
GYIK
-
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.
Vélemények
Nincsenek értékelések erről a bővítményről.
Közreműködők és fejlesztők
“WC Catalog Images to DIV Converter” egy nyílt forráskódú szoftver. A bővítményhez a következő személyek járultak hozzá:
Közreműködők“WC Catalog Images to DIV Converter” fordítása a saját nyelvünkre.
Érdekeltek vagyunk a fejlesztésben?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Változási napló
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.




