Back to Top

Use LESS in Opencart

Updated 23 March 2016

Here, we will learn how to integrate LESS styling with the Opencart. First of all, we have to download the composer installer in the root of our Opencart using the command:

curl -s | php

Then, we have to create a composer.json file in the root and put the following lines into it:

    "require": {
        "leafo/lessphp": "0.4.0"

After pasting the above lines, we have to install the dependencies using the command:

php composer.phar install

It will create a vendor folder by default in which the LESS packages will be stored. To make an access to these files, I have included the package in the controller ‘module/less.php’. So, here’s the code of controller in which I have written the LESS hard-coded.

class ControllerModuleLess extends Controller {
 public function index() {

 $data['heading_title'] = $this->language->get('heading_title');

 $less = new lessc;

 $css = "@base: 24px;
 @border-color: #B2B;

 .underline { border-bottom: 1px solid green }

 #header {
 color: black;
 border: 1px solid @border-color + #222222;

 .navigation {
 font-size: @base / 2;
 a {
 .logo {
 width: 300px;
 :hover { text-decoration: none }

 $data['css'] = $less->compile($css);

 if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/less.tpl')) {
 $this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/module/less.tpl', $data));
 } else {
 $this->response->setOutput($this->load->view('default/template/module/less.tpl', $data));

The LESS must be written in the separate file.

Searching for an experienced
Opencart Company ?
Find out More

The LESS can also be read directly from a file and compiled as $less->compile(‘file_path’);

Here, is the simple code of the view file of less just showing the CSS:

<h3><?php echo $heading_title; ?></h3>
<?php echo $css; ?>

The output in the front end can be seen by inspecting in HTML and it is as shown:



For a thorough knowledge of the LESS, please do visit LESS Documentation.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home