If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

OpenCart 2.x. How to disable product image pop up on product page

Hello! This video tutorial shows how to disable product image pop up on single product pages in OpenCart templates.

You may want to get rid of the product image pop up on the product page of your store:

opencart_2.x_disable_product_image_pop_up_1

Let’s learn how to do that.

  1. Navigate to your FTP/hosting control panel File Manager and look for the script.js file under the /catalog/view/theme/themeXXX/js/ directory:

    opencart_2.x_disable_product_image_pop_up_2

  2. Open the file for editing and use CTRL+F/CMND+F (Windows OS/Mac OS) to find “Magnificent” text:

    opencart_2.x_disable_product_image_pop_up_3

  3. Comment out the whole script to disable the pop up function by adding /* at the beginning of the script and */ at the end of the script so it looks as follows:

    /*;
      (function ($) {
      var o = $('#image-additional');
      if (o.length > 0) {
      include('js/magnificent/jquery.ba-throttle-debounce.js');
      include('js/magnificent/jquery.bridget.js');
      include('js/magnificent/magnificent.js');
     $(document).ready(function () {
     o.find('li:first-child a').addClass('active');
     $('#product-image').bind("click", function (e) {
      var imgArr = [];
      o.find('a').each(function () {
      img_src = $(this).data("image");
     //put the current image at the start
      if (img_src == $('#product-image').find('img').attr('src')) {
      imgArr.unshift({
      href: '' + img_src + '',
      title: $(this).find('img').attr("title")
      });
      }
      else {
      imgArr.push({
      href: '' + img_src + '',
      title: $(this).find('img').attr("title")
      });
      }
      });
      $.fancybox(imgArr);
      return false;
      });
    
     o.find('[data-image]').click(function (e) {
      e.preventDefault();
      o.find('.active').removeClass('active');
      var img = $(this).data('image');
      $(this).addClass('active');
      $('#product-image').find('.inner img').each(function () {
      $(this).attr('src', img);
      })
      })
     });
    }
      })
      (jQuery);*/
    
  4. Do not forget to save the file to apply changes.

  5. Navigate back to your store product page – as you can see, the product image pop up no longer appears:

    opencart_2.x_disable_product_image_pop_up_4

This is the end of the tutorial. Now you know how to disable product image pop up on product pages in your OpenCart template.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to disable product image pop up on product page