Hayden

WooCommerce Theme


Thank you for purchasing this theme. This documentation will explain you how to use the theme and how to create your dream WooCommerce shop. If you have any questions that are beyond the scope of this help file, please feel free to email via themeforest contact form. Thanks so much!

Requirements


Many issues you may run into such as 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. To address memory limit issues, there are two paths: adjust yourself or contact your hosting company.

PHP Configuration Limits
Server Minimum Requirements
How To Check PHP Limits

Check your current PHP limit with WordPress phpinfo() plugin.

How To Increase PHP Limits

Follow these tips to increase your web-host’s PHP limit.

WordPress Base


To install the theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Please use links below for WordPress information:

Theme Package


When you purchase the theme from ThemeForest, you need to download theme files from your ThemeForest account. Navigate to your "Downloads" tab on ThemeForest.

Click the 'Download' button next to the item and select one of two options.

Premium Plugin License


WPBakery Page Builder and Revolution Slider plugins are bundled with Hayden theme, these plugins are not required additional license to use it with Hayden theme. However, the purchase of Hayden does not give you an individual license for these plugins to use or download as you wish. We are not allowed to include the license key for these plugins, license key activation is required only for plugin's auto-updates to the newest version. There is only one way to update premium plugins without getting a theme update is to purchase your item individually. Premium plugin updates are included with the newest theme version, we update plugins only when we issue theme updates. We ensure that the included plugin updates don't have any critical issues, or conflict with our theme update.

Please find more information about plugin's license on plugin author's page: WPBakery Page Builder, Revolution Slider

Support System


The theme comes with 6 months of included support and free lifetime updates, you have the option to purchase extended item support, increasing the item support period up to a maximum of 12 months from the date of purchase.

What is Item Support? please find more information on item support policy page.

Handle customers requests we have an advanced, secure ticket system. Item support does not include services to modify or extend the item beyond the original features, style and functionality of the item, installation of the item, issues about your web hosting or server environment, or issues with the software you’ve got installed on your machine to use the item, help of included third-party assets. For customization services that will help you tailor the item to your specific requirements, please contact us via contact form. Theme customization is paid service.

Before Submit Ticket


Help to speed up your request, we require that you follow the steps below before posting a ticket.

Please open a ticket with the following information:

Please understand in most case the support team won't be able to do much without this data, to avoid unnecessary delays please provide all information we need for a support request.

Submit A Ticket


To speed up your request, we require that you provide us all information we need for a support request.

Where to take your purchase code?

Navigate to your Downloads tab on ThemeForest, click the Download button next to the item and download License Certificate & Purchase Code file. This file will include your purchase code.

Installation


Theme Installation


After purchasing the theme, please download it from ThemeForest. Find the theme purchase in the 'Downloads'.

Click the 'Download' button next to the item and select one of two options.

Theme Installation Via WordPress Software

  1. Navigate to Appearance => Themes
  2. Click Add New, then click Upload Theme and Choose File
  3. Choose theme .zip file on your computer, then click Install Now
  4. When the installation is completed, click Activate

Theme Installation Via FTP

  1. Log in to your server via FTP client software. We recommend you to use Filezilla, once of the most popular free FTP client software.
  2. If you have downloaded the All files & documentation package, please unzip theme package .zip file and then unzip theme .zip file. If you have downloaded Installable WordPress file only, please unzip the theme .zip file.
  3. Upload the unzipped theme folder to the wp-content => themes folder on the server. Please don't rename 'hayden' theme folder name.
  4. Navigate to your WordPress Dashboard (wp-admin), navigate to Appearance => Themes and clicking the Activate button.

Plugin Installation


  1. Navigate to Appearance => Install Plugins, here you will find Install Required Plugins.
  2. Simply check all of them and select Install from the drop down, then hit Apply.
  3. After installation check all of them and select Activate from the drop down, then hit Apply.

Required Plugins

  1. Hayden Essential - is a required plugin for Hayden theme, It manages many important tasks including post types, shortcodes, widgets and theme elements.
  2. Kirki - Create rich experiences for the WordPress Customizer.
  3. MailChimp for WordPress - This plugin helps you grow your MailChimp lists and write better newsletters through various methods.
  4. One Click Demo Import - is one of the most useful features that a WordPress theme can have. Users love to start the website development process at the same starting point as the theme demo page, so they can quickly develop the website they want.
  5. Slider Revolution - is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Image or Video Scene for best conversion rates or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories in no time! Desktop or mobile device!
  6. WPBakery Page Builder - WordPress Page Builder plugin with intuitive drag and drop interface. Build any page fast and easy. Unlimited layouts for your website.
  7. WooCommerce - WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control. With endless flexibility and access to hundreds of free and premium WordPress extensions, WooCommerce now powers 30% of all online stores — more than any other platform.

Recommended Plugins

  1. Contact Form 7 -Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
  2. Envato Market - This plugin helps customers receive updates to their premium Themes & Plugins purchased through Envato Market
  3. Instagram Feed - Display Instagram photos from any non-private Instagram accounts, either in the same single feed or in multiple different ones.
  4. YITH WooCommerce Wishlist - 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.

Demo Installation


Demo data importer lets you import demo content in minutes quickly and easily. All you need to do is to navigate to Appearance => Import Demo Data. Choose the demo and hit Import.

WooCommerce

Revolution Slider

Demo Installation Issues, Troubleshooting

  1. If you run into trouble with you product thumbnail size after demo installation navigate to Appearance => Customize click to Publish to define WooCommerce image sizes.
  2. Revolution Slider Error: Slider with alias not found. This error message means that the slider you are referencing for shortcode (page builder slider element) does not exists and cannot be loaded. Please read how to import slider import files above in Demo Installation article.
  3. If you run into trouble with you Product categories page builder element after demo installation navigate to Page Editor of the page, find and edit Product categories page builder element, in Categories filter field remove all ids and enter your product categories.

    Home Page, Kids Fashion

    Home Page, Toys & Games

!Note: Demo Data

  • The images are not part of the theme package, they’re only used for demonstrative purposes. The images used in the demo are copyrighted and belong to their respective owners. It’s a bundle of stock images and products coming from different online retailers. Here are resources we have used to generate dummy data for our demo: link
  • If you think your content is being used without your permission? There may be a misunderstanding that you and we might be able to sort out without resorting to the formal processes, please contact us by using the form on this page.
  • Pattern images are part of the theme package.

Update


Theme Update


Please download the new theme version from your Themeforest account. Once you have new theme version, choose how to upload the theme via WordPress or via FTP.

Theme Update Via WordPress

  1. Deactivate the current Hayden theme in Appearance => Themes section by simply activating a different theme. Once different theme is activated, delete the Hayden theme.
  2. Upload and activate the new downloaded theme version file in the Appearance => Themes section.
  3. If you have downloaded the All files & documentation package, please unzip theme package .zip file and use hayden.zip file for theme update.
  4. Plugins Update - You will receive notification message, the message will let you know to update the required or recommended plugins.

Theme Update Via FTP

  1. Log in to your server via FTP client software.
  2. If you have downloaded the All files & documentation package, please unzip theme package .zip file and then unzip theme .zip file. If you have downloaded Installable WordPress file only, please unzip the theme .zip file.
  3. Upload the unzipped theme folder to wp-content => themes. Replace all existing files and folders.
  4. Plugins Update - You will receive notification message, the message will let you know to update the required or recommended plugins.

Theme Update Via Envato Market Plugin

  1. Navigate to Envato Market
  2. Generate an Envato API Personal Token
  3. Copy the token into the box below.
  4. Click the Save Changes button.
  5. Once the Envato API connection is made from the Settings page, Hayden theme will be shown. Any available theme updates can be applied here (or from the standard WordPress update page or WP-CLI).

Update WPBakery Page Builder

Since the WPBakery Page Builder doesn't allow to update the plugin via Install Plugins, so please follow next steps below.

  1. Navigate to Plugins section.
  2. Find the WPBakery Page Builder plugin, and click Deactivate.
  3. After deactivation navigate to the WPBakery Page Builder plugin, and click Delete. Your content won't be lost or erased by doing this.
  4. Navigate to install and activate the latest plugin version to Appearance => Install Plugins section.

Build Website


-

WordPress Configuration


  1. Set site title and tagline in Settings => General.
  2. Set image sizes in Settings => Media, we use default sizes for our demo.
    • Thumbnail size: 150 x 150
    • Medium size: 300 x 300
    • Large size: 1024 x 1024
  3. Ensure that a non-default permalink setting is selected in Settings => Permalinks, we recommend to use Post name settings.

Regenerate Thumbnails

If you do size changes of images in Settings => Media or size changes of product images in Appearance => Customize => Product Images you will need to download and run the Regenerate Thumbnails plugin - this is to ensure that all affected images are resized to match all new dimensions.

Customize


Hayden has a powerful set of theme options to make your user experience pleasant and easy to customize the theme. The most important feature of theme options is that they are all available through WordPress Customizer. Navigate to Appearance => Customize for theme options. Theme Customizer consists of 10 sections General, Typography, Header, Footer, Scripts & Styles, Menus, Widgets, Homepage Settings, WooCommerce and Additional Css.

Below are useful videos with demonstration of each section.

General

Typography

Header

Footer

Scripts & Styles

Menus

Widgets

Homepage Settings

WooCommerce

Additional Css

Page


Add New Page


  1. From the WordPress main menu navigate to Pages and click Add New option.
  2. Enter a new page title, then find the Page Attributes box at the right side to set your Template.
  3. Find the Template Settings box at the right side to set your page settings.
  4. Find the Sidebar box at the right side to set your type of sidebar, sidebar options are available only with Sidebar template.
  5. Check Transparent Header checkbox if you plan to use your transparent header to the page, settings for Transparent Header are available in Appearance => Customize => Header => Transparent Header.

WPBakery Page Builder


  1. Choose Backend Editor or Frontend Editor to edit your page. Backend Editor gives you the backend drag and drop editor, Frontend Editor gives you possibility to manage your content easily with intuitive frontend WordPress editor.
  2. Click Add Element to start adding our elements to your new page.
  3. Choose elements you want to add to your page in Add Element window and start editing. them.
  4. Find out more how to use WPBakery Page Builder composer on this page

Post


-

Add New Post


  1. From the WordPress main menu navigate to Posts and click Add New option.
  2. Enter a new post title and add post content to the editor then find the Format box at the right side to set your post format.
  3. Find the Category box at the right side to set your post categories.
  4. Find the Tags box at the right side to set your post tags.
  5. Find the Template Settings box at the right side to set your post settings.
  6. Find the Sidebar box at the right side to set your type of sidebar.
  7. Click the Featured Image Box to upload your post image.

Portfolio


-

Add New Portfolio


  1. From the WordPress main menu navigate to Portfolio and click Add New option.
  2. Enter a new portfolio title and add portfolio content to the editor. We use WPBakery Page Builder editor to organize content for Hayden portfolio if page builder editor is not available in your portfolio post, please navigate to WPBakery Page Builder => Role Manager, select Custom in Post types, check portfolio check box and Save Changes. These settings will enable page builder editor for portfolio posts.
  3. Find the Portfolio Categories box at the right side to set your portfolio categories.
  4. Find the Template Settings box at the right side to set your post settings.
  5. Find the Sidebar box at the right side to set your type of sidebar.
  6. Click the Featured Image Box to upload your post image.

Edit A Menu


  1. From the WordPress main menu navigate to Appearance => Menus section.
  2. Select one of menu you want to edit. Rename the menu name if you wish to do it.
  3. To add a menu item, select your created pages or posts on the left hand side and click the Add to Menu button.
  4. After setting up your menu items and menu sub-levels click the Save Menu button.

Mega Menu


  1. From the WordPress main menu navigate to Appearance => Menus section.
  2. Navigate to first level menu item you want to declare the mega menu.
  3. If you can’t find the CSS Classes input field, click on the Screen Options tab on the upper right on your screen to activate it.
  4. To declare the mega menu, the only thing you need to to is to add 2 CSS classes to the first level menu item: wpisset-mega-menu wpisset-mega-menu-4
  5. After setting up mega menu classes click the Save Menu button.

Product Thumbnail in Mega Menu

To build product thumbnail in mega menu, you need to activate the Description checkbox under the Screen Options. You can add text or HTML code to the desciption textarea.

Here is the code we are using in the Description field for Hayden theme:

<a class="wpisset-mega-menu-thumbnail" href="#"><img alt="" src="http://your_domain.com/image.jpg"><span class="title">Striped T-Shirt</span><span class="meta">£7.90</span></a>

Add wpisset-hide-description class to CSS Classes input field to hide navigation label.

Call-out in Mega Menu

  1. From the WordPress main menu navigate to Appearance => Customize => Header => Sub Menu section.
  2. Enable Extra Mega Menu Navigation option and add your content to Notice and settings for background and text color.
  3. From the WordPress main menu navigate to Appearance => Menus section.
  4. Navigate to first level mega menu and add wpisset-extra-navigation class to CSS Classes input field.
  5. After setting up extra class for mega menu click the Save Menu button.

Widgets


  1. Navigate to Appearance => Widgets to access the list of widgets and widget areas.
  2. The left hand side shows all the widgets and the right hand side shows all widget areas you can add widgets.
  3. Drag and drop the widget you want into the widget area you want.

Blockquote Widget

  1. Navigate to Appearance => Widgets add new Text widget to Sidebar widget area.
  2. Navigate to Text widget settings activate Text editor mode and add you blockquote content.

    Here is the code we are using for Hayden theme:

    <blockquote>To feel, and think, and learn - learn always: surely that is being alive and young in the real sense.<cite>Freya Stark</cite></blockquote>

  3. From the WordPress main menu navigate to Appearance => Customize => General => Blog Settings section for editing the background image of Blockquote widget.

Slider


  1. From the plugin's main admin page, select Create New Slider
  2. Enter a Slider Title and Alias, and click Save.
  3. You'll now be redirected to the plugin's main admin page where you'll see your new slider listed.

Please view plugin full documentation on this page.

Edit A Slider


WooCommerce


Hayden theme is powered by WooCommerce plugin, with endless flexibility and access to hundreds of free and premium WordPress extensions, WooCommerce now powers 30% of all online stores — more than any other platform.

  1. Please make sure you have installed and activated the plugin in Plugins section.
  2. If you haven't installed it please get back to Plugin Installation article.
  3. From the WordPress main menu navigate to WooCommerce => Settings section for plugin configuration.
  4. For more information how to set up new products and use settings and options of the plugin please use this documentation.

Customize WooCommerce


Mailchimp


After install all required plugins, MailChimp for WP will be added into the navigation menu on the sidebar.

  1. Navigate to MailChimp for WP => MailChimp section to connect your MailChimp account.
  2. MailChimp for WP plugin provides a convenient link, below the field, how to get API key for your MailChimp account.
  3. Once your account is connected, your list information will populate in the MailChimp Data area.
  4. Navigate to MailChimp for WP => Form section to create and edit your MailChimp form.
  5. Here is form code we are using for Hayden theme:

    <p class="description"> Subscribe to our newsletter & get £10 Off* </p> <p class="email"> <input type="email" name="EMAIL" placeholder="Your email address" required /> </p> <p class="submit"> <input class="wpisset-button-full" type="submit" value="Sign up" /> </p>

  6. For displaying MailChimp form in the footer, navigate to Appearance => Customize => Footer, enable Footer Top and input your MailChimp form shortcode to Column 2 textarea.
  7. For displaying MailChimp form in blog post, navigate to Appearance => Customize => General => Post Layout and input your MailChimp form shortcode to News Letter textarea.

Instagram Feed


After install all required plugins, Instagram Feed will be added into the navigation menu on the sidebar.

  1. Navigate to Instagram Feed => Configure section to connect your Instagram account.
  2. Once your account is connected, navigate to Instagram Feed => Customize section to disable Load More, Follow buttons.

Translation


There are various options to translate your WordPress website. You can do it by either editing .po file, or by using plugins.

Poedit Method

Translation with Poedit is the fastest and most convenient way to translate apps & sites with gettext. Download app on Poedit Download.

  1. Open Poedit software.
  2. Select the pot file from wp-content/themes/hayden/languages/hayden.pot.
  3. You will find all English text strings called Source Text, click Create New Translation and select language you want to translate.
  4. In the lower right section of the POEdit, you will find a text area where you can add your translation.
  5. Save the file to wp-content/themes/hayden/languages/ folder, prefixed with the theme name, like “hayden-de_DE.po” for German or “hayden-de_AT.po” for German (Austria). It will generate both a .po and corresponding .mo files for your translation.

Loco Translate Plugin

Loco Translate provides in-browser editing of WordPress translation files.

  1. Navigate to Plugins => Add New section, search Loco Translate plugin, install and activate it.
  2. Navigate to your WordPress Dashboard (wp-admin), navigate to Loco Translate => Themes section.
  3. Select Hayden theme and click on New Language link.
  4. Choose a language in Choose a language field, and choose themes/hayden/languages/<locale>.po in Choose a location field.
  5. Translate strings and click on Save button to save the translations.

For more information please check links below:

Site Speed


Your website speed largely depends on your server and site optimization. Caching & Minification is important in any website. These are steps we recommend you to take in order to increase you site speed.

  1. Install one of recommended Cache plugins.
  2. Having a large image or several of them can drastically slow down your site speed. A great plugin to compress your images is Imagify Image Optimizer (Free version is available). There are also many others out there, try a google search and you will find other options as well.
  3. Slow speed can be a result of your hosting service. General idea is that some hosts are better than others, shared hostings can have an effect on speed.
  4. The more plugins you use, the slower your website will be. If your website is slow, please disable all third party plugins except for the ones that comes with our theme clear your browser cache and check if it speeds it up. Most likely website will speed up, then you activate the plugins one by one and check the site speed each time. Unfortunately there are plugins that can slow down your website, please contact the plugin developer and report it to them.

Please be aware that recommended Cache plugins work differently with different hosts and server setups. We don't provide support for third party plugin related issues.

Troubleshooting


Here are the most common errors and solutions.

Theme Installation

  1. Theme is missing the style.css stylesheet error.

    A common issue that can occur when installing a WordPress themes is The package could not be installed. The theme is missing the style.css stylesheet. error message being displayed when uploading or activating the theme. One of the reasons you may receive this error is if you have uploaded the incorrect file. You have 2 options for downloading your theme. Installable WordPress file only and All files and documentation (full zip folder). If you have downloaded All files and documentation you will need to extract and locate the installable WordPress file. Please make sure you are uploading only the installable theme which is called NameOf Theme.zip. If you upload ALL these files you will receive an error.

  2. Are you sure you want to do this? Please try again.

    Most likely your web server is configured with low PHP settings that only allow a certain size ZIP file to be uploaded via WP admin. You need to install the theme via FTP, or contact your web hosting company to increase the limit.

  3. White Screen after installing the theme.

    It is often referred to as the "white screen of death," actually means. There is an error that you can't see. So the first thing to do would be to enable WP_Debug so you can see what the actual error is and fix the problem. Please use this link for Debugging in WordPress information.

Demo Content Import

  1. Revolution Slider: Slider with alias not found.

    This error message means that the slider you are referencing for shortcode (page builder slider element) does not exists and cannot be loaded. Please read how to import slider import files in Demo Installation article.

  2. 500 Internal Server Error

    Out of nowhere your site returns a 500 Internal Server Error, PHP memory limits set too low, To address memory limit issues, there are two paths: adjust yourself or contact your hosting company.

    PHP Configuration Limits
    • max_execution_time 180
    • memory_limit 128M
    • post_max_size 32M
    • upload_max_filesize 32M
  3. Demo Content Fails: Seems Like An Error Has Occurred.

    Most likely going to be due to low server limits. The solution is to increase the PHP limits. To address memory limit issues, there are two paths: adjust yourself or contact your hosting company.

    PHP Configuration Limits
    • max_execution_time 180
    • memory_limit 128M
    • post_max_size 32M
    • upload_max_filesize 32M
  4. Demo Content Duplicated.

    If you do have duplicate demo content, you can use the below methods to address this:

    • Method 1: WordPress Reset Plugin - This plugin is the fastest way to get rid of duplicated content. However, it will remove all content from your database. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data, customizer options, etc. Do this only if you are planning to start your website freshly from a new installed WordPress. Download the WordPress Reset plugin.
    • Method 2: Manual Removal - This method involves manually removing duplicate items. Navigate to Appearance => Menu and delete any duplicate items one by one. It will be the same process for pages, post, etc.

You can always view the most recent update information in the change log text file.

Rate Item


If you like our theme and service, please take a moment to rate it with five stars in your Downloads section on Themeforest and please write a review in Comment.

Please visit: http://themeforest.net/downloads and find Rate this item below the Download button and rate it with five stars.

Thank you a lot for purchasing this theme!