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 change phone number and icon in header

OpenCart 2.x. How to change phone number and icon in header

This tutorial will show you how to edit phone icon and phone number in header of Opencart template:

OpenCart. How to change phone number and icon in header.1.jpg

  1. Let’s change phone number first. Go to System -> Settings -> Edit -> ‘General’ tab and edit Telephone field:

    OpenCart. How to change phone number and icon in header2.jpg

  2. Now let’s change the phone icon. Inspect the icon using the Firebug developer tool and check its class, you’ll need to change it in template files. In our case the icon class is ‘fa fa-phone’. You can find information on how to use Firebug plugin here: Firebug. Mozilla Firefox plugin:

    OpenCart. How to change phone number and icon in header3.jpg

  3. Now go to the installation root of your site and opencatalog/view/theme/themeXXX/template/common/header.tpl file:

    OpenCart. How to change phone number and icon in header4.jpg

  4. Copy the class name and look for this code using CTRL+F combination:

    OpenCart. How to change phone number and icon in header5.jpg

  5. Open the Font-Awesome-icons page, there you will see a list of icons. Click on any of them and to see its class name:

    OpenCart. How to change phone number and icon in header6.jpg

  6. Just copy the class name and replace the original class name with it.

This is the end of the tutorial. Now you know how to change phone number and icon in header.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to change phone number and icon in header