How to Display Percentage Difference on Specials in OpenCart

It is a great way to encourage your customers to make purchases from your store by giving them specials. Sometimes, it is hard for them to figure out how much exactly they have saved. This is why we will show you how to display the percentage difference between the original price and the special.

OCmod modification

Since modifying core files is not recommended, we will use the integrated OCmod modification system, which is provided in OpenCart 2.0.x.

First, you need to create a new file with the extension ocmod.xml (e.g. somename.ocmod.xml). Please, be sure that the end of your filename is with this extension, because the Extension Installer in OpenCart will not accept it.

Paste this code in code in your file:

<modification>
    <name>ShowPecentageOnSpecial</name>
    <code>showpercentageonspecial_1</code>
    <version>1.0 (Initial)</version>    
    <link>https://isenselabs.com</link>
    <author>iSenseLabs</author>

    <file path="catalog/controller/product/product.php">
        <operation error="log">
            <search><![CDATA[$data['price'] = $this->currency->format($this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);]]></search>
            <add position="after"><![CDATA[
                $data['priceInt'] = $this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax'));
            ]]></add>
        </operation>
        <operation error="log">
            <search><![CDATA[$data['special'] = $this->currency->format($this->tax->calculate($product_info['special'], $product_info['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);]]></search>
            <add position="after"><![CDATA[
                $data['specialInt'] = $this->tax->calculate($product_info['special'], $product_info['tax_class_id'], $this->config->get('config_tax'));
                $data['specialSavings'] = round((($data['priceInt']-$data['specialInt'])/$data['priceInt'])*100, 2);
            ]]></add>
        </operation>
    </file>
    
    <file path="catalog/view/theme/*/template/product/product.tpl">
        <operation error="log">
            <search><![CDATA[<h2><?php echo $special; ?></h2>]]></search>
            <add position="after"><![CDATA[
                <h3 style="color:red;">SAVE <?php echo $specialSavings ?>%</h3>
            ]]></add>
        </operation>
    </file>
    
</modification>

Then we should go to your Administration Page > Extensions > Extension Installer and upload the file. After we get the message 'Success: You have installed your extension' we have to go to Extensions > Modifications and refresh the modifications by clicking the blue refresh button.

By adding this modification in your store, you will notice that a red text have been shown right after the special price:

Text styling

You can customize the style of the text by editing this line:

<h3 style="color:red;">SAVE <?php echo (($priceInt[0]-$specialInt[0])/$priceInt[0])*100 ?>%</h3>

The important thing here is that you must not change anything between the “<?php ?>” tags, unless the calculations will not work.

Paste this code in code in your file:

<modification>
    <name>ShowPecentageOnSpecial</name>
    <code>showpercentageonspecial_1</code>
    <version>1.0 (Initial)</version>    
    <link>https://isenselabs.com</link>
    <author>iSenseLabs</author>

    <file path="catalog/controller/product/product.php">
        <operation error="log">
            <search><![CDATA[$data['price'] = $this->currency->format($this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);]]></search>
            <add position="after"><![CDATA[
                $data['priceInt'] = $this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax'));
            ]]></add>
        </operation>
        <operation error="log">
            <search><![CDATA[$data['special'] = $this->currency->format($this->tax->calculate($product_info['special'], $product_info['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);]]></search>
            <add position="after"><![CDATA[
                $data['specialInt'] = $this->tax->calculate($product_info['special'], $product_info['tax_class_id'], $this->config->get('config_tax'));
                $data['specialSavings'] = round((($data['priceInt']-$data['specialInt'])/$data['priceInt'])*100, 2);
            ]]></add>
        </operation>
    </file>
    
    <file path="catalog/view/theme/*/template/product/product.twig">
        <operation error="log">
            <search><![CDATA[<h2>{{ special }}</h2>]]></search>
            <add position="after"><![CDATA[
                {% if specialSavings %}
                <h3 style="color:red;">SAVE {{ specialSavings|default }}%</h3>
                {% endif %}
            ]]></add>
        </operation>
    </file>
    
</modification>

Save this into a file called install.xml.

Compress the file and give it a name like percentage.ocmod.zip.

In OpenCart 3.x, you can't upload files like "ocmod.xml". The .xml file must be named install.xml and must be zipped into an ocmod.zip file so you can upload it into the Installer.

Here is how the change will look in your OpenCart 3.x storefront:

In Conclusion

We hope that you will find this tutorial useful and will help you to increase your purchases.