Swapping image when hovering over in products – Opencart free module

Another free Opencart module for this Christmas and Happy New Year, we are providing Opencart module when activated we can add hovering image and in the frontend when we hover over to the image in products of category page it will swap with the hovering image.

How to install the swapping image Opencart module?

First, download the module by clicking the download button above and you will get hoveroverimage.ocmod.zip file. Then go to admin >> Extensions >> Installer >> then upload the hoveroverimage.ocmod.zip file.

Second go to admin >> Extensions >> Modifications >> then click the refresh button

Third, go to admin >> Extensions >> Extensions >> Choose module in extension type >> then find the “Hover Over Image” and click the install button for the Hover Over Image module. Once you install click edit and then choose enabled and click save.

Fourth, go to admin >> Catalog >> Products >> add or edit the product >> then enter the details of the product and click the Image tab, where you will see the “Upload Hover over Image” field, upload the image to show when it hovers over.

swapping image on hover Opencart

Finally, go to the frontend and visit the category where the product is assigned and then hover over the product image and see the swap of the image.

On hover image change opencart

You installed the module, configured it and see the result like above. Let us know if you see any issues or want any improvement.

For developers:

The OCMOD file https://github.com/rupaknepali/Opencart-free-modules/blob/master/hoveroverimage/install.xml will modify the following files:

modified:   admin/controller/catalog/product.php
modified:   admin/language/en-gb/catalog/product.php
modified:   admin/model/catalog/product.php
modified:   admin/view/template/catalog/product_form.twig
modified:   catalog/controller/product/category.php
modified:   catalog/model/catalog/product.php
modified:   catalog/view/theme/default/template/product/category.twig

The new files added when you upload the module are the following:

added:      admin/controller/extension/module/hoveroverimage.php
added:      admin/language/en-gb/extension/module/hoveroverimage.php
added:      admin/model/extension/module/hoveroverimage.php
added:      admin/view/template/extension/module/hoveroverimage.twig

Once you upload the module then install the module, then it will create the oc_product_to_image_back database table. We need to create a new table because Opencart 3 doesn’t allow us to alter the core database tables.

public function installTableBackImage()
{
    $this->db->query("CREATE TABLE `" . DB_PREFIX ."product_to_image_back` ( `id` INT NOT NULL AUTO_INCREMENT , `image_back` VARCHAR(255) NOT NULL , `product_id` INT NOT NULL , PRIMARY KEY (`id`))");
}

public function dropTableBackImage()
{
    $this->db->query("DROP TABLE IF EXISTS `" . DB_PREFIX . "product_to_image_back`");
}

When you upload the image in “Upload Hover over Image” field at product section then all data are stored in the DB_PREFIX.product_to_image_back database table.

The Ocmod install.xml contains the following code:

<?xml version="1.0" encoding="utf-8"?>
<modification>
  <name>Module Hover Over Image</name>
  <version>1.0</version>
  <author>Rupak Nepali</author>
  <link>https://webocreation.com</link>
  <code>webocreation_module_hover_over_image</code>
  <file path="admin/view/template/catalog/product_form.twig">
    <operation>
      <search><![CDATA[ <div class="tab-pane" id="tab-image"> ]]></search>
      <add position="after"><![CDATA[
            {% if image_back_status %}
              <div class="table-responsive">
                {# HoverOver Image #}
                <table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-left">{{ entry_image_back }}</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left"><a href="" id="thumb-image-back" data-toggle="image" class="img-thumbnail"><img src="{{ thumb_back }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="image_back" value="{{ image_back }}" id="input-image-back" /></td>
</tr>
</tbody>
</table>
</div>
            {% endif %}
            ]]>
      </add>
    </operation>
  </file>

  <file path="admin/controller/catalog/product.php">
    <operation>
      <search><![CDATA[if (isset($this->request->post['product_image'])) {]]></search>
      <add position="before"><![CDATA[
                // Hoverover Image
    $data['image_back_status'] = $this->config->get('module_hoveroverimage_status');
    if ($this->config->get('module_hoveroverimage_status')) {
		if (isset($this->request->post['image_back'])) {
			$data['image_back'] = $this->request->post['image_back'];
		} elseif (isset($this->request->get['product_id'])) {
			$image_back= $this->model_catalog_product->getBackProductImage($this->request->get['product_id']);
			if (!empty($image_back['image_back'])){
				$data['image_back'] = $image_back['image_back'];
			}	
		} else {
			$data['image_back'] = array();
		}

		if (isset($this->request->post['image_back']) && is_file(DIR_IMAGE . $this->request->post['image_back'])) {
			$data['thumb_back'] = $this->model_tool_image->resize($this->request->post['image_back'], 100, 100);
		} elseif (!empty($image_back) && is_file(DIR_IMAGE . $image_back['image_back'])) {
			$data['thumb_back'] = $this->model_tool_image->resize($image_back['image_back'], 100, 100);
		} else {
			$data['thumb_back'] = $this->model_tool_image->resize('no_image.png', 100, 100);
		}
    }
            ]]>      </add>
    </operation>
  </file>

  <file path="admin/language/en-gb/catalog/product.php">
    <operation>
      <search><![CDATA[ $_['error_unique'] ]]></search>
      <add position="before"><![CDATA[ $_['entry_image_back'] = 'Upload Hoverover Image'; ]]></add>
    </operation>
  </file>

  <file path="admin/model/catalog/product.php">
    <operation>
      <search><![CDATA[if (isset($data['image'])) {]]></search>
      <add position="before"><![CDATA[ 
        //Hoverover Image
        if ($this->config->get('module_hoveroverimage_status')) {
        if (isset($data['image_back'])) {
          $this->db->query("DELETE FROM " . DB_PREFIX . "product_to_image_back WHERE product_id = '" . (int)$product_id . "'");
          $this->db->query("INSERT INTO " . DB_PREFIX . "product_to_image_back SET product_id = '" . (int)$product_id . "', image_back = '" . $this->db->escape($data['image_back']) . "'");
        }
        }
         ]]>      </add>
    </operation>
  </file>
  <file path="admin/model/catalog/product.php">
    <operation>
      <search><![CDATA[public function getProductRelated($product_id) {]]></search>
      <add position="before"><![CDATA[ 
          //Hoverover Image
          public function getBackProductImage($product_id) {
            $query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product_to_image_back WHERE product_id = '" . (int)$product_id . "'");

            return $query->row;
          }
        ]]>      </add>
    </operation>
  </file>

  <file path="catalog/model/catalog/product.php">
    <operation>
      <search><![CDATA[public function getProductRelated($product_id) {]]></search>
      <add position="before"><![CDATA[ 
          //Hoverover Image
          public function getBackProductImage($product_id) {
            $query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product_to_image_back WHERE product_id = '" . (int)$product_id . "'");

            return $query->row;
          }
        ]]>      </add>
    </operation>
  </file>

  <file path="catalog/controller/product/category.php">
    <operation>
      <search><![CDATA[$data['products'][] = array(]]></search>
      <add position="before"><![CDATA[ 
        //Hoverover Image
        $image_back_final = "";
        $data['image_back_status'] = $this->config->get('module_hoveroverimage_status');
        if ($this->config->get('module_hoveroverimage_status')) {
            $image_back = $this->model_catalog_product->getBackProductImage($result['product_id']);
            if (isset($image_back['image_back'])) {
              $image_back_final = $this->model_tool_image->resize($image_back['image_back'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
            } else {
              $image_back_final = "";
            }
        }
      ]]>      </add>
    </operation>
  </file>

  <file path="catalog/controller/product/category.php">
    <operation>
      <search><![CDATA[$data['products'][] = array(]]></search>
      <add position="after"><![CDATA['thumb_back'       => $image_back_final, //Hoverover Image]]></add>
    </operation>
  </file>

  <file path="catalog/view/theme/default/template/product/category.twig">
    <operation>
      <search><![CDATA[<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive"/>]]></search>
      <add position="replace"><![CDATA[ 
        {% if product.thumb_back %}
            <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" onmouseover="this.src='{{ product.thumb_back }}'" onmouseout="this.src='{{ product.thumb }}'" class="img-responsive"/>
        {% else %}
            <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive"/>
        {% endif %}
        ]]>      </add>
    </operation>
  </file>

</modification>

In this way, you can set up the swapping the image when hovering over in products on the category page. Let us know if need any support. Please subscribe to our YouTube Channel for Opencart video tutorials and get lots to other Opencart free modules. You can also find us on Twitter and Facebook. Merry Christmas and Happy New Year 2020.

Previous articleFree checkout all orders are going to missing orders in Opencart 3.0.2.0
Next articleManage menu and change navigation or menu in Opencart

12 COMMENTS

  1. I try this extension for opencart 3.0.3.2 theme but it does not working.

    I dont know where the issue. i follow all instructions.

    but all in vane.

    bobby

  2. I am using open cart 3.0.3.2 for my web. I installed this extension “Swapping image when hovering over in products – Opencart free module” and follow the instructions, but it is not working. can you help please, what will be the issue in it? Thanks, Regards Bobby

  3. Hello, the reason why it doesn’t work is because:
    In catalog/view/theme/default/template/product/category.twig the module search for
    “”
    But in file there is a difference on “img-responsive”/> . There is a space so “img-responsive” /> at the end.
    You can manually modify the file and replace:

    with:
    {% if product.thumb_back %}

    {% else %}

    {% endif %}

    That’s all and work for me…

  4. I have installed this plugin in my Opencart Version 3.0.3.8. But I cannot see the hover image upload option in the product section admin panel.

    can someone help me, what should I do?

LEAVE A REPLY

Please enter your comment!
Please enter your name here