Magento 1.9 – How to Remove Zoom from Product Details Page on RWD Theme

ce-1.9.0.1magento-1.9product-viewrwdrwd-theme

How do you remove the zoom feature from Magento 1.9's rwd theme?

I can remove it with css

div.zoomContainer {
  display: none;
}

But I don't think this is the best method? It would be better to remove it from a template file or with xml.

I've tried editing the template/catalog/product/view/media.phtml but had no luck.

Best Answer

As mentioned in one of the other answers, the zoom feature starts in the createZoom function of the ProductMediaManager in /skin/frontend/rwd/default/js/app.js file.

So, another option is to override the individual createZoom function via JS later in the process.

For example, if you are inserting JS as a part of your own theme, then you can add the following to override the createZoom function in the ProductMediaManager object. 

// ProductMediaManager is outside document.read scope
if (typeof ProductMediaManager !== 'undefined') {

  // Override image zoom in /skin/frontend/rwd/default/js/app.js
  // and prevent the zooming of images on hover
  ProductMediaManager.createZoom = function(image) { return; }

}

With this method, you don't have to copy the entire app.js file. However, you must make sure that your theme's JS is added after the parent theme's JS file. I find this to be a cleaner approach.

Related Topic