Thank You For purchasing ecode Woocommerce Theme.

Our team would be happy to help when you require. If you have any queries regarding the Theme, please feel free to drop us your query. We will get back to you with answers to your query within 24 hours.

How to Install WordPress ? http://codex.wordpress.org/Installing_WordPress

Quick Installation

NOTE: The quick installation is for first time installation of theme on fresh WordPress.





You can Install/Configure Our Template Using Step by Step Instructions

Step-1 : Upload Parent Theme Files.

You have two ways to install a theme.

1. First way: Upload Theme via FTP Client


  • Do not upload the Entire Zip File you get from TemplateMela. Please follow following Steps to upload theme via FTP:

Step 1: Extract the package, you have downloaded. In the package folder you will get below sub-folders.




Step 2: Extract the theme name zip file. Ex, ecode.zip




Step 3: After extracting zip file you will get one folder named theme. Ex, ecode.




Step 4: Upload the theme folder under "wp-content/themes" directory.





2. Second way: Upload Theme via WordPress admin panel



Step 1: Goto > Appearacnce > Theme then click on Add New button to select theme.




Step 2: Then click on Upload Theme button to select theme.




Step 3: Then click on Browse and Go to the Package folder and select Theme. Press Install Now button to install the theme.





Step 4: Theme has been installed. Click on the Activate Button to activate the theme.




Step 5: Here you go. You are done with theme installation and activation Steps. Now theme setup Steps are left.





Step 2 : Install & Setup Plugins.

Click on Begin Installing Plugins.





Select install to installed all required and recommend plugins

NOTE : TM Install Plugins option will be disable when all plugins is activate.





Plugins has been successfully installed and activate too.







2.1 Plugin Configuration

WooCommerce Plugin


  • If WooCommerce Plugin not installed then follow below step to install. .

Step 1: Click on Add New
Step 2: Search "WooCommerce" plugin
Step 3: Search Plugin




Plugin Activate Successfully.



  • If WooSidebars Plugin not installed then follow below step to install WooSidebars Plugin. .

WooSidebars Plugin

Click on Plugins > Add New > Search the WooSidebars plugin.

Then Click on Install Now button > Active button




Contact Form 7

After installing the contact form 7 plugins you have to add some code to create contact form

Click on contact

then click on add new to create new contact form


After click on add new button copy the code and paste it to create the contact form same as our live demo.

<div class="contact-input contact-subject">Subject<br />
[text your-subject] </div>
<div class="input-wrapper">
<div class="contact-input contact-name">Your Name (required)<br />
[text* your-name] </div>
<div class="contact-input contact-mail">Your Email (required)<br />
[email* your-email] </div></div>
<div class="contact-textarea contact-textarea">Your Message<br />
[textarea your-message] </div>
<p>[submit "Send"]</p>



Now call the shortcode into the contact page.


After creating contact form add element Contact Form 7 and select your contact form for display contact form.


Step-3 : Import Sample Data ( Parent Theme )

Step 1: Go to Admin Panel > Appearance > Tools > Click on Import.




Step 2: Click on WordPress (last option).




If you do not have installed WordPress Installer then only follow below Step.


Click on Install Now to install WordPress Installer.




Click on Activate Plugin & Run Importer to activate WordPress Installer.




Step 3: Click on Browse button to select the Sample Data file.



Step 4: Select demostore.WordPress.XML file to import sample data posts, pages, portfolios, menus etc. Then Click on Upload File and Import button.



Step 5: Select the Author you want to assign the user of sample data as author.


You MUST CHECK Download and import file attachment Option to get the images to be Imported. Press the Submit button

If you are not checking this checkbox, you will not be able to get the images and you will get "Failed to import Media". Still do not bother about this message. Only the thing is you will not get images, which you definatly will replace for your store.


Step 6: You are done with sample data import. Please check your posts, pages, portfolios and menus.





Revolution Slider Configuration

Import revolution slider

Import revolution slider from Admin > Revolution Slider > Click on Import Slider > Browse the tm_homeslider.zip files from sample data/tm_homeslider.zip -> Click on import Slider button -> submit









For More Details regarding Revolution Slider refer this documentation.

Step-4 : Page Configuration ( Parent Theme )

Homepage Configuration

Go to Admin > Settings > Reading > Reading settings


To display Homepage as landing page and posts listing page as Blog page follow below Steps:

Step 1: Select "A Static Page" option
Step 2: Select Homepage as Front Page
Step 3: Select Blog page as Posts Page
Step 4: Save Changes






WooCommercepage Configuration


WooCommerce Products Configuration


Admin Panel > Woocommerce > Settings > Products to change the Products settings.


Step 1: Click on Products tab
Step 2: Select "Shop" as Shop Page
Step 3: Save Changes




WooCommerce Payments Configuration


Admin Panel > Woocommerce > Settings > Payments to Select Payment Method.


Step 1: Click on Payments tab
Step 2: Select "Payment Method" as you want to display
Step 3: Save Changes




WooCommerce Checkout,Cart, My Account Configuration


Admin Panel > Woocommerce > Settings > Advanced to Select the Checkout Process and Cart Page and Account Page.


Step 1: Click on Advanced tab
Step 2: Select "Cart" as Cart Page
Step 3: Select "Checkout" as Checkout Page
Step 4: Select "My Account" as My Account Page
Step 5: Select "Terms and Conditions" as Terms and Conditions Page
Step 6: Save Changes




WooCommerce Shipping Configuration


Admin Panel > Woocommerce > Settings > Shipping to change the Shipping settings.


Step 1: Click on Shipping tab
Step 2: Click on Shipping Options tab
Step 3: Select "Enable shipping" as Shipping Calculations
Step 4: Save Changes




Step 5: To Add Shiping method and zones follow this document



Select Checkbox and Enable other shipping method like Free Shipping , International Flat Rate , Local Delivery as Flat Rate.



Go to Admin Panel > Appearance > Menus


Step 1: Name your Menu
Step 2: Check TM Header Navigation
Step 3: Save Menu
And you are done with Parent Navigation.





Go to Admin Panel > Appearance > Menus


Step 1: Name your Menu
Step 2: Check TM Header Top Links
Step 3: Save Menu
And you are done with Header Top Links.





Go to Admin Panel > Appearance > Menus


Step 1: Name your Menu
Step 2: Check TM Header account Links
Step 3: Save Menu
And you are done with Header account Links.





Go to Admin Panel > Appearance > Menus


Step 1: Name your Menu
Step 2: Check TM Header Custom Links
Step 3: Save Menu
And you are done with Header Custom Links.





Go to Admin Panel > Appearance > Menus


Step 1: Name your Menu
Step 2: Check TM Footer Navigation
Step 3: Save Menu
And you are done with Footer Menu.






Step-6 : Shop Configuration

  • We are providing diffrent customizer For Shop Configuration.

1. First option


Step 1: Goto Appearance > Customize
Step 2: Select Woocommerce Tab
Step 3: Select Product Images Tab
Step 4: Final Set The Product Size And Thumbnail cropping As Mentioned And Click On Publish Button



2. Second option


Step 1: Goto Appearance > Customize
Step 2: Select Woocommerce Tab
Step 3: Select Product Catalog Tab
Step 4: Final Give & Set The Product Size As Mentioned And Click On Publish Button


Step 1: Shop Page Display

Choose what to display on the main shop page.

Select Show Products From Dropdown.


Step 2: Category Display

Choose what to display on product category pages.

Select Show subcategories From Dropdown.


Step 3: Default Product Sorting

How should products be sorted in the catalog by default?

Select Default sorting (custom ordering + name)


Step 4: Products Per Row

How many products should be shown per row?

set 3 Products


Step 5: Rows Per Page

How many rows of products should be shown per page?

set 4 Rows





Step-7 : Parent Theme Widget Configuration

Widget Area Configuration


Shop Sidebar

  • if widget-area Shop Sidebar NOT avialable then follow below Step to Craete Shop Sidebar Widget area.

step 1 : Click on Appearance
step 2 : Click on Widget Areas
step 3 : Enter Title for widget arera
step 4 : Click on Pages Tab from conditions.
step 5 : Select Pages in which you want to diaplay shop sidebar widget area.


step 6 : Click on Advanced TAB
step 7 : Click on Post Types TAB
step 8 : Select Post Type pages in which you want to diaplay shop sidebar widget area.



step 9 : Click on Taxonomy Archives TAB
step 10 : Select Taxonomy Archives pages in which you want to diaplay shop sidebar widget area.



step 11 : Then Click on Woocommerce TAB
step 12 : Select Woocommerce pages in which you want to diaplay shop sidebar widget area.



step 13 : Select Main Sidebar to replace
step 14 : After set all Condition save widgetarea by Click on Publish / Update Button.





We Provide You different widgets area for making your site dynamic.


  • These are the widget areas which are used in this parent WCM030063 theme.




You can import the widget settings using Widget Importer & Exporter follow the below steps

You have already installed Widget Importer & Exporter plugin.
Step: 1 Tools -> Widget Importer & Exporter.
Step: 2 Browse WCM030063_package\Sample Data\Parent Sample Data\ecode_widget_settings.wie
Step: 3 import button.



After successfull widget setting you will see below screen.



Also you can set it one by one here as below.


Theme Widgets

1 : Shopsidebar Area

You can Drag and Drop Active Product Filters, Filter Product by price, Filter Product by Attribute,Product Tag Cloud, Products By Rating, TM-Left Banner Widget into Shop Sidebar Area

Active Product Filters
Title: Active Filters

Filter Product by price
Title: Filter by Price

Filter Product by Attribute
Title: Filter by
Attribute: Select your attribute
Display type: Select your display type
Query type: Select your query type

Product Tag Cloud
Title: Product Tags

Products By rating
Title:Top rated products
Number of products to show: 2

TM Left Banner Widget
Image Url: left-banner.jpg
Link Url: Link Url
Check: Open Link In New Window

2 : Main Sidebar Area

You can Drag and drop Search, Recent Posts, Recent Comments, Archives, Categories, Meta into Main Sidebar Area

3 : Header Shopping Cart Area

You can Drag and drop WooCommerce Cart into Header Shopping Cart Area.


4 : Header Search Widget Area

You can Drag and drop TM- Advanced search Widget into Header Search Widget Area.


5 : Home Category Widget Area

You can Drag and drop Product Category Widget into Home Category Widget Area.


6 : First Footer Widget Area

You can Drag and drop TM - Footer Contact Us Widget into First Footer Widget Area.


TM - Footer Contact Us Widget
Title: Contact info
Introduction: your link text
Link URL: #


7 : Second Footer Widget Area

You can Drag and drop TM - Static Links Widget into Second Footer Widget Area.


TM - Static Links Widget
Title: Finf it fast
Introduction: your link text
Link URL: #


8 : Third Footer Widget Area

You can Drag and drop TM - Static Links Widget into Third Footer Widget Area.


TM - Static Links Widget
Title: quick links
Introduction: your link text
Link URL: #


9 : Fourth Footer Widget Area

You can Drag and drop TM - Blog Posts Widget into Fourth Footer Widget Area.


TM - Blog Posts Widget
Title: Latest News
Introduction: your link text
Link URL: #


10 : Fifth Footer Widget Area

You can Drag and drop Newslatter and TM - Follow Us Widget into Fifth Footer Widget Area.


Newslatter
Title: newslatter


TM - Follow Us Widget
Title: Follow us
Introduction: your link text
Link URL: #


11 : Footer Bottom Widget Area

You can Drag and drop Woocommerce Accepted Payment Method Widget into Footer bottom Widget Area.


TM - Follow Us Widget
Woocommerce Accepted Payment Method Widget
Title: Accepted Payment Methods



Step-8 : Theme Translation

For translating the theme you need to add the plugin WPML.


For adding WPML plugin follow below Steps:
Step 1: Go to admin panel
Step 2: Click on plugins option
Step 3: Add New plugin
Step 4: Upload plugin
Step 5: Select the directory where the plugin resides and install it.
Step 6: Activate plugin.


As this plugin is pro version you have to buy it we don't provide it with our theme package.

Step 8.1 :Language Setup

The languages section allows you to turn a WordPress site multilingual.
To manage languages, go to WPML > Languages .
When you configure WPML for the first time, you need to choose the language of existing content.


You follow up this documentation for more on how to setup language.
Language Setup

Display the language switcher

You can display the language switcher in sidebar, in the footer by selecting the options available when you setup a new language.

Step 8.2 :Select Theme Translate Option

WPML allows to get translations for texts in themes and plugins in who ways:
1) The traditional .mo files (good for when you already got that with the theme).
2) Translating the theme’s texts directly from WPML


Select translating the theme by WPML option.
And click on Save button.

Step 8.3 :Scan Theme Strings for translation

After you clicked on save button you would be able to see the option strings in the theme.
Click on scan the theme for strings.
And it will display the strings that are translated and not translated.


Step 8.4 :String Translation

WPML’s String Translation module is part of the Multilingual CMS package. To enable it, you first need to download and install from your WPML.org account.
Then, go to WPML->String Translation.



1) Add the translation of the text into your language.
2) Check the box for translation is complete.
3) And the save the translation.
4) Same way tranlsate all the strings that are not translated.

For more details regarding the WPML plugin follow this documentaion


There is Four child theme listed below.

  1. 1).  

    ecode_Layout2

  2. 2).  

    ecode_Layout3

  3. 3).  

    ecode_Layout4

  4. 4).  

    ecode_Layout5


Step-1 : Upload Child Theme Files.

  • Please, read the whole section, before attempting to install the theme.
  • We recommend to use this theme on a clean installation or existing shops without custom modifications.
  • IT IS RECOMMEND TO ALWAYS BACKUP YOUR SYSTEM BEFORE MAKING ANY UPGRADES OR CHANGES!


You have two ways to install a theme.

1. First way: Upload Theme from Admin panel


  • Do not select the Entire Zip File you get from TemplateMela. Please follow following Steps to upload theme from Admin Panel:

Step 1: Goto > Appearacnce > Theme then click on Add New button to select parent theme.






Step 2: Then click on Upload Theme button to select parent theme.




Step 3: Then click on Browse and Go to the Package folder and select Parent Theme. Press Install Now button to install the parent theme.





Step 4: Parent Theme has been installed. But don't activate the parent theme.




Step 5: Now you have to upload your child theme same as parent theme.




Step 6: Child Theme has been installed. Now activate the child theme.




Step 7: Here you go. You are done with theme installation and activation Steps. Now theme setup Steps are left.




2. Second way: Upload Theme from FTP


  • Do not upload the Entire Zip File you get from TemplateMela. Please follow following Steps to upload theme via FTP:

Step 1: Extract the package, you have downloaded. In the package folder you will get below sub-folders.





Step 2: Extract the theme name zip file. Ex, ecode.zip




Step 3: After extracting zip file you will get one folder named theme. Ex, ecode.




Step 4: Now Upload the theme folder under "wp-content/themes" directory.





Step-3 : Import XML file and Widget file Same as parent theme


Step 1: Go to Admin Panel > Appearance > Tools > Click on Import.




Step 2: Click on WordPress (last option).




Step 3: Click on Browse button to select the Sample Data file.




Step 4: Select ecode-layout2.WordPress.XML file to import sample data posts, pages, portfolios, menus etc. Then Click on Upload File and Import button.



Step 5: Select the Author you want to assign the user of sample data as author.


You MUST CHECK Download and import file attachment Option to get the images to be Imported. Press the Submit button

If you are not checking this checkbox, you will not be able to get the images and you will get "Failed to import Media". Still do not bother about this message. Only the thing is you will not get images, which you definatly will replace for your store.


Step 6: You are done with sample data import. Please check your posts, pages, portfolios and menus.





Step-5 : Child Widget Configuration

ecode_layout2

ecode_layout3

ecode_layout4

ecode_layout5

  • The widget areas are used in child theme are same as parent.




Need More Help?

Once again, thank you so much for purchasing the theme. We are glad to help you if you have any questions relating to this theme. You can contact us and submit technical Supprot Ticket from our support desk https://www.templatemela.com/support/