TheLeader - Multi-Purpose WooCommerce Theme

Compatible with: WooCommerce 2.2.x

You may contact us on:

Current documentation was created to help you with quick installation and configuration of  TheLeader theme. Please, read it carefully to avoid most of potential problems with incorrect configuration.

Once you will have activated the theme you will need to change some of the pages and settings for optimal performance. That's why, please, do not contact Support center beforehand. Read firstly the documentation, implement all the steps following the instructions and only after that, if the issues persist, contact us.

Before installing TheLeader theme, it is assumed that you have a working WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below. 

For detailed Wordpress installation instructions visit

For detailed WooCommerce installation instructions or for more information visit

Download the zipped package from ThemeForest and extract to your desktop.

In the extracted package you will find file which is the WordPress theme.

You can install the theme in two ways:


If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see below).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host. 


Our theme is fully compatible with WooCommerce plugin, but it's not included in theme package. You should install WooCommerce plugin before demo content import:

After succesfull plugin installation you should change some WooCommerce options.

Go to WooCommerce > Settings > General and disable Lightbox.

Our theme uses page builder, that provides the composition of your page easy and handy. You may find the main documentation from plugin developers with detailed information about features and functions in Visual_Composer_documentation folder, and also by watching video tutorial.

The installation of Visual Composer would be provided for you after theme activation.

Install and activate plugin.
Go to Settings > Visual Composer and select for which content types Visual Composer should be available during post creation/editing.
In this item we will show only some effects, which were implemented in our theme and most of those you are interested in. They are:

Parallax effect

Create page (Pages > Add New). Ensure the Visual Composer is enabled and add Row.

Edit the Row you wish to add the parallax background to.

  1. Enable Full width section.
  2. Enable Parallax if you wish to apply the parallax effect.
  3. Go to Design options tab. Add a background color if required.
  4. Select a background image from your media library.

Video background for page

Ensure the Visual Composer is enabled and add Row. Edit the Row you wish to add the video background to.


  1. Enable Full width section.
  2. Add links to your video.
  3. Select a poster image from your media library.

The next step gives the opportunity to install automatically the Home Page with banners and product sliders, the page Contact Us with contact form shortcode, Blog page and products.

But do this at once after installation Wordpress and TheLeader theme, as this function works with database and it can break your settings.

Go to Theme Options > Import/Export, select desired version and press Install Demo Data button.

Be attentive, such pages as Shop, Cart, Checkout, My account etc are WooCommerce pages and should be provided for you after WooCommerce plugin activation. If you didn't install them automatically, create pages manually using special WooCommerce shortcodes.

You can make installation of some our pages manually as well

Follow the steps below and you will be adding content in no time.

Manual import

You may import XML files, where some demo data from our site are, which can facilitate your work with theme. XML files (theleader.woo_commerce.xml and 3 home page variants) you can find in the archive (inside XML_data folder).

For this you need:

  • Navigate to Tools > Import > WordPress > upload chosen home.xml file, press Upload File and import
  • Select the XML file and upload it.
  • Check Download and import file attachments and press Submit button
Do not forget: 
- Folder wp-content/uploads should have permissions 777. 
  • Go to Settings > Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage.


Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings > Reading, set the Posts page to your just created blog page.

You can adjust Blog page layout in Theme Options > Blog Layout.



Before you begin TheLeader updating process, we recommend to do the backup of all your files!

We want to warn the clients who are already using our theme: updating theme to version 1.5 may cause some mess on the pages with Sections and Parallax Effect! This is due to changes made in the code and separated Visual Composer. Therefore, after the upgrade to TheLeader version 1.5 be ready that you will need to recreate those pages!

Please take our apologies for the inconveniences and we'll be grateful if you treat it with understanding .

Always create a backup of all your files and database before upgrading!

Also delete wpbakery folder from wp-content/themes/theleader before update to version 1.5!

Follow the steps below to update theme through FTP:
  1. Download the zipped package from ThemeForest and extract to your desktop.
  2. In the extracted package you will find archive, which is the WordPress theme.
  3. Extract zip file and upload only extracted theleader folder to /wp-content/themes/ folder on your server with overwriting.


Do not forget to re-save your TheLeader options after upgrading the theme. Navigate to admin panel > Theme Options and hit Save changes.

TheLeader supports custom WordPress menu. Navigate to WP Admin > Appearance > Menus page and create menu.

There is possibility to use different menu for desktop (Main menu) and mobile (Mobile menu) versions. Select the newly created menus on the Manage Locations tab as it mentioned on screenshot and press Save button.

Also you can use image in menu.

To add Image add Links subitem to your item. Fill in fields:

URL - destination url of your image;

CSS Classes - should be image-item ; 

Description - insert path to your image.

Image always should be the last subitem!

To activate CSS Classes and Description, open Screen Options and select these items.


Theme supports Revolution Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folder called "Revolution_Slider_documentation" that contains the documentation from the authors of the slider. Please, refer to it for further information about slider settings. Slider can be added to any page.

Revolution Slider

To setup Revolution Slider follow the next steps:

1) If you want, you may use our demo slides by importing the archive, as it mentioned on the screenshot.

2) If you want to create new slider navigate to Revolution Slider > Create New Slider.

Pay attention for the slider to be full width on the home page, you need to select necessary slider from Show revolution slider instead of breadcrumbs and page title drop-down list during creating home page. Also you may insert slider instead of breadcrumbs on any other page.


Color Scheme




Products Page Layout

Single Product Page

Blog Layout


Contact Form


Custom CSS

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!


First of all allow the registration. Navigate to Settings > General > Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

If you want to receive feedback from your visitors, having a Contact Us page on your site is an easy way to achieve that.

Go to Pages > Add new and create a page called "Contact Us" (or whatever you want your contacts page called) and set the page template (under page attributes) to Contact Page. It inserts form for feedback on page. Add other content for page. We have used the following:

<h3>Place for nice title</h3>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<h6>Contact informations</h6>
30 South Park Avenue
San Francisco, CA 94108
<strong>Phone:</strong> (123) 456-7890
<strong>Fax:</strong> +08 (123) 456-7890
<strong>Email:</strong> <a href="#"></a>
<strong>Web:</strong> <a href="#"></a>

To choose contact page layout, add your email for contact form, navigate to Theme Options > Contact Form.

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options > Portfolio and set necessary options.

You may create New Projects at Portfolio > Add New.

There are several shortcodes which can be used in TheLeader theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

You can create additional sidebars to add your own content and functionality and to use different sidebars on different pages (posts). Navigate to Appearance > Widgets. Fill in Custom Sidebar title and press Add Sidebar button. See screenshot.

Place necessary widgets into newly created sidebar. Then create page (Pages > Add New) and on the right side of the Page Layout area choose Sidebar Position, necessary Sidebar Width and desired Widget Area.

There are 15 default widget areas, which you can use to add your own content and functionality. There are 8 widgets in the sidebars, 10 in the footer areas.

Main sidebar:

- Text widget with content
- Categories
- 8theme - Recent Posts

Shop sidebar:

- WooCommerce product categories
- Text widget with content
- WooCommerce - Price filter
- WooCommerce Layered Nav (Attribute: size; Display Type: List)
- 8theme - Featured Products
- 8theme - Recent Posts

Single Product Page sidebar:

- WooCommerce product categories
- WooCommerce Products

Right Side Panel area:

- 8theme Flickr photos
- Text widget with content
- 8theme - Recent Posts
- Meta

Footer 1 Widget Area:

- WooCommerce Products widget

Footer 2 Widget Area:

- WooCommerce Recent Comments

Footer 3 Widget Area:

- WooCommerce Top Rated Products

Footer 4 Widget Area:

- Testimonials

Footer 5 Widget Area:

- Text widget "ABOUT COMPANY" with following code:

<div class="with-map">
 <p>Mauris adipiscing mauris fringilla turpis interdum sed pulvinar nisi malesuad.</p>
 <p>30 South Avenue, San Francisco, CA 94108<br>
  <span class="phone">(+48) 798 798 798</span>

How to add Twitter and Facebook like buttons read here:

- Twitter
- Facebook

Footer 6 Widget Area:

- Text widget "ABOUT OUR SHOP" with content

Footer 7 Widget Area:

- 8theme - Recent Posts

Footer 8 Widget Area:

-8theme - Flickr Photos

Footer Copyrights:

- Text widget with following code:

<p><img src="YOUR_PATH/wp-content/themes/theleader/images/logo-small.png" class="logo-small">Wordpress DEMO Store. All Rights Reserved.</p>
Footer Links:

- Text widget with following code:

<ul class="links">
 <li><a href="#">SITE MAP</a></li>
 <li><a href="#">SEARCH TERMS</a></li>
 <li><a href="#">ADVANCED SEARCH</a></li>
 <li><a href="#">CONTACT US</a></li>
Twitter Feed widget

You may display your Twitter feed in the sidebar to bring more dynamic content into site, promote your Twitter feed and get new followers by using "8theme - Twitter Feed" widget.

If you get an error on frontend, please, check permissions on your wp-content/themes/idstore/code/cache folder, it should be 777 with recursion.

The translation file you can find in languages folder (/wp-content/themes/idstore/languages). Edit the .pot file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po into languages folder. It will generate both a .po and .mo file for your translation.

Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

TheLeader fully supports Child Theme. 

A WordPress child theme is a theme that inherits the functionality of the parent theme. With child theme you can make modification or add additiona functionality to parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.

You may read how to create child theme here