{"id":141385,"date":"2021-06-15T15:12:03","date_gmt":"2021-06-15T15:12:03","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/images-to-div-converter\/"},"modified":"2026-02-13T18:52:23","modified_gmt":"2026-02-13T18:52:23","slug":"images-to-div-converter","status":"publish","type":"plugin","link":"https:\/\/es-co.wordpress.org\/plugins\/images-to-div-converter\/","author":18417231,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.3.0","stable_tag":"1.3.0","tested":"6.9.4","requires":"5.0","requires_php":"7.2","requires_plugins":null,"header_name":"WC Catalog Images to DIV Converter","header_author":"WPspins","header_description":"WooCommerce based plugin that replaces all images that are coming with WooCommerce by default with
element, thus avoiding any image resize conflicts.","assets_banners_color":"1f1232","last_updated":"2026-02-13 18:52:23","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/wpspins.com\/support-our-work\/","header_plugin_uri":"","header_author_uri":"https:\/\/wpspins.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":1873,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"wpspin","date":"2021-08-23 16:30:43"},"1.1.0":{"tag":"1.1.0","author":"wpspin","date":"2022-04-14 20:29:14"},"1.2.0":{"tag":"1.2.0","author":"wpspin","date":"2022-08-25 20:33:28"},"1.2.1":{"tag":"1.2.1","author":"wpspin","date":"2022-11-17 16:45:03"},"1.2.2":{"tag":"1.2.2","author":"wpspin","date":"2023-04-01 00:12:49"},"1.2.3":{"tag":"1.2.3","author":"wpspin","date":"2025-08-08 17:54:22"},"1.3.0":{"tag":"1.3.0","author":"wpspin","date":"2026-02-13 18:52:23"}},"upgrade_notice":{"1.3.0":"

Updated for WordPress 6.9.1 compatibility. Improved documentation and added support contact.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2558904,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2558904,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2558904,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2558904,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0","1.2.0","1.2.1","1.2.2","1.2.3","1.3.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2558904,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2558904,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2558904,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2558904,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Catalog image without plugin.","2":"Catalog image after using this plugin.","3":"Product detail image without plugin.","4":"Product detail image after using this plugin."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[3245,2777,255818,24716,286],"plugin_category":[45,50,59],"plugin_contributors":[193842],"plugin_business_model":[],"class_list":["post-141385","plugin","type-plugin","status-publish","hentry","plugin_tags-background-image","plugin_tags-catalog","plugin_tags-image-fix","plugin_tags-product-images","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_category-media","plugin_category-utilities-and-tools","plugin_contributors-wpspin","plugin_committers-wpspin"],"banners":{"banner":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/banner-772x250.png?rev=2558904","banner_2x":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/banner-1544x500.png?rev=2558904","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/icon-128x128.png?rev=2558904","icon_2x":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/icon-256x256.png?rev=2558904","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/screenshot-1.png?rev=2558904","caption":"Catalog image without plugin."},{"src":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/screenshot-2.png?rev=2558904","caption":"Catalog image after using this plugin."},{"src":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/screenshot-3.png?rev=2558904","caption":"Product detail image without plugin."},{"src":"https:\/\/ps.w.org\/images-to-div-converter\/assets\/screenshot-4.png?rev=2558904","caption":"Product detail image after using this plugin."}],"raw_content":"\n

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

\ud83d\udd27 Zero Configuration Required<\/strong> -- Simply install and activate. No settings to configure, no code to write. The plugin works automatically across your WooCommerce store.<\/p>\n\n\n\n

\u2705 Use Cases<\/h3>\n\n
    \n
  1. \ud83d\uded2 Fix stretched or squished product images on the Shop page<\/strong> -- Products with different aspect ratios display uniformly without distortion.<\/li>\n
  2. \ud83d\uddbc\ufe0f Eliminate image cropping issues<\/strong> -- No more awkwardly cropped thumbnails. Images are contained and centered automatically.<\/li>\n
  3. \ud83d\udcd0 Uniform catalog grid layout<\/strong> -- All product images in the catalog grid appear at consistent sizes regardless of the original image dimensions.<\/li>\n
  4. \ud83d\udecd\ufe0f Clean cart thumbnails<\/strong> -- Product images in the cart and mini-cart display neatly as background images instead of inconsistent thumbnails.<\/li>\n
  5. \ud83d\udd0d Better product gallery display<\/strong> -- Single product page gallery images and thumbnails are enhanced with background-image rendering.<\/li>\n
  6. \ud83d\udcf1 Responsive image handling<\/strong> -- Built-in responsive CSS ensures product images look great across all devices and screen sizes.<\/li>\n
  7. \ud83c\udfa8 Work with variable product swatches<\/strong> -- Automatically handles variation swatch images on product detail pages.<\/li>\n
  8. \ud83c\udfea Multi-column shop layouts<\/strong> -- Supports 3, 4, and 5 column shop layouts with properly sized image containers.<\/li>\n
  9. \u26a1 Reduce image processing overhead<\/strong> -- By setting gallery thumbnails to a higher resolution (1000x1000), the plugin avoids WooCommerce regenerating multiple image sizes.<\/li>\n
  10. \ud83e\udde9 Theme compatibility<\/strong> -- Works with most WooCommerce-compatible themes without additional configuration needed.<\/li>\n<\/ol>\n\n\n\n

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

      \ud83d\udccb Requirements<\/h3>\n\n
        \n
      • WordPress 5.0 or higher<\/li>\n
      • WooCommerce plugin installed and activated<\/li>\n
      • PHP 7.2 or higher<\/li>\n<\/ul>\n\n

        \ud83d\ude80 Installation Steps<\/h3>\n\n
          \n

        1. From WordPress Dashboard:<\/strong><\/p>\n\n

            \n
          • Go to Plugins > Add New<\/strong><\/li>\n
          • Search for \"WC Catalog Images to DIV Converter\"<\/strong><\/li>\n
          • Click Install Now<\/strong>, then Activate<\/strong><\/li>\n<\/ul><\/li>\n

          • Manual Upload:<\/strong><\/p>\n\n

              \n
            • Download the plugin ZIP file<\/li>\n
            • Go to Plugins > Add New > Upload Plugin<\/strong><\/li>\n
            • Choose the ZIP file and click Install Now<\/strong><\/li>\n
            • Activate the plugin<\/li>\n<\/ul><\/li>\n

            • Via FTP:<\/strong><\/p>\n\n

                \n
              • Upload the plugin folder to \/wp-content\/plugins\/<\/code><\/li>\n
              • Go to Plugins<\/strong> in your WordPress Dashboard<\/li>\n
              • Find the plugin and click Activate<\/strong><\/li>\n<\/ul><\/li>\n<\/ol>\n\n

                \u2699\ufe0f Settings & Usage<\/h3>\n\n

                This plugin is zero-configuration<\/strong> -- there are no settings to adjust. Once activated, it works automatically:<\/p>\n\n

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

                  Simply activate the plugin and browse your shop -- you will see the difference immediately.<\/p>\n\n

                  Tip:<\/strong> If you are using a caching plugin, clear your cache after activation to see the changes right away.<\/p>\n\n\n

                  \n

                  Does this plugin require WooCommerce?<\/h3><\/dt>\n

                  Yes, WooCommerce must be installed and activated. The plugin will display a notice if WooCommerce is not found.<\/p><\/dd>\n

                  Are there any settings to configure?<\/h3><\/dt>\n

                  No. The plugin works automatically once activated. No configuration needed.<\/p><\/dd>\n

                  Will this affect my product images in the WordPress media library?<\/h3><\/dt>\n

                  No. The plugin only changes how images are displayed on the frontend. Your original images remain untouched.<\/p><\/dd>\n

                  Does it work with my theme?<\/h3><\/dt>\n

                  The plugin is designed to work with any WooCommerce-compatible theme. It hooks into standard WooCommerce template actions.<\/p><\/dd>\n

                  Can I customize the image container height?<\/h3><\/dt>\n

                  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.<\/p><\/dd>\n\n<\/dl>\n\n\n

                  1.3.0<\/h4>\n\n
                    \n
                  • Updated compatibility with WordPress 6.9.1<\/li>\n
                  • Improved plugin description and documentation<\/li>\n
                  • Added support contact notice for quick assistance<\/li>\n<\/ul>\n\n

                    1.2.3<\/h4>\n\n
                      \n
                    • Tested with WordPress 6.3.1<\/li>\n<\/ul>\n\n

                      1.2.2<\/h4>\n\n
                        \n
                      • Tested with WordPress 6.2<\/li>\n<\/ul>\n\n

                        1.2.1<\/h4>\n\n
                          \n
                        • Tested with WordPress 6.1.1<\/li>\n<\/ul>\n\n

                          1.2.0<\/h4>\n\n
                            \n
                          • Tested with WordPress 6.0.1<\/li>\n<\/ul>\n\n

                            1.1.0<\/h4>\n\n
                              \n
                            • Added donation URL<\/li>\n
                            • Tested with WordPress 5.8.3<\/li>\n<\/ul>\n\n

                              1.0.0<\/h4>\n\n
                                \n
                              • First version of the plugin.<\/li>\n<\/ul>","raw_excerpt":"Automatically converts WooCommerce product images into CSS background-image DIVs -- fixing image resize, cropping, and stretching issues across your e …","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/141385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=141385"}],"author":[{"embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpspin"}],"wp:attachment":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=141385"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=141385"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=141385"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=141385"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=141385"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=141385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}