Step 1 - Log into your WordPress Dashboard.

Step 2 - Install and Activate All Plugin.

Step 1 - Log into your WordPress Dashboard.

Step 2 - Go to Theme Options > Import/ Export.

Step 3 - Then Click on Import Demo

Step 4 - The Dummy content is really big and may takes more then 30 minutes to import depending where you are living, Do not interrupt/cancel the import process!

Step 5 - Done!

This video tutorial shows you how to Import Data Organiko Theme with just one click.

If you would like to learn the best practice of using Organiko theme, you can import content from our demo web site. Importing theme is performed using XML file located in theme ZIP file downloaded from Themeforest and following these steps.

If the script auto importing demo data doesn't works with your host, we had included demo data within the theme files, take a look at the folder /dummy-data.

3.1. WordPress Importer 3.2. Revolution Importer 3.3. Theme Options Importer 3.4. Widget Importer

If you have problems importing the demo ( example : infinite loading, error 505 with when using wordpress importer ) then you may have a problem with the server settings. Please create ticket in Support Center.

WPBakery Page Builder is the most popular drag and drop editor for Wordpress.

If you need dedicated support for this component, please visit: WPBakery Page Builder on Code Canyon

Here is Documentation of WPBakery Page Builder guide.

1. How to

1.1- How to enable swatches on all products at once

Note :- to use this feature you must have version 1.9.0 or higher of "woocommerce color or image variation swatches" plugin.

To enable this feature visit swatches tab under woocommerce/settings menu and enable checkbox "Enable default attribute options". Upon checking it you will see another table where you can configure your global attribute options.

Please remember that this feature will work only for products which does not have display type set. if you have existing products with "custom color or image swatches " as display type then global changes will not affect it but you can always change display type to "global values" in variation select tab to make global values work on those products. "global values" option in display type dropdown will be available only to attributes that are created under product/attribtues not for "Custom product attribute"(which you separate via "|").

1.2- How to use custom size for product swatches

First visit swatches tab under woocommerce/settings menu and define custom product swatches height and width there.

Then select custom as display type while configuring into variation select tab.

2. Global Attribute color or Image

First you need to setup global image or color for each attribute values.To do that visit attributes tab under products menu and add your attribute like this.

Once Attribute is added , click on settings icon to define its options.

Now add the options as shown in the image.

Once color or image value for all usable attribute and its options are set , you can use it on product.To use it on products visit attributes tab and select "color" inplace of custom product attributes and then click on add

Set your variations now by visiting variations tab and then visit variation select tab and select image or color in place of dropdown select and update the product.thats it now frontend will replace image or color with default select .

3. Shop/Category Page swatches

3.1- How to use

To display one attribute swatches on shop/category pages you need to check the "Enable one attribute swatches on shop/archive pages " checkbox in variation select tab and then select the attribute in next option as shown in the below image.

Note :- To make this feature work you must select "Custom Color or Image Swatches" as display type.

You can also upload the hover image for each option of that selected attribute. Once hover image is set , plugin will replace the hover image with product image on swatch hover on shop/category pages.

3.2- Change swatch size on shop/category pages

To change swatches size on shop/category page , visit swatches tab under woocommerce -> settings and define your preferable width and height.

4. Troubleshoot

4.1- Plugin options not get saved

This usually happens when number of inputs(form fields) on your page is higher then allowed number of input by your server.

Problem get solved in most of such cases by increasing max_input_vars .

Newer versions of PHP implement a php.ini directive called max_input_vars usually set to 1000. This means that posting > 1000 form fields for instance would be truncated preventing data from being saved.

This can be changed in php.ini file

max_input_vars = 2000

If you are on shared host you can increase it via .htaccess file

php_value max_input_vars 2000

If you are not familiar with php.ini or .htaccess files ,open a ticket with your host and tell them to increase max_input_vars in php.ini file.

Read more on this here

http://docs.woothemes.com/document/problems-with-large-amounts-of-data-not-saving-variations-rates-etc/

4.2- Wrong dimension for swatch hover images

Catalog image dimensions is a woocommerce feature. If you are experiencing wrong dimensions for hover images , you will need to set the correct dimension for catalog images at products/display under woocommerce/settings menu.

After changing it you may need to regenerate product thumbnails using this plugin.

https://wordpress.org/plugins/regenerate-thumbnails/

If you still getting same dimensions on shop page check media settings page configuration. For example - if you are getting 150*150 dimension on hover images and media settings page has 150 * 150 thumbnail size. try changing it and regenerating thumbnails using aforementioned plugin.

Here is Documentation of WooCommerce Variation Swatches and Photos.

Organiko theme includes the premium plugin - Revolution Slider.
Once you've installed and activated the Revolution Slider plugin, you will then see the menu item appear at the bottom of the WordPress menu, as below:

You can import the revolution slider we used in our demo, all slider are in the slider folder. To learn more about the Revolution Slider plugin please read the Plugin documentation

YITH WooCommerce Compare plugin is an extension of WooCommerce plugin that allow your users to compare some products of your shop. All products are saved in one complete table where the user can see the difference between the products. Each product features can be set with the woocommerce attributes in the product configuration. You can also add a simple widget with the list of products the users have added, where you can manage them. Also you can simply customize the compare table with your style, by editing the specific template.

Full documentation is available here

This plugin is 100% compatible with WPML

Sometimes the halfway is better: what if you are looking to a product in a list and its image is still too small?

You have to open its product page, waiting for its loading and finally observe what you are interested into. So why don't use a simple way to look immediately at the product's distinctiveness? Here it is what Quick View can offer you.

People are more attracted to what they can see clearly. And often the classic product lists are not enough to understand the real value of a product. That's when Quick View strikes successfully! Your clients will be free to look in a better way your products, reading also a small description with all the most important features and qualities you want to underline. In this way, they will be more focused on what they really want and they will proceed easily to the purchase step.

Main features:

- Add a button in product loop to open a modal window with the product summary using ajax.

- Choose to enable the prettyPhoto lightbox for images in quick view.

- Customize style of modal.

Full documentation is available here.

What can really make the difference in conversions and amount of sales is without a doubt the freedom to share your own wishlist, even on social networks, increasing indirect sales: can you imagine the sales volume you can generate during holidays or birthdays, when relatives and friends will be looking for the wishlist of your clients to buy a gift?

Offer to your visitors a chance to add the products of your woocommerce store to a wishlist page. With YITH WooCommerce Wishlist you can add a link in each product detail page, in order to add the products to the wishlist page. The plugin will create you the specific page and the products will be added in this page and afterwards add them to the cart or remove them.

Full documentation is available here.

This plugin is 100% compatible with WPML.

Step 1 - Login to the WordPress Dashboard.

Step 2 - From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.



Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button.

Your menu is now defined, and you can now add pages to it (steps below).

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. The Screen Options are located in the top right corner of your WordPress Dashboard.

Step 1 - Locate the pane entitled Pages.

Step 2 - Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.



Step 3 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Step 4 - Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

Step 5 - Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

Once you've created a menu and filled it with items, it's time to assign it to one of the theme pre-defined locations.

Step 1 - Go to Appearance > Menus and click Manage Locations.

Step 2 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.

Step 3 - Click the Save Changes button.

Organiko features Mega Menus. The mega menus are available only for top-level navigations items only in "Main Menu" area.
Follow the steps below to create a mega menu:

Step 1 - Add a an item to the menu editor. This has to be a top level item!

Step 2 - Click on arrow icon in the top right-hand and expand.

Step 3 - Seclect the columns number you want to use (from standard to 6) in Submenu Type.

Step 4 - Now, you need to add child menu items, which will represent columns in the mega menu.
First level of child items will represent Titles in each columns.
Add some sub child menu items.

Step 5 - Now, add child items to each of those columns. This will represent your actual sub-menu pages. Take a look at the image below.

Step 6

- If you want to Remove the Titles (First Column, Second Column Third Column) Go back to the Mega menu setting and check Hide Mega Menu heading(1).

- Adding Widget / Image to the Menu. To do this first you need to have a Widget set with some widget ( you can create new sidebar go to Appearance > Widget ).

- When you have set your sidebar with widget click on the sub child menu you want to turn into widget area ( we will turn the third column into a widget area), make sure it doesn't have sub menu.(4)

- Enter class icon FontAwesome for icon input. Ex: fa fa-heart.(3)

- DropDown menu align with Dropdown Align select(Alignleft, Alignright, Aligncenter, Fullwith, Auto).

- Choose image for DropDown menu Background Image.(4)

The menu dropdown should now look something like this :

You can upload your logo image in the Theme Options. Please, follow the steps below to upload your logo & favicon:

Step 1 - Login to your WordPress Dashboard.

Step 2 - Go to Theme Options > Logo.

Step 3 - Upload a Logo & Favicon (Used For normal header) and a Logo (Used for Stick Header).

You can upload your favicon image in the Appearance. Please, follow the steps below to upload your favicon:

Step 1 - Go to Appearance > Customize > Site Identity.

Step 2 - Upload your favicon. Should be a Png/Gif image.

Follow the steps below to find out how to change the page options:

Step 1 - Login to your WordPress Dashboard.

Step 2 - Go to Theme Options > Page .

Step 3 - Choose whether or not you would like to show page comments.

Step 4 - When you have finish to customize the color don't forget to save.

For each page you can change the title style, title background color, select to use a slider and much more! Check the screenshot and read the documentation to see how it works.

2.1. Header Setting 2.2. Title Bar Setting 2.3. Footer Setting

Take a look at Set Homepage section.

Select Layout - Select layout for Archive Post.

Image Default - Select an image for Feature post.

Crop Image - Choose whether or not you would like to crop the image of post on your Archive Post.

Image Width - Enter the value of the width of image on your Archive Post.

Image Height - Enter the value of the height of image on your Archive Post.

Show Post Title - Choose whether or not you would like to show title of post on your Archive Post.

Show Post Info - Choose whether or not you would like to show info of post on your Archive Post.

Show Post Description - Choose whether or not you would like to show description of post on your Archive Post.

Excerpt Length - Insert the number of words you want to show in the post excerpts.

Excerpt More - Insert the character of words you want to show in the post excerpts.

Select Layout - Select an image for Feature post.

Select Layout - Select an image for Feature post.

Select Layout - Select layout of Single Post.

Crop Image - Choose whether or not you would like to crop the image of post on your Single Post.

Image Width - Enter the value of the width of image on your Single Post.

Image Height - Enter the value of the height of image on your Single Post.

Show Post Title - Choose whether or not you want to show Post Title.

Show Social Share - Choose whether or not you want to show Social Share.

Show Post Info - Choose whether or not you want to show Post Info.

Show Post Navigation - Choose whether or not you want to show Post Navigation.

Show Post Tags - Choose whether or not you want to show Post Tags.

Show Post Author - Choose whether or not you want to show Post Author.

Show Post Comment - Choose whether or not you want to show Post Comment.

Show Post Related - Choose whether or not you want to show Post Related.

Show Post Tags - Choose whether or not you want to show Post Tags.

Sidebar Position - Select sidebar position in page Archive products.

Products Per Row - Enter number products per row.

Products Per Row For Layout Fullwidth - Enter number products per row for layout fullwidth.

Products Per Page - Enter number products per page.

Show.. - Choose whether or not you want to show Result Count, Catalog Ordering, Pagination,...

Sidebar Position - Select sidebar position in page single product.

Show.. - Choose whether or not you would like to show Product Title, Product Price, Product Rating,...

Custom CSS - Quickly add some CSS to your theme by adding it to this block. Add new CSS class or JS to your website, add it in this text box. This will add/overwrite the theme CSS,JS, so please be careful!

Step 1 - Log in to your WordPress Administration Panel (Dashboard).

Step 2 - Click the 'Posts' tab.

Step 3 - Click the 'Add New' sub-tab.

Step 4 - Start filling in the blanks: enter your post title in the upper field, and enter your post body content in the main post editing box below it.

Step 5 - As needed, select a category, add tags, post format, fill in the meta settings below the editor.

Step 6 - Upload a featured image for your Post.

Step 1 - Change Post Format to Gallery.



Step 2 - Scroll down until you see the Gallery Settings.



Step 3 - After finishing, Update your Post, it should looks like this

Step 1 - Change Post Format to Video.



Step 2 - Scroll down until you see the Video Settings.



Step 3 - After finishing, Update your Post, it should looks like this.

Step 1 - Change Post Format to Audio.



Step 2 - Scroll down until you see the Audio Settings.

Step 1 - Change Post Format to Quote.



Step 2 - Scroll down until you see the Quote Settings.

Step 1 - Change Post Format to Link.



Step 2 - Scroll down until you see the Link Settings.

To you show your posts you need to create a Blog page. Click here to check how create a blog page.

Organiko theme includes support for the WPBakery Page Builder plugin. WPBakery Page Builder comes with a lot of drag and drop modules to help you quickly and easily building your pages.

You can read more information with the documentation live at link https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress to understand how it works.

Step 1: Go to Pages > click "Add new" and then enter your page information.

You can create your page content with CLASSIC MODE or if you would like to create a complex page with page builder, click to "Backend Editor" to use WPBakery Page Builder plugin building your page.

Step 2: Add elements on page, drag and drop to manage its position and edit its content.

Click on "Publish" to save and publish your new page or "Save draft" to save it as a draft.

Here is how it works on our page

List of builder items ( included buider items build special for this theme )

Step 1 - Log in to your WordPress Dashboard, go to Contact > Add New



Step 2 - Give a Name to your form and change Mail Info.



Step 3 - Edit the Form field to change the Form Layout ( if you want to use one of the layout you saw on the demo check the next step )



Step 4 - Save your Form.

Step 1 - Log in to your WordPress Administration Panel (Dashboard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the WPBakery Page Builder plugin activated ).

Step 4 - Click on the Add Element button.



Step 5 - Select the Contact Form 7.



Step 6 - The Contact Form 7 Settings should appear. Select the Form you want to use you can also customize the Color and change the fields layout and button design.

Step 7 - Update / Publish your page.

Link to the Official Documentation of the Plugin.

Step 1 - Log in to your WordPress Administration Panel (Dashboard) > Pages > All Pages.

Step 2 - Select the Page you want to add Shortcode then press Edit button.

Step 3 - Click Add element button.

Step 4 - Select Shortcode you want to add.

Step 1 - Hover on shortcode and click on 'Edit' button.

Step 2 - Config shortcode in setting box.

Step 3 - Click Save to save changes.

Step 1 - Click 'Edit Page' includes Blog Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.

Extra class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.

Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.

Show image, title,.. - Choose whether or not show image, title, info, excerpt of post in this element.

Image Size - Select image size of post in this element.

Excerpt, Read More - Enter excerpt length, excerpt more, read more text and choose whether or not you would like to show read more text as new line. in this element.

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Banner Widget or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Heading - Enter Heading.

Sub Heading - Enter Sub Heading.

Image src - Upload image.

Link - Enter link.

Extra Class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Info Box or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select template in this element.

Link Text - Enter Read more text in this element. EX: Shop Now.

Extra Link - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Promotion Link Text - Enter Read more text in this element. EX: Promotion.

Extra Promotion Link - Choose whether or not show image, title, info, excerpt of post in this element.

Extra Class - Add a class name you wish to style particular content element differently. And remember refer to it in your CSS file.


Heading 1 - Enter Heading 1

Sub Title - Enter Sub title.

Description - Enter description in this element.

Image - Upload Image

Align image - Align Image


Heading 2 - Enter Heading 2

Image - Upload Image

Align image - Align Image

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Testimonial Slider or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select template in this element.

Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Order (by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.

Extra Class - Add a class name you wish to style particular content element differently.


Show image, title, excerpt - Choose whether or not show image, title, excerpt of post in this element.

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Instagram Feed or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - Configure shortcode.


Access Token - Enter Access Token in this element

Extra Class - Add a class name you wish to style particular content element differently.

Show Photos From - Select template in this element. Below is to show photos from Popular.

TagName/ LocationId/ UserId - Enter tagname/ locationId/ userId dependent of type 'Show Photos From'

Limit - Maximum number of Images to add.

Choose image size - Select image size in this element.

Columns - Select columns display in this element.

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Product Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Extra class - Add a class name you wish to style particular content element differently.

Columns - Select columns.


Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Show - Select show product type in this elment.

Product Count - The number of posts to display on each page. Set to "-1" to display all posts on the page. Hide Free - Hide free product in this element.

Show Hidden - Show Hidden product in this element.

Order(by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.


Show Sale Flash, Title.. - Choose whether or not show Sale Flash, Title, Show Product categories,... of post in this element.

Step 4 - Save your changes.

Step 1 - Click 'Edit Page' includes Product Carousel or Add new this shortcode.

Step 2 - Click 'Edit' to open a settings box if this shortcode is available on your page. If you add new shortcode, a settings box will display after you select. Scroll down the settings box and I will explain all fields in order.

Step 3 - configure shortcode.


Template - Select Template.

Columns - Select Columns.

Extra Class - Add a class name you wish to style particular content element differently.

Title Load - Please enter the text from the keyboard.


Categories - Select Categories. By default, all your projects will be displayed. If you want to narrow output, select Category(s) above and only selected category(s) will be displayed.

Show - Select show product type in this elment.

Product Count - The number of posts to display on each page. Set to "-1" to display all posts on the page.

Hide Free - Hide free product in this element.

Show Hidden - Show Hidden product in this element.

Order(by) - Show your Posts in Chronological Order and Select to show your posts will be displayed in ascending order when they are arranged from the oldest posts to the newest posts or in descending order when they are arranged from the newest posts to the oldest posts.


Show Sale Flash, Title... - Choose whether or not show Sale Flash, Title,... of post in this element.

Align Pagination - Align Pagination.

Step 4 - Save your changes.