Welcome To Outstock Theme
WooCommerce Responsive Funiture Theme

Introduction

Thank you for purchasing our theme. In this document, we provide all kinds of good information with all the details you need to use our theme. We hope you have fun and enjoy working with our theme. If you need more help, please feel free to open a ticket on our support center.

Before Getting Started

If you are not familiar with WordPress, please get accustomed with it before proceeding to using our theme. Here are some links that will help you to become more confident with WordPress:

Requirements & Compatibility

Requirements

To run WordPress your host just needs a couple of things:

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

Compatibility

Our theme is compatible with these browsers:

Installation

Wordpress Core

You download and install WordPress version 4.3 or later

Theme Package

To download, you need to log into your ThemeForest account and go to your http://themeforest.net/downloads page. Locate the theme that you purchased in your Downloads list and click on the Download button

If you download All files & documentation, you will unzip it. Then, you find the installable file inside.

You can also download only the Installable Wordpress file.

WordPress Installation

Follow the steps below to install via WordPress:

  1. In your WordPress Admin Panel, go to Appearance > Themes
  2. Click on the Add New and Upload Theme buttons
  3. Click on the Choose File button and navigate to find the Outstock.zip file on your computer and click on the Install Now button
  4. Wait while the theme is uploaded and installed
  5. Activate the newly installed theme
  6. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
WordPress Installation
Please note that some hostings have a restriction on a size of a file that you are uploading. If you have any warning, you will contact your hosting provider. They should increase your maximum upload size.

FTP Installation

Follow the steps below to install via FTP:

  1. Log into your hosting space via an FTP software
  2. Unzip the Outstock.zip file and ONLY use the extracted Outstock folder
  3. Upload the extracted Outstock folder into wp-content > themes folder
  4. Go to Appearance > Themes and activate Outstock theme
  5. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
FTP Installation
NOTE: to use new design for home page 7 and up you should install outstock2 (outstock2.zip) theme in full package downloaded Wp_outstock_package_2.x. Before import or use outstock2 theme please ensure that database is fresh wordpress (no data import before) and no LionThemes Helper plugin installed before. That will make mixed content when import the new

Register purchased code

After activated our theme, you must register your purchased code to install and update plugins as well as use theme features.

To get your purchase code you can go to your account dashboard / download here:

Purchased code

Then you can put in this page from red message in dashboard:

Purchased code

Or from wordpress menu, then put on text field and submit, if it return green message that is successful.

Purchased code

Required Plugins

After registered purchased code, you will get a notification about installing the required plugins. You go to Appearance > Install Plugins to install them.

Install Required Plugins
Please note that you do not purchase directly Visual Composer and Revolution Slider plugins. So you can not update them by yourself. It is also not recommended. When they have a new version, we will be careful to test and release the new theme's version.
We also notice that you should not update other plugins without updating the theme. Please see our changelog to make sure the current theme's version is compatible with the new plugin's version.
Install Required Plugins Install Required Plugins Install Required Plugins

Sample Data

Manual import

We can import content for projects, contact form,..

Login to your WordPress dashboard, navigate to Tools - Import. Click on WordPress link on the table then click Install Now button on popup window to install WordPress Importer.

Visual Composer Elements List

Click on Activate Plugin & Run Importerlink to begin

Visual Composer Elements List

Click "Browse..." button and select XML files in "sample-data/exported_files" folder. :

Click on Upload file and import button

Visual Composer Elements List

On the next interface, select existing user on dropdown, check on Download and import file attachments to download sample images.

Click on Submit button to import.

All the content blocks are for sample, after importing finished, you have to edit them. Go to Content Blocks menu to see all, click on each block to edit.

If the process Import Data fails , you can import the data again

Outstock import

We can import all content, slideshows, widgets, mega main menu settings, theme options, menu localtion by only one click.

Outstock to import data
The menu items can not be imported, so we must add them by manual in Appearance > Menus follow Menu document section.

Note

You must reload page after import finished.

When finish import data, you must go to page manage and edit home page all product category blocks and re-setting to new category ID.

Outstock to import data

Outstock to import data

Updating The Theme

Manual Update

Follow the steps below to manually update the theme:

  1. First, you download the new theme package from themeforest. You have to log into your themeforest account and navigate to Downloads tab. You find the Outstock theme in your purchased themes list.
  2. You can delete the current theme. Don't worry about this. Your data won't be lost.
  3. You upload the new theme package via Wordpress or FTP software.
Please ensure that you only upload the installable wordpress file. If not, you may get an error message: The package could not be installed. The theme is missing the style.css stylesheet.

Theme Options

After activating our theme, you can go to Theme Options to configure the theme. Below will explain what you can do with Theme Options.

Theme Options
  • General: In General tab, we can upload logo images, favicon icon for the website. We recommend logo image in .PNG file format for all logo images. For the favicion, use an image in .ICO file format, the image size is 16x16 pixels.
  • Color: manage your site color
  • Header:In this tab, we can select header layout, there are 3 layouts of header. We can also change the mobile menu label, enter phone, email, select top menu ....
  • Footer: we can select footer layout but In this theme have only layout footer, enter copyright information, payment icons, newsletter and select menus for footer..
  • Font: Click on "Fonts" tab to change font for text, heading, menu. There are some options to select for each font like font family, back up font family, font weight and style, font size, line height, color. We can use default options or change any font like you need. If we want to restore default options, click on "Reset Section" button. Watch the video below, we change some options then restore default.
  • Layout we can select page layout is full width or box, select theme preset and turn off the style switcher.
  • Brand Logos we can add and remove brand logo in this tab. Click on "Add Slide" button to add a new logo then click on "Upload" button upload brand logo image. We recommend the logo image size is 185x105 pixels. We can add Title and Link to a logo.
  • Sidebar: Click on "Sidebar" tab to disable or change position for each sidebar. Just select "Left" or "Right" position for sidebars.
  • Portfolio: Click on "Portfolio" tab to change background, portfolio columns, projects per page, related projects title.
  • Product: we can upload background for shop pages, change number of products per page, and add enter social sharing code. For social sharing code, go to http://www.sharethis.com or http://www.addthis.com/ then follow guide on website to create sharing button and get code.
  • Blog: we can upload background for blog header, select blog layout, change readmore text and change options for posts carousel.
  • Error 404 Page: Error 404 background: We can edit background color and background images show in this page.
  • Custom CSS: In this tab we can add your custom css in right black box..
  • Less Compiler: Turn on this option to apply all theme options. Turn of when you have finished changing theme options and your site is ready. We can turn on or turn off it.
  • Import / Export: port and Export your Redux Framework settings from file, text or URL..
  • Theme Information: We can see mini demo themes in this tab.
  • Import / Export: port and Export your Redux Framework settings from file, text or URL..
  • Options Object:Show Object in Javascript Console Object

Newsletter Popup

Newsletter Popup settings

Widget Area

You can setting form in here

Widget Area

You can change text in here

Widget Area

Widgets & Sidebars

To manage widgets, you go to Appearance > Widgets. Just drag and drop widgets over to the sidebar.

Outstock comes with many custom widgets and 4 sidebars. You can also easily add a new sidebar.

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in sample-data/exported_files folder.

Login to your WordPress dashboard, navigate to Tools - Widget Importer & Exporter

Widget Area

Click on "Browse..." or Choose File button then select Outstock-widgets.wie, click on Import Widgets to finish.

Widget Area

Aterthat you will see 4 widget: Shop sidebar, Blog Sidebar, Header Extension Area,Footer newsletter

1. In Header Extension Area your can change content in header like: language, currentcy

2. Footer newsletter: You can custom your content in footer newsletter in here

Widget Area

You can custom your content in footer newsletter in here

Widget Area

Adding The Logo & Favicon

Follow the steps below to set up the logo & favicon:

  1. Navigate to Theme Options. You select General tab
  2. Click on the Upload button and choose a file from your library
  3. You can also add the image link into the input field
Logo & Favicon

Setting Up Header

To set up your header, you go to Appearance > Theme Options > Header tab. In there, you can choose the Header Layout, configure your breadcrumb and other options.

Header Layout

Outstock comes with 3 different header layouts. Just choose one of our header layouts for your site.

We can edit text "Welcome Outstock Store!" type text box "welcome message" in this tab.

We can sellect Topmenu show like demo

Header Layout

Header Customization

If you want to customize the theme, you should create the child theme before making any changes. Please note that you have to install the required plugins before activating the child theme. Otherwise, you will get an error if you install the plugins in Appearance > Install Plugins page.

You can find the sample child theme package (Outstock-child.zip file) in your downloaded file (you have to download All files & documentation).

Follow the steps below to override header template:

  1. Copy the template file from the parent theme folder to the child theme folder
  2. Edit the template file in the child theme folder
Header Customization

Pages

Outstock comes with Visual Composer plugin and powerful. The following sections will explain how to create a new page and make it look like our demo. If you use our One Click Import Demo functionality, you can ignore this.

Create A New Page

Follow the steps below to create a new page:

  1. In admin panel, go to Pages and click on the Add New button
  2. Input the page title and page content
  3. On the Page Attributes section, choose the page template from dropdown list

Home Pages

Setting up a home page

  1. In admin panel, you go to Settings > Reading.
  2. You choose the A static page(select below) option.
  3. Select a page from dropdown list of the Front page option.
Reading Settings
Below is our demo home pages. To build a home page look like our demo, you copy the page content into the Text editor and make some configuration.

Page config

you can customize the header, banner , footer , logo to each page in config

pageconfig

pageconfig

Home shop 1(Default Store)

Page Content:

Page Configurations:

  • Page Header: "Custom header:"-> Header first (Default)( We can select option header style If we want.)
  • Page Footer: "Custom Footer:"-> Header Footer (Default)( We can select option header style If we want.)
  • Custom layout:: Full(Default)
  • Custom Logo::We can select option logo style If we want

Home shop 2

Page Content:

Page Configurations:

  • Page Header: "Custom header:"-> Header second( We can select option header style If we want.)
  • Page Footer: "Custom Footer:"-> Header Footer (Default)( We can select option header style If we want.)
  • Custom layout:: Full(Default)
  • Custom Logo::We can select option logo style If we want

Home shop 3

Page Content:

Page Configurations:

  • Page Header: "Custom header:"-> Header second( We can select option header style If we want.)
  • Page Footer: "Custom Footer:"-> Header Footer (Default)( We can select option header style If we want.)
  • Custom layout:: Full(Default)
  • Custom Logo::We can select option logo style If we want

Home shop 4

Page Content:

Page Configurations:

  • Page Header: "Custom header:"-> Header second( We can select option header style If we want.)
  • Page Footer: "Custom Footer:"-> Header Footer (Default)( We can select option header style If we want.)
  • Custom layout:: Full(Default)
  • Custom Logo::We can select option logo style If we want

Contact Us

It is easy to make your contact page look like our demo. Simply copy the code below and paste into the page content (in the Text editor).

Contact Form

Use this plugin to make the contact form on contact page. Navigate to Contact - Contact Forms, there is a form named Contact form 1, if you want to create a new form, click on Add New button.

Click on the form title to edit form, copy this code and paste into Form box:

About Us

It is easy to make your About Us look like our demo. Simply copy the code below and paste into the page content (in the Text editor).

FAQ

It is easy to make your FAQ look like our demo. Simply copy the code below and paste into the page content (in the Text editor).

Configure Plugins

Newsletter MailChimp)

Use this plugin to make the newsletter sign up form on footer. Navigate to MailChimp. Click on Thanks! Now take me to MailPoet. to start using this plugin. Click on Settings link

Step 1: Choose menu follow:

mailchimp

Step 2:

mailchimp

Step 3:

mailchimp

Step 4:

mailchimp

Step 5:

mailchimp

Step 6, the last:

mailchimp

Products Compare

Navigate to YIT Plugins -> Compare.

Contact Page

Products Wishlist

Navigate to YIT Plugins -> Wishlist.

Contact Page

Zoom Magnifier

Navigate to YIT Plugins -> Magnifier.

Contact Page

Projects

Go to Projects - Add New to create a new page for portfolio/projects, only enter page title and click "Publish" button.

Go to Projects - Settings, select "Projects Page" in dropdown and click "Save Changes" button. Click on "Images" tab to set image size like this

Contact Page

Visual Composer

Visual Composer will help you manage your content at the WordPress sites and build any layout you can imagine in few minutes without coding. You can read Visual Composer Documentation to get more details.

Please note that you do not purchase directly Visual Composer plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme's version. If you see the notification below, you can dismiss it.

Visual Composer Notification

How to add new element

To add new element, you click the BACKEND EDITOR button on the top left of WYSIWYG (text editor)

Visual Composer Button

WYSIWYG editor change to Visual Composer canvas. You can work with it as you do with regular Visual Composer. You can click on the Add element button to add new element

Visual Composer Canvas

Then, you choose an element from Visual Composer elements list

Visual Composer Elements List
All our shortcodes are in Outstock-theme tab. You should use our product shortcodes instead of WooCommerce shortcodes. Because there are many options to display your products.

Adding Parallax/Video Background

Follow the steps below to add a parallax/video background

  1. Add a new Row
  2. Then, you click to edit that row
  3. In the Row Settings panel, you select Background tab
  4. You set Background Type to Parallax, Youtube Video or Hosted Video
  5. Make some configuration below
Adding Parallax Background

Revolution Slider

Outstock includes the popular Revolution Slider Created By ThemePunch. This slider is 100% responsive and has many amazing options. In the following sections, you will know how to add a new slider and how to show it in frontend. This is its own documentation. You can read to get more information.

Please note that you do not purchase directly Revolution Slider plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme's version. If you see the notification below, you can dismiss it.

Revolution Slider Notification

Create A New Revolution Slider

Follow the steps below to create a new Revolution Slider:

  1. You go to Revolution Slider page
  2. Click on the New Slider box
  3. Input the slider title and alias
  4. Make some configurations
Create A New Revolution Slider

 

Follow the steps below to add a new slide to your sliders:

  1. Click on the pen icon to edit your slider as the screenshot
  2. In Slider Editor, hover your mouse over the Add Slide box and choose one of the options listed below
    • Add Blank Slide: create a new slide with default settings
    • Add Bulk Slides: create multiple slides at once, based on a selection of media gallery images of your choice
    • Add From Template: add the plugin's default templates or your templates

 

Add Slides To Revolution Slider

Using Revolution Slider

There are three ways to use Revolution Slider

Assign a slider from the Page Options section

  1. Create or edit a page
  2. Find the Page Options section below
  3. Set the Page Slider option to Revolution Slider
  4. Finally, you choose a slider from the Select Revolution Slider option
Assign A Revolution Slider From Page Options

 

Add slider from Visual Composer content element list

  1. In the page editor, you click on the Backend Editor button on the top left of WYSIWYG(text editor)
  2. Then, you click on the Add New Element button
  3. You find the Revolution Slider element. Choose it
Add A Revolution Slider From Visual Composer

Use the slider shortcode

  1. You go to the Revolution Slider page
  2. Click to edit a slider and find the shortcode in the Slider Title & Shortcode box
  3. Copy the shortcode and paste into your page content
Use Revolution Slider Shortcode

WooCommerce

Outstock theme is fully compatible with the latest version of WooCommerce plugin. We customized and added many features, shortcodes and widgets for this plugin. In the following sections, you will know how to install and set up WooCommerce plugin. You can also refer WooCommerce Documentation to get more information.

Install WooCommerce

There are 2 ways to install WooCommerce plugin

  1. After activating our theme, you go to Appearance > Install Plugins. You install WooCommerce plugin from the required plugins list.
  2. Install WooCommerce plugin from the Plugins page
Install WooCommerce
Install WooCommerce
You should install WooCommerce from the required plugins list. Because we tested that version and it is compatible with the current theme's version. To make sure our theme is compatible with the new version of WooCommerce, you should see our changelog or contact us

Adding WooCommerce Pages

There are 2 ways to add WooCommerce pages

  1. After activating WooCommerce plugin, you will get a notification as the screenshot below. Simply click the Install WooCommerce Pages button to create all WooCommerce pages
  2. Use the WooCommerce shortcodes. You can get them here
Adding WooCommerce Pages

Setting Up WooCommerce

To set up WooCommerce, you go to WooCommerce > Settings in admin panel.

Currency Options

  1. In WooCommerce Settings page, you select the General tab
  2. You find Currency Options section and configure your currency

List of currencies that you can choose

Currency Options
You can also add a custom currency symbol. Please refer this document

Product Image Sizes

  1. In WooCommerce Settings page, you select the Products tab. Then you select the Display sub tab
  2. You find Product Images section and configure your product image size
  3. Our demo is configured as the screenshot
Product Image Sizes

Page Settings

After you create WooCommerce pages. You will go to the Settings page to assign them.

  • To assign the Shop page, you select the Products tab and then select the Display sub tab
  • To assign the My Account page, you select the Accounts tab
  • To assign the Cart and Checkout pages, you select the Checkout tab
Setting Pages
Please note that: if you install WooCommerce pages by clicking on the WooCommerce notification, WooCommerce will automatically assign for you

Registration Options

You also make sure that you allow your customers to register on your site. You select the Accounts tab and find the Registration Options section as the screenshot.

Registration Options

Adding Product

Follow the steps below to add a new product

  1. In admin panel, you go to Products and click the Add Product button
  2. Input the product title and product content
  3. Select Product Category, Product Tag
  4. Add Featured Image and Product Gallery
  5. In the Product Options section, you can override some options in Theme Options
  6. Next is the Product Data section. This is where the majority of the product data is input

Product Options

This section allows you to override some options in Theme Options. You can set layout for individual products. You can also override custom tab content

Product Options

Product Data

You should also read WooCommerce Documentation to get more details. We only have some notes that we think you need to know.

Product Data Product Data - Shipping Tab
  1. Adding a product on sale and a deal:
    • With the Simple Product, you select General tab. You add a Sale Price and click the Schedule button to set up date.
    • With the Variable Product, after setting up Product Attributes in the Attributes tab, you can go to the Variations tab and add New Variation. With each Variation Product, you also click the Schedule button next to the Sale Price field. Please note that product only displays the time of first Variation Product.
  2. Adding Additional Information: You go to the Shipping tab. You set value of Weight and Dimensions options. You can change the unit by going to WooCommerce > Settings > Products tab
  3. Enable/Disable Product Review: You go to the Advanced tab. You will see Enable reviews option. Just check/uncheck it.

Shortcodes

Outstock comes with several shortcodes which can be used to display your content. To use our shortcodes, you go to page editor and change to Visual Composer canvas. Click on the Add Element button to open Visual Composer elements list and change to Theme-Sky tab.

Visual Composer Elements List

In this all field except MailPoet : We can setting title,Number of columns,Number of row, select option show: Grid or Carousel, Add Extra class name, Set Columns count desktop small, set Columns count tablet small , set Columns count mobile, Margin: set spacing between intems.

Child Theme

Use Child Themes to Modify Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

How to use a Child Theme?

In this theme, we offer you a sample Child Theme (Outstock-child.zip). You install it like normal theme.

Visual Composer Elements List

Extras

Come together with The WooW, these plugin are recommended to install and active for flexible use.Below are the source for documentation and support of each plugin.

Slider Revolution

The WooW is completely compatible with Slider Revolution. Its intuitive interface with diversified options and effects will be good choice for you slider. If you plan to use Slider Revolution Plugin for you site, check out these source:

Slider Revolution Wordpress Plugin Documentation for user guide to use the plugin.

Slider Revolution Form Support  for support upon issues of the plugin.

Slider Revolution FAQs for questions about the plugin.

Woo Commerce

The WooW works compatibly with Woo Commerce, allows you to create your online shop. If you plan to use Woo Commerce Plugin for your site, check out the source:

Woo Commerce Plugin Documentaion for user guide to use the plugin.

Woo Commerce Plugin Community Forum for support upon issues of the plugin.

Woo Commerce Knowleadge Base for question about the plugin

Visual Composer

The WooW  works well with Visual Composer, the popular drag and drop page builder plugin with intuitive interface to build your content at ease. If you plan to use Visual Composer Plugin for your site, check out these source.

Visual Composer WordPress Plugin Documentation for user guide to use the plugin

Visual Composer WordPress Plugin Support System for support upon issues of the plugin

Contac Form 7

The WooW is fully compatible with Contact Form 7, the free form plugin recommeneded to create a nice form for your site. If you plan to use Contact Form Plugin for your site, check out these source.

Contact Form 7 Plugin Page for basic information about the plugin.

Contact Form 7 Plugin Documentation for user guide to use the plugin.

Contact Form 7 Plugin Support Forum for support upon issues of the plugin.

MailChimp for WordPress

MailChimp for WordPress Plugin Support for support upon issues of the plugin.