1.General

We would like to thank you for choosing Hairsalon WP. Built by the latest version of WordPress and used with WordPress only as well as using the powerful page builder plugin Visual Composer, Hairsalon WP brings to new experiences for users to create awesome beauty, spa & hair salon websites. Now let’s jump to the theme presentation.

1.1.Requirements for HairSalon WP

In this section, we present Recommended PHP configuration limits and How to verify your current PHP limits. But before that, make sure that you’re running the latest version of WordPress, PHP version 5.6 or higher and MySQL version 5.6 or higher.

Recommended PHP configuration limits

One of the issues you may run into is importing demo data fails. The first solution is to increase PHP limits. You can do this by yourself  or contact your server provider to ask for the help to increase following PHP limits:

  • max_execution_time 3000
  • memory_limit 256M
  • post_max_size 100M
  • upload_max_filesize 81M

How to verify your current PHP limits

Verify your PHP limits in Dashboard >> Hairsalon >> System Status. Or contact the server provider to confirm your current PHP limits are and have them set it up again if neeed.

1.2.What's Included in Theme Package

When purchasing our theme on Themeforest.net from your Envato account, in Download tab, you can select to download entire theme package (All files & documentation) or just theme file (Installable WordPress file only). The theme package is a zip file containing the following files:

  • child-theme: There is a zip file child theme and a readme.txt about some notes about child theme.
  • documentation: A link to this documentation.
  • hairsalon: The WordPress theme.

2.Installation

2.1.HairSalon WP Installation

You can install the theme by 2 ways: Via WordPress or via FTP.

2.1.1.WordPress Upload

After you downloaded theme packages, exact theme package. The file you use to upload is a zip file named hairsalonFollowing these steps below to upload theme via WordPress:

Step 1. Dashboard >> Appearance >> Themes >> Add New.

Step 2. Click Upload Theme button.

Step 3. Browser hairsalon.zip file in your computer and click Install Now button.

Step 4. Active Hairsalon WP.

Step 5. After active the theme, you will see Hairsalon WP notice!. Click Install and active ThimPress Core to start now! to active core of HairSalon WP, move to importing demo data process.

upload-theme-wp1

2016-10-11_21-31-34

2.1.2.FTP Upload

Following these steps below to upload theme via FTP:

Step 1. Login your FTP account via an FTP software to access your host web server.

Step 2. Unzip hairsalon.zip file.

Step 3. Upload the exacted theme folder hairsalon to wp-content/ themes folder.

Step 4. Active the theme in Dashboard >> Appearance >> Themes.

Step 5. After active the theme, you will see Hairsalon WP notice!. Click Install and active ThimPress Core to start now! to active core of Hairsalon WP, move to importing demo data process.ftp-upload-theme

2.2.Plugins

Hairsalon WP requires Thim Core plugin to work. This plugin have to be actived as soon as you uploaded the theme. As we mentioned in section Upload Theme, afer you upload the theme, there will be a notification message Install and active ThimPress Core to start now! ” This is Thim Core plugin.

Revolution Slider plugin: Also a required plugin to install before importing demo data. This is a pemium from Thempunch. Revolution Slider plugin is in hairsalon/ inc/ plugins folder. Configure Revolution Slider for Hairsalon WP as below:

revslider1

revsliderhome

 

Find more information about Revolution Slider here.

WooCommerce plugin: The theme is integrated WooCommerce plugin for online shopping with full options of WooCommerce.

Our Team plugin: A plugin is developed by ourself. It creates Thim: Our Team shortcode which allows you to show off your team members.

Testimonials plugin: Another plugin is developed by ourself. It creates Thim: Testimonials shortcode which allows you to show off your testimonials.

2.3.How To Update The Theme

There are 2 ways to update the theme: Via Envato Toolkit – automatically update and via FTP – manually update. The updating will not loose your changes before but to be safety, you should backup files and database before updating. After updated, re-save customize in Dashboard >> Customize >> click Save & Publish.

2.3.1.Via Envato Toolkit

This is the easiest and fastest method to update theme. Do follow these steps to update by Envato Toolkit.

Step 1. Download Envato WordPress Toolkit here.

Step 2. Install and active the plugin in Dashboard >> Plugins >> Add new.

Step 3. Get your API keys.

Step 4. Dashboard >> Envato Toolkit >> input API keys (Marketplace Username &  Secret API Key).

Step 5. After input API keys, there will be “Themes” tab. Now you can update theme automatically.

2.3.2.Via FTP

Sometimes, you may have troubles in updating by Envato Toolkit. So another way is to update via FTP. However, this way will take more time because you have to do step by step manually.

Step 1.  Login you Envato account. In Download tab, find Hairsalon WP and choose the Installable WordPress Theme (the WordPress file).

Step 2. Login your server, then go to wp-content/ themes folder and backup your hairsalon theme folder if you want or delete it. The content in your site will not be lost but if you have modified code, the changes will be lost. You have to reapply them after updating over.

Step 3. Exact new file hairsalon.zip you have already downloaded from Themeforest.

Step 4. Drag & drop new theme folder hairsalon to wp-content/ theme to override the existing files.

2.4.Child Theme Installation

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

Hairsalon WP provides an available child theme so that you just need to upload to your site without doing anything else after installed the parent theme successfully. Child theme of Hairsalon WP is a zip file named hairsalon-child packed in child-theme folder after exacted theme package (child-theme/ hairsalon-child). Uploading child theme is similar to uploading parent theme.

Step 1. Appearance >> Themes >> Add New.

Step 2. Click Upload Theme button.

Step 3. Browser child theme hairsalon-child.zip file in child-theme folder and click Install Now button.

Step 4. Active child theme.

2016-10-12_13-36-50

 

If you want to learn more about child theme and how to modify it, you can refer these links:

Codex WordPress about Child Theme.

WordPress Developer Theme Handbook.

3.Demo

3.1.Import Demo

The easiest way to import our demo content is to use our Thim Core Demo Importer. Our importer will give you all pages and posts, several sample sliders, widgets, Customize Options, assigned pages, and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, portfolio, etc , it will not delete current menus but configure our demo menus, and it will not replace but add sliders. Another method is manually importing.

3.1.1.Import Demo Automatically

Using Thim Core Demo Importer

Step 1 – Navigate to Dashboard > Import Demo.

Step 2 – Select a demo and click Import button.

Step 3 – Select what type of content do you want to import and click Import button.

The import process may take up to 5 minutes. Enjoy a cup of tea while you wait ?.

import_auto import_auto-2

3.1.2.Import Demo Manually

In the event that your host will not make changes, or you cannot get the demo content to import, you can then import the individual elements manually. Continue reading below to learn how to manually import demo content.

Where To Find Demo Files

There is a “content.xml” file placed in folder name-themeincdatademos, just select a demo you want then find this file for importing demo.

How To Import XML Files

Step 1 – Go to Dashboard >> Tools >> click Import.

tool_import

Step 2 – On the Import page, select WordPress from the list and install the WordPress Importer Plugin.

install-wordpress-import

Step 3 – Click Choose File, then choose the content.xml file from your desired demo folder. For example, if you would like to install the Demo-02, you would install the content.xml inside the Demo-02 folder.

Step 4 – Once you’ve chosen the correct file, click the Upload File and Import button.

upload-xml-file

Step 5 – Select admin in the dropdown list, and don’t forget to check the ‘Download and Import File Attachments’ checkbox.

import-xml-file

Step 6 – Wait until WordPress is finished importing, then click the Have Fun link to return to your dashboard.

finish

How To Import Theme Options

Go to Dashboard > Demo Importer >> Select a demo that you imported XML file and click Import button >> Select content “Theme Options” and click Import button.

import_auto

import-theme-options

How To Import Slider .ZIPs

Step 1 – Go to Dashboard >> Slider Revolution >> Slider Revolution tab >> click “Import Slider” to import slider you want. (file slider.zip will be placed in the same folder you got the XML file you’ve just imported. Example: name-themeincdatademosdemo-02revslider).

revslider1-1

Step 2 – Go to Dashboard >> Pages >> Edit Home page >> Edit Revolution Slider >> select your revolution slider you imported >> click “Save Changes” and “Update” to get the changes.

revsliderhome

How To Import Widget Data

Step 1 – Install and activate the Widgets Settings Importer/Exporter plugin developed by Voce Communications.

Step 2 – Go to Dashboard >> Tools >> Widget Settings Import.

Step 3 – Click the Select A File button, and select the widgets_data.json file from the same folder you got the XML and theme option files you’e just imported. Example: name-themeincdatademosdemo-02widget.

Step 4 – Once you’ve selected the correct file, click Show Widgets Settings.

Step 5 – Click the Select All Active Widgets button first, then click the Import Widget Settings button.

Step 6 – You will receive a success message letting you know you’ve successfully imported the widget settings.

manualdemo_widgetdata

3.2.Elements Setup

After importing demo data successfully, some elements setup of the third-party plugins will not be included. You need to complete them.

3.2.1.Setup Contact Form

Once installed and imported demo data, you can manage it in the Dashboard >> Contact >> click Add New to create new contact forms for different parts of your website or edit the existing ones via the Edit option in Contact Forms tab.

contact

How To Setup Contact Forms:

1. Form: 

You can put any content of contact form and click button “Save” then a shortcode will be auto created. Just copy this shortcode into post, page, or text widget content that you want.

contact-form

Demo Hairsalon WordPress theme has 2 style contact forms available for you, just click Edit option in Contact Forms tab then copy and paste below content into contact form:

Contact Page:

[text* your-name placeholder “Full Name*”]
[email* your-email placeholder “Your Email*”]
[text* your-subject placeholder “Subject*”]
[textarea* your-message placeholder “Your Massage*”]

[submit “SEND MESSAGE”]

Book Online:

[text* full-name placeholder “Full Name*”]
[tel* your-phone placeholder “Phone Number*”]
[email* your-email placeholder “Your Email*”]
[text* time class:time-booktable placeholder “Time*”]
[text* date class:date-booktable placeholder “Date*”]
[select party-booktable “Select a service” “Men’s HairCut” “Women’s HairCut” “Teen’s Haircut” “Regular Makeup” “Just Eyes” “Full Highlights” “Haft Highlights”]
[submit “Find Appointment”]

2. Email:

The most important settings you need to define are located in the Mail tab. To learn more about setting email, you can refer document of contact form plugin. Notes that click “Save” after setting.

email-contact

3.2.2.Setup MailChimp

Setting MailChimp API:

Go to Dashboard >> MailChimp For WP >> MailChimp >> Setting your API Key then clickSave Changes“. To learn how to get API key, you can refer document of MailChimp.

mailchimp

Create MailChimp Form:

Go to Dashboard >> MailChimp For WP >> MailChimp >> Forms:

mailchimp-form

For more detail, you can read document of MailChimp For WP.

4.Customize

4.1.Header

4.1.1.Top bar

The top bar is located in the top section of the header and give you the option to display the data, top menu and social icons. Hairsalon WordPress theme comes with 3 templates to give you the freedom to customize this section to best fit your needs.

Top Bar Options:

We designed 3 beautiful layouts for the top bar to offer you multiple options for customizing your site. You can choose what items you want to display and how to order them in this section. Please see below how to customize it.

The Top Bar theme panel section contains the following options:

1. Layout: You can decide how to order the top bar items. To do that go to Dashboard >> Appearance >> Customize >> Header and expand the Layout section. Choose one of the three layouts and click on it.

2. Show Top Bar: The theme comes with the Top Bar enabled by default. If you would like to disable it just go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Turn off the button in the Show Top Bar section.

3. Show Line After Top Bar: This option allows you to enable or disable a line after top bar. To do that go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Turn on or off to Enable or Disable Line After Top Bar section.

4. Top bar Fonts: You can decide what font size or color of text you want to display on the top bar section. Go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Select the desired font size and color from Topbar Fonts option.

5. Background Color: Choose whatever color of background color that you want.

After you finished customizing this section click the Save & Publish button.

layout-header

topbar-header

4.2.1.Blog Sidebar

Setting Blog Page:

Blog page is a page to show posts. To select a page is blog page, you need to go to Dashboard >> Setting >> Reading >> select  “A static page”  >>  select page for “Posts page” >> click “Save Changes” button.

setting-blog

Blog Layout Options:

To configure layout for blog page, go to Dashboard >> Appearance >> Customize >> Blogs >> Layouts. This is the place for you to select an alignment for your Blog page – which is place to show posts or for single post. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

1 – No side bar at all

2 – One sidebar, located on the left

3 – One sidebar, located on the right

4 – Two sidebar, located on the left and right.

After you finished customizing this section click the Save & Publish button.

blog-layout-2

How To Add Widgets To Blog Sidebar:

Hairsalon includes a wide array of custom widgets in addition to the default widgets WordPress offers. All widgets are found in the Dashboard >> Appearance >> Widgets tab. There are various customization options and fields for each individual widget, and they are all self explanatory. You can put as many widgets as you want inside of Blog Sidebar. Please read below for information on how to add widgets to Blog Sidebar.

Step 1 – Navigate to the Appearance >> Widgets tab to access the list of widgets and widget areas. The left hand side shows all the widgets you can use. The right hand side shows all the different widget areas you can add widgets to, including Blog Sidebar.

Step 2 – Simply drag and drop the widget you’d like to add into Sidebar area on the right side.

Step 3 – To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.

Step 4 – When finished, make sure to click the “Save” button in the widget editing box to save your changes.

add-widgets-into-blog-sidebar

4.2.2.Shop Sidebar

Setting Shop Page:

Shop page is a page to show products, product categories. To select a page is shop page, you need to go to Dashboard >> WooCommerce >> Settings >> Products tab>> Display sub tab  >>  select Shop page >> click “Save Changes” button.

setting-shop-page

Shop Page Layout Options:

To configure layout for shop page, go to Dashboard >> Appearance >> Customize >> WooCommerce >> Layouts. This is the place for you to select an alignment for your Shop page – which is place to show products, product categories. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

1 – No side bar at all

2 – One sidebar, located on the left

3 – One sidebar, located on the right

4 – Two sidebar, located on the left and right.

After you finished customizing this section click the Save & Publish button.

shop-layout

How To Add Widgets To Shop Sidebar:

Please read below for information on how to add widgets to Shop Sidebar.

Step 1 – Navigate to the Appearance >> Widgets tab to access the list of widgets and widget areas. The left hand side shows all the widgets you can use. The right hand side shows all the different widget areas you can add widgets to, including Shop Sidebar.

Step 2 – Simply drag and drop the widget you’d like to add into Shop Sidebar area on the right side.

Step 3 – To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.

Step 4 – When finished, make sure to click the “Save” button in the widget editing box to save your changes.

4.4.Typography

All typography options are located within their specific Customize panel. For example, if you’d like to customize your main menu typography settings, then you would find those options in the Dashboard >> Appearance >> Customize >> Header >> Main Menu tab. If you don’t find the typography settings for a specific feature, it may be because it’s been combined into a header typography option in Dashboard >> Appearance >> Customize >> General >> Typography.

1. Body Typography Options: To customize the Body Font, navigate to the Appearance >> Customize >> General >> Typography >> Body Typography tab where all the Body Typography options such as font family, weight, size, etc. are found.

2. H1 – H6 and Post Title Typography Options: To customize the Headers and Post Titles Font, navigate to the Appearance >> Customize >> General >> Typography >> Heading tab where all the Headers and Post Titles Typography options such as font family, weight, size, etc. are found.

3. Specific Typography Options: To customize specific typography options, such as Main Menu, Top Bar, Page Title, Sliding Bar, Sidebar, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.

Typography Options Setup:

1. Font Family: This option allows you to select a font family to use.

2. Variant:  This option allows you to select a font weight and style to use.

3. Subset: This option allows you to select which subset to use.

4. Font Size: This option allows you to set the size of the text on display.

5. Line Height: This option allows you to set the spacing between lines.

6. Letter Spacing: This option allows you to set the spacing between letters.

7. Text Transform: This option allows you to set uppercase or lowercase.

8. Color: This option allows you to set the color of the text.

After you finished customizing this section click the Save & Publish button.

typo-body

typo-heading

5.Hairsalon WP Shortcodes

Hairsalon WP is built from Visual Composer, a premium powerful plugin. Besides Visual Composer shortcodes, we also created our shortcodes.

1. Thim Our Team

The shortcode is created by Our Team plugin. You have to create members firstly in Dashboard >> Our Team.

our-team

our-team1

2. Thim Services

thim-service

3. Thim Testimonials

The shortcode is created by Testimonials plugin. You have to create testimonial posts firstly in

Dashboard >> Testimonials.

thim-testimonials1

thim-testimonials

4. Thim Video

thim-video

5. Thim Posts

thim-posts

6. Thim Counter Box

thim-counter-box

6.Support Service

When purchasing our themes, you will receive the free 6 months of support service for the questions and problems regarding the theme. Once the period of your support service is expired, you can extend support to 12 months. But no matter your support service of your product is over or not, you always receive free timelife updates for the theme.

We really care about customer support services and guarantee to response to all support topics within 24 hours on weekday (a bit longer over weekend) since you posted a ticket.

6.1.Knowledge Base & FAQs

Before submitting a ticket on our support forum, please ensure that you meet all the following requirements:

  • Refer documentation.
  • Read changelog and make sure that your site is running the latest version of Hairsalon WP.
  • Disable all 3rd part plugins because sometimes they’re the reasons causing the issues.
  • Clear all the caches after changing any settings in your site.

And check out our Knowledge Base and FAQs below to find out the answer for your question.

How to get license key of included premium plugins (Visual Composer, Revolution Slider)?

You can use included premium plugins such as Visual Composer, Revolution Slider for free when you purchase and download our themes from ThemeForest. So you don’t have to buy your own license to use these plugins.

However, as a note from that plugin’s author, you (theme buyer) can not active directly get support from them. But please don’t worry if you see warning messages about the plugin license activation or update required. You always get the latest version of Visual Composer, Revolution Slider when we update the theme. We will test these plugins before send it to you to make sure there are no conflicts with our theme.

Will customization be lost if I update theme?

No, your customization in Customize panel will not be lost if you update theme. Only the coding modification in original theme’s files will be lost and that’s why you should deploy in child theme.

Slider not found on home page

After imported demo data but revolution slider on home page is missing, that’s because you haven’t configure revolution slider for home page. Check Revolution Slider settings in Plugin section.

Customize can not be saved

When you make some settings in Customize panel but the changes can not be saved. There are some common following reasons:

  • It’s due to your server error “500 Internal Server”. Read here to know about the error and how to fix it.
  • User of server (e.g Apache, Nginx) can’t write file. Let chmod file style.css and config.less (all in the theme directory) is 777.
  • Your PHP version is outdated. PHP version 5.6 or higher is recommended.

There are also some sticky tickets we posted in purchased theme support forum. Please take a look these tickets. In case you can not find out the answer, don’t hestitate to let us know by submitting a ticket.

6.2.Support forum

Regarding the problems with code customizations or 3rd party plugins, we are not able to provide free support service. We just can provide you customization service at a fee.

How to ask for support

Step 1. Click here to create an account on our website. You will need the Themeforest purchase code of your product.

Step 2. Go to support forum of your product and create your own topic. Here is support forum of Hairsalon WP.

Suggest Edit