Introduction

eLab – Electronics Store WooCommerce Theme Documentation

eLab - Your New Electronics Store out of the box! Launch your website today with a few clicks. eLab is fully compatible with WooCommerce. ELab – Electronics Strore WooCommerce Theme is tune with all devices, browsers and platforms, retina ready and comes with super-fast and user-friendly X Builder page builder plugin. No coding skill required to create or edit content.

Some of the features of the eLab – Electronics Store WooCommerce Theme include:
GDPR Compliant - Your guests will find the checkbox for opt-in consent below each booking form to accept your website terms and conditions before reservation.
Multilingual Support - Easily translate a website to any language.
Responsive & Mobile Friendly - eLab is fully responsive and looks great on all devices.
Built with SASS – the most stable and powerful professional grade CSS extension language
X Builder – drag & drop page builder
Compatible with Firefox, Safari, Chrome, and Edge
Bootstrap-based Responsive Layouts
Ability to have a Background image for your website
Ability to use any of 800+ Google Fonts
One-click demo content import
Product Catalog with WooCommerce
Ability to add products to a wishlist page
Ability to compare products on the store
Ability to add Revolution Slider to pages
Retina Ready
SEO ready
Contact Form 7 – Ready
MailChimp – Ready
Also, eLab is a WordPress Theme created for multivendor companies. This theme provides a tremendous opportunity to launch an online business and to properly maintain it. In just a few steps, you can develop a powerful multivendor website from scratch and step further to build your business.
eLab has the number of features, namely integration with Woocomerce, the responsiveness of the theme, retina ready, user-friendliness, drag&drop X Builder Plugin and integration with Docan and WC Vendor plugins. You do not need to understand even the fundamentals of programming to add the above-listed features. Everything is created for you by experienced web developers, you just need to implement it.

Getting Started

Installation of the theme

Installation of the theme

System Requirements

To install this theme you must have a working version of WordPress already installed. For information regarding the installing of the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Installation

You can install the theme just as you would install any other WordPress Theme.
To install the theme:
1. In the WordPress Dashboard, click on Appearance > Themes to open the Themes screen.
2. Click on the Add New button to open the Add Themes screen.
3. Click on the Upload Theme button and upload the zipped theme file you have received from ThemeForest.
4. Once the file is uploaded click on the Install Now button to install the theme.

What to do if the theme installation fails

What to do if the theme installation fails?

Fatal error: Can’t use function return value in write context

Fatal error: Can’t use function return value in write context in /wp-content/themes/elab/includes/theme/theme.php on line 245
Our theme uses latest PHP syntaxis. Older PHP versions don’t support this.
Please upgrade your PHP version on your site/server (at least PHP 5.6.2) and it will solve the problem – https://wordpress.org/about/requirements/.

PHP Configurations

If the installation stalls and fails to respond after a few minutes, or if WordPress gives you an error message, you are suffering from PHP configuration limits that are set too low to complete the process. You should contact your hosting provider and ask them to increase those limits to a minimum as follows:
  • max_execution_time 600
  • memory_limit 256M
  • post_max_size 32M
  • upload_max_filesize 32M
You can verify your PHP configuration limits by installing a simple plugin found here: http://wordpress.org/extend/plugins/wordpress-php-info. And you can also check your PHP error logs to see the exact error being returned.
Besides this, you can upload the theme using your FTP client, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server

Viewing System Status

You can also view some of your WordPress system settings by going to the eLab Theme System Status page. (Click on eLab > System Status in the WordPress menu.) This page will provide information about your WordPress environment and your server environment.
Any items that require your attention will be highlighted in yellow.

Theme Activation

Theme Activation

After completing installation of the theme, you need to activate your product under Dashboard -> eLab following these instructions:

1. Click on this Generate A Personal Token link. IMPORTANT: You must be logged into the same Themeforest account that purchased Motors. If you are logged in already, look in the top menu bar to ensure it is the right account. If you are not logged in, you will be directed to login then directed back to the Create A Token Page.

2. Enter a name for your token, then check the boxes for View Your Envato Account Username, Download Your Purchased Items, Verify Purchases You've Made and List Purchases You've Made from the permissions needed section. Check the box to agree to the terms and conditions, then click the Create Token button.

3. A new page will load with a token number in a box. Copy the token number then come back to this registration page and paste it into the field below and click the Submit button.

4. You will see a green check mark for success, or a failure message if something went wrong. If it failed, please make sure you followed the steps above correctly.
Paste the token in the provided box and click on the Submit button.
If activation is successful, you will see a green check mark.
You can follow this manual if activation fails.

Importing the demo content

Importing the demo content

Once the theme is installed, you will find a new eLab menu in the WordPress dashboard. You can use this menu to access the different theme-related pages.
Don’t know where to start on building up your site? We have created an option for you to recreate our theme demo site with just one click.
Tip: Before importing the demo content, you can check out the various demos at https://elab.stylemixthemes.com/. You can see the different demos and decide on which one suits your firm the best.
Click on eLab > Demo Import in the WordPress menu.
Tip: You can use the demo content as a starting point for your website and modify the content to suit your needs. In that case, select the demo layout that is most appropriate for your website.
Each demo layout requires a number of plugins to function properly. Fortunately, StyleMix Themes has made it easy for you to install the plugins and they will be installed automatically during demo setup proceed. In order to start the import proceed, click on the Setup layout button.
Note: Depending on the speed of your Internet connection, it may take some time to install all the plugins and import the demo content.
All the plugins which are not free come under our Extended License, so you don’t need to pay for their license to use them. Some of them might have messages requiring activation, but they are already activated on our side. No purchase code needed. When using them under our license you will need to wait for the plugin updates in our regular theme updates. If you want to be able to auto update them from wp-admin, you will need to buy your own personal license for that. However, we always include the latest versions of the plugins in every update of the theme.
Setup Layout feature installs all required plugins, imports the chosen demo layout and widgets. After finishing the proceed you can visit your site front page in order to see all ready features
Tip: If you want to start from scratch after viewing the demo content,you can remove the demo content using the Reset WP plugin (https://wordpress.org/plugins/reset-wp/). This plugin resets the WordPress database back to its defaults. It will delete all customizations and content, but it does not modify files; it only resets the database. Please see the above link for more details.

What if the Import fails or stalls?

If the import stalls and fails to respond after a few minutes You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your hosting provider and ask them to increase those limits to a minimum as follows:
  • max_execution_time 600
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M
You can verify your PHP configuration limits by installing a simple plugin found here: http://wordpress.org/extend/plugins/wordpress-php-info. And you can also check your PHP error logs to see the exact error being returned.

Update the theme

Update the theme

We will periodically provide updates of your theme. These updates are essential if you want to have a bug-free website as we give new features and improvements to the theme over time. Some of these updates might be needed in order to make the theme compatible with newer versions of WordPress.
Note: There is no risk of losing your settings and pages when you update the theme. However, any modifications you have made to the core theme files will be lost, so you should back up those files before you update the theme.
Tip: After upgrading the theme, you can update extra plugins via eLab > Plugins.
There are three ways of updating our WordPress themes to newer versions:
  • Updating via the WordPress Admin Panel (using Dashboard > Updates)
  • Update via the WordPress Admin Panel (using an extra plugin)
  • Updating via FTP

Updating via the WordPress Admin Panel (using Dashboard > Updates)

The easiest way of updating the theme is via Dashboard > Updates. When an update is available for your theme, you will get a notification in your WordPress Dashboard and you can update your theme by clicking on Dashboard > Updates and updating the theme (just as you would update any other installed theme).
Note: You will need the Token key you had generated when you had originally installed the theme. You will find this under the Settings > API Keys section of your profile on Themeforest.

Updating via the WordPress Admin Panel (using an Extra Plugin)

For this method you should first install Theme Upgrades Tool (http://wordpress.org/plugins/easy-theme-and-plugin-upgrades/). This plugin will update your theme when you upload the elab.zip file.
Once you have installed the Easy Theme and Plugin Upgrades plugin:
  • Download the theme file update from ThemeForest.
  • Extract the elab.zip file from the downloaded theme file.
  • In the WordPress dashboard, click on Appearance > Themes > Add New > Upload Theme > Browse...
  • Select the elab.zip file that you extracted in step 2 and click on Install Now.

Updating via FTP

Another way of updating your theme is via FTP. Extract the contents of the elab.zip file (which you will find inside the theme update file you have downloaded from Themeforest). The contents will be extracted to a folder called elab\ and to subfolders within the elab folder.
Tip: Make sure your unzipping software does not create any extra directory with the same name nested within the elab\ folder.
Using an FTP program, upload the elab\ folder (and its subfolders) to /wp-content/themes/ on your web server.
Note: The FTP program will give a warning that the elab\ folder already exists. Choose Replace All.
Final Tip: Whichever method you use to update your theme, clear your browser cache after each update if you notice anything off. Old theme files can sometimes persist in your local cache and make you think something’s wrong.

Setting Up your Website

Theme Customization

Theme Customization

You can perform general customization of the eLab Theme by going to Dashboard > Theme Options (just as you would normally do for any other theme). Here, you can set up the following:
  • General site settings such as logo; default visualization options; Google API credentials, etc.
  • Header and Footer for your pages.
  • Colors scheme.
  • Typography settings.
  • Page and archive pages options.
  • MailChimp API credentials.
  • Shop layout options.

General Theme Options

Here you can setup global website settings such as site content width, global sidebar and its position, Google Map API, Promo Popup banner and Preloader options.

Header settings

If you want to change your website header appearance and settings, you need to go Dashboard > Them Options > Header section. There are options for selecting the header styles, site logo/icon and title, enabling WooCommerce buttons, a list of categories, setting up iconboxes

Global Page Settings

You don’t need to edit every single page and disable title or sidebar manually. You can go to the Dashbboard > Theme Options > Page section and enable/disable the title and sidebar of your pages globally.

Setting the General Color Scheme for your Website

With the eLab Theme you can specify a basic color scheme for your website. You can create your own custom color scheme by defining a primary color, a secondary color, a third color and a site background color.
To specify the Color Scheme click on Dashboard > Them Options > Style in the WordPress menu.
Furthermore, the Style section contains typography settings such as body and headings font family, color, font size, etc.

Setting Up the Footer

You can customize the look-and-feel of the footer by changing a background color, a text color and links color. You can also control the width of footer columns as well as copyright text.
To set up or customize the footer of your web pages:
Click on Theme Options > Footer in the WordPress menu.
Note: If you want to have multiple footers, you can specify what information should be shown in the different footers by going to Appearance > Widgets and dragging widgets into the different Footer areas.

Social Networks

You can set links to your social network profiles in the Theme Options > Socials section

MailChimp Settings

In order to use a subscribe forms in the theme, you need to set up Mailchimp list ID and API key in the Theme Options > MailChimp section.

Setting Up the Archive Pages

You can add background images to archive pages of WordPress such as 404 page, category page, tags page and search page. To set up the background images click on Theme Options -> Archive pages.

Blog Page Settings

You can set up the global style for your blog page in this section. There are 3 styles are available for a blog page.
Blog Style 1 outcome:
Blog Style 2 outcome:
Blog Style 3 outcome:

Shop Page Settings

For setting up the global options of your shop page, you need to go to Theme Options > Shop. You can set up shop banner style, product hover style, products view styles, shop page and single product styles as well as a number of products per page.

Localization

Localization

You can change your site main language via Settings -> General -> Site Language
Theme language files are located in a ../wp-content/themes/theme-folder/languages/ folder.
There are several ways to fill up translations:
- It’s easy to localize your site using Loco Translate plugin. Here you can see the tutorial – https://localise.biz/help/wordpress/translate-plugin/beginners.
- Besides this, you can use a PoEdit platform. You can add translation via editing your .po file and at the end, PoEdit generates .mo file for you. Then you can upload ready translation files to primordial folder (../wp-content/themes/theme-folder/languages/). Before adding translations for static strings it needs to rename language files correctly according to your site languages. You can find a list of language codes at WordPress in your Language. As an example, the language code for French is fr_FR, so you would save the translated files as fr_FR.po first, then fr_FR.mo.
In order to safe your translations during theme updates, we recommend to save them in ../wp-content/languages/themes/ folder.

Multi Vendor Marketplace

Dokan

Dokan

The Dokan is a Multivendor Plugin to run the business as eBay or Amazon. It has a user-friendly design, easy website navigation for both admins and potential customers. Dokan has a Personalized Dashboard that simplifies the work process of admin. Dokan Plugin is perfectly integrated with eLab that gives an opportunity for you to easily create a webpage and, at the same time, to customize according to your needs and preferences.
Dokan has all the necessary features and functions that both business and customer needs. The business operations will be completed easy and fast. Further, you can choose what commission type you want to set, order email notifications and many more. The next feature of Dokan is Woocommerce plugin, this plugin allows the visitors to pay using various payment methods. Moreover, vendors can use coupons instead of making sales. Next, the vendors can customize the shipment method according to location or their business needs. In addition, you can control what vendors make sales and what does not.
Here you can find more information about Dokan plugin and its configurations - https://wedevs.com/docs/dokan/.
Following the steps below you can install the Dokan:
1. Navigate to Appearance and click Install Plugins:
2. When you click Install Plugins the following page will open. Here, click Install as shown on the screen:
3. After the installation process will end you should activate the plugin. Here, Activate the plugin and success, you can now use the Dokan plugin.
4. After activating the Dokan, it will redirect you to Setup Wizard page. Here you can setup Rates, Payment Methods, Vendor pages, etc. You can just click Continue button if you want to have default settings.
eLab is integrated with Dokan looks as following:
You can experience a live version of eLab integrated with Dokan at https://elab.stylemixthemes.com/demo-1/dashboard/:
User: vendor
Password: vendor
The Products Page will look as following:
This is how the Orders page will look like:

WC Vendors

WC Vendors

WC Vendors is the next Multivendor Plugin that can be used by e-commerce websites. WC Vendors is pretty similar to Dokan plugin as both of them are intended to complete the same functionality.
Features of WC Vendor has the Woocomerece plugin integration. Moreover, there are huge amount of possibilities for vendors as they can enrich their own media, sell the products and export the data as CSV files, vendors have their own accounts. However, shipment opportunities are limited. It can be either free shipment or vendors can use third parties. Further, the WC Vendors is integrated with WPML, it allows the vendors to switch the language.
Here you can find more information about WC Vendors Marketplace plugin and its configurations - https://docs.wcvendors.com/.
To install the WC Vendors Marketplace follow the steps below:
1. Navigate to Appearance and click Install Plugins:
2. When you click Install Plugins the following page will open. Here, click Install as shown on the screen:
3. After the installation process will end you should activate the plugin. Here, Activate the plugin and success, you can now use the Dokan plugin.
4. After activating the WC Vendors, click to Run the Setup Wizard button. Here you can setup Rates, Vendor pages, etc. You can just click Next button if you want to have default settings.
Success, the WC Vendor plugin is ready to use.
The WC Vendor will look as following:
The Settings Page will look as following:

Content management

Testimonials

Testimonials

Types of Posts

The eLab Theme comes with three built-in types of posts that are useful for multiple websites. The following table lists the various types of posts available:
Testimonials - Displaying testimonials from satisfied customers or clients.
Portfolio - Displaying portfolio of your cases.
Banners - Displaying advertisement banners for the shop.

Adding Testimonials

Testimonials are important for strengthening the credibility of your organization. You can easily add Testimonials using a custom post type of Testimonials
To add Testimonial posts:
1. Click on Testimonials > Add New in WordPress dashboard menu

Displaying Testimonials on Other Pages or Posts

Once you have created the Testimonial posts, you can display them all over the site by just inserting a X Builder Testimonials element.
To display the testimonials on the website:
1. Add the X Builder Testimonials element on any page or post where you want to display the testimonials.

Portfolios

Portfolios

If you have photos or videos connected with your projects, events, or services, you can display them in a portfolio on your website. You can add one or more portfolios of images and videos to your website. Portfolio is created as another custom post type called Testimonials. It has Categories that can be ordered as needed. Here you create just single post.
You can add an Image, Title and Category(es) for each Portfolio post.

Setting up Portfolio Categories

If you plan on uploading many portfolios to your website, it is a good idea to first create portfolio categories. This will help you segregate the portfolios based on their category, and display portfolios of just a particular category, if required.
To set up portfolio categories:
1. Click on Portfolio > Portfolio Category in the WordPress dashboard menu
2. Create categories just as you would create normal categories in Wordpress

Creating Portfolio Pages

To add Portfolio posts:
1. Click on Portfolio > Add new in the WordPress dashboard menu

Displaying the Portfolios

Once you have created the Portfolio posts, you can display them anywhere on the site by just inserting X Builder Portfolio element.
To display the portfolios on the website:
1. Add the X Builder Portfolio element on any page or post where you want to display the portfolios.
Outcome:

Shop Banners

Shop Banners

You can use the custom Banners post type to display promos, discounts and special offers in your online store. The banners can be displayed on the main shop page as well as in the categories menu.
To add Banners posts:
1.Click on Banners > Add New in the WordPress dashboard menu

Displaying Banners on Shop and Category Pages

You can display the created banners on the main shop page and certain product category pages.
To display a banner in shop page:
1.Click on Theme Options -> Shop in WordPress dashboard menu.
Outcome:
To display banners in the product category:
1.Click on the Products -> Categories section of WordPress dashboard menu.
2.Click on the category title from the list.
3.Select the banner from the Shop banner list.

Content management

Woocommerce Shop

WooCommerce shop

WooCommerce is the most popular e-commerce plugin for WordPress. Now you can have a shop with all e-commerce features on WordPress.
Before you start adding products, please go through the WooCommerce plugin settings and specify everything you need for your shop:
Adding the products: You can easily add new products via Products > Add Product
You can read more about Woocommerce here also - WooCommerce Documentation

Single Product Settings

Single products contain additional features that include possibilities for displaying product page in more complex layout. Options that Product Settings include:
Product Settings - select product style from the list of predefined styles;
Hint Images - add images with recommended dimensions to display section with images and hint text;
Product IconBox - add section with icon and title;
Additional Images - add special image for displaying it in Product Carousel Grid element.

Product Settings

The section contains product style selection feature. There are 4 style options in the product style list – Global Settings, Image Left, Image Right, Image Center.
When you select Global Settings, product uses a style which applied in the Dashboard -> Theme Options -> Shop section.

Product IconBox

You can display a list of titles with icons on a single product page. You are allowed to add 5 titles with icons.

Additional Images

The option for adding a special image that uses to display in Product Carousel Grid element of X Builder plugin.

Hint Images

Add images with the required dimensions to display special section with masonry grid images with hint text
To add hint text, click on an uploaded image

Adding Other Content

Adding Other Content

Other than the special types of content covered in the previous sections of this manual, you can also add regular content to your website as normal pages and posts. You can create your pages using Classic mode or the X Builder plugin editor.

Additional Options for Pages and Posts

The following additional options are available while adding pages and posts:
1. You can add sliders to the page (if you have set up sliders using the Revolution Slider plugin).
2. You can change the page background color and make title box transparent (for a particular page) using the Page Settings panel.

Using X Builder Plugin to Set Up the Pages

Using X Builder Plugin to Set Up the Pages

Your eLab Theme incorporates the X Builder plugin that helps you build pages quickly and easily with an intutive drag-and-drop interface.
Note. This appendix gives you a brief overview of using the X Builder to your pages/posts. For a detailed instructions, see the X Builder guide.

You can find X Builder Online Manual here

Working with X Builder

To add an element to the page, click on the needed element from the list of elements on the left and drag it to required place.
To make changes to any added element, hover the mouse pointer over the element. You will see icons that allow to move, edit or delete the item.
There are some tabs in the Elements section of the X Builder. These tabs contain elements of a particular category.

Miscellaneous Features

Miscellaneous Features

The eLab Theme also supports blogs. You can set up a custom blog page. Besides this, the eLab Theme is compatible with the WooCommerce plugin.

Adding a Blog to your Website

You can also have a regular blog on your website where you (or anyone with admin/author rights) can put up posts.
Note: Blog posts can be published from the WordPress admin area. Only someone with admin or author rights can put up blog posts.
You can assign any page you create as the start page of your blog by clicking on Settings > Reading > Static Front Page and selecting the page in the Posts page drop-down list.

Incorporating a WooCommerce Shop in your Website

WooCommerce is the most popular e-commerce plugin for WordPress. Now you can have a shop with all e-commerce features on your WordPress site.
Before you start adding products, please go through the WooCommerce plugin settings and specify everything you need for your shop.
Please see - WooCommerce Documentation for more details on setting up a shop using the WooCommerce plugin.

Using the Revolution Slider

Using the Revolution Slider

Your eLab Theme incorporates the Revolution Slider plugin that allows you to display a series of images or other content on your web pages as a slider or carousel. This is useful for picture galleries, introductions, etc.
Note: This appendix gives you a brief overview of using the Revolution Slider. Please see http://www.themepunch.com/revslider-doc/slider-revolution-documentation/ for more detailed instructions.
Before you can add a slider to a page/post, you first have to create the slider. Click on Slider Revolution in the WordPress menu to access the Sliders page. You can create a new slider from scratch or you can use a free or paid template.
Once the slider has been created, you can add it to your pages/posts in one of the following ways:
- In the page/post editor, add a shortcode [rev_slider alias=“xxx”] (where “xxx” is the name of the slider), or using the Classic Editor, click on the Add Element button and select a slider to insert it at your cursor location.

- In the Widgets screen (Appearance > Widgets), drag the “Revolution Slider” widget to a sidebar.

- Using X Builder, add a Revolution Slider widget/element to the page/post.
Again, thank you for purchasing this theme!
If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum at www.stylemixthemes.com