Instalation and Setup

WooCommerce plugin which can be downloaded here for free. Once plugin is installed and activated, download Essential theme package and unzip it, then go to theme folder, unzip essential.zip folder and upload to wp-content/themes/ folder of your Wordpress site. You can also use Wordpress install feature, just go to Install Themes tab under Appearance => Themes section, select upload and browse essential.zip within theme folder, Wordpress will install necessary files in coresponding place. Theme styles WooCommerce elements and widgets via CSS. Since Essential is WooCommerce eCommerce theme prerequisite is Wordpress

After theme is installed you need to go to Appearance => Themes menu and activate Essential theme.

If you want quick setup for your website while developing, you can import Woocommerce xml data sample that is included in theme package located in wp-content/plugins/woocommerce/dummy_data.xml file, just follow these steps to import sample data:

By default theme shows latest blog posts. That's why you need to create new page called home page, select home page template, save it and go to Settings => Reading and set that home page for Front page displays in order to get our custom home page shown. Now you can click on Essential options to proceed with customization of defaults like number of products, default slider, custom CSS, etc

Create pages for contact, wishlist and compare - this is done by creating new page and setting appropriate template, no content should be added except for contact page where you can edit map and contact info, however contact page has to be created first and then addded as contact page in Essential options => General => Contact page, after contact page is set and options saved you will now see additional custom fields for location info (3 maps are on contact page by default), contact info, texts, etc. If you add content for contact page that text will be shown on the left side of contact form.

Now if you want to change color scheme and styles, add some background images do it on Essential options => General.

Next step is to go to Essential options => Home page, there you can edit tagline in Home header text.

Select some product categories you want to show on home page right under tagline by adding them to Product Category list, under this input you can check Use tabs checkbox if you want to have products displayed in tabs and you can change number of products that you want to show and list.

Next thing to do is to add Home footer heading, Home footer link, Home footer text and Home footer image this block is meant for footer info where you can put shipping / payment details, link to your contact page, quick facts, etc. Home footer image dimensions have to be right dimensions - 457px x 237px. Since Wordpress crops all images to all dimensions we did not want to add this one for single image in order to have more optimal theme, save you from using unnecessary additional disk space and processing time.

You can now proceed with default slider setup, go to Essential options => Content slider and configure what and how do you want to slide, make sure to have some content with images in order to have something to slide. This is configuration for default slider so you do not have to define slider in every post, page or product.

Next step is to add main menu, first create menu in Appearance => Menus named "main menu", add some items to it and save it. Then go to Appearance => Menus => Manage locations and add that menu to locations named "Primary Menu" and "Mobile Menu". Top menu is menu location above main menu, where search is. Usually there are links to my account, cart (and cart dropdown) and checkout.

Make sure that file wp-content/themes/essential/admin/fonts/fonts.json is world writable (has 666 permissions) in order to have latest Google fonts fetched and cached

If you want custom CSS to be in file and not inline make sure that file wp-content/themes/essential/css/custom.css is world writable (has 666 permissions)

Essential theme is a responsive theme. That means that it should work on mobile devices and tablets without any modifications. Theme will adapt to different screen width automatically, blocks will be resized and reordered according to current viewport width.

Removing Theme Admin Dashboard Widget

We have added admin dashboard so users have links to documentation and support at hand. If you want to remove that widget open file essential/admin/admin-function.php and replace add_action('wp_dashboard_setup', 'add_dashboard_widgets' ); with //add_action('wp_dashboard_setup', 'add_dashboard_widgets' ); - so just comment out that function.

General Options

In Essential Theme Options you can change and modify theme's settings, colors, background image, fonts, headers, footer text, set contact page, change settings for Home page, default Content slider and add custom CSS code. Slides is basically custom post type which allows you to add custom slides to main home page slider. Home page slider is extremly customizable - if you go to edit home page and uncheck "use default slider" you will get all available slider options. You can slide any type of post or page, whole category, tag, products category, product tag, specific post or custom made slide.

Theme Options - General

Here you can define and modify color scheme, background image (or color), fonts, footer text, select contact, wishlist and compare page. Most of the available options are self explainable. Post header background is an option where you can use CSS3 effects to create gradients using CSS3 utility "Gradient Creator". You can change premade contact page which is selected by default (to change email to which emails are sent you need to go to Pages => All Pages, find page named "Contact" and click edit. Scroll down to Contact page options). Wishlist and compare pages should stay as is unless you know what are you doing (their templates can be changed by editing files wishlist.php and compare.php).

To add your custom image logo (feature avaliable in v1.1) instead of showing sitename and description, use Logo image form to upload your logo. Use image up to 108px height otherwise it will be scaled to 108px.

You can change default favicon by uploading your own using upload form below (feature available from v1.1.6). Below is screenshot of that upload form in General theme settings:

Theme Options - Home Page

Essential Theme allows you to use two types of home page, key difference is in slider type and how and how many products you want to show on it. To configure those settings you have Essential Options => Home page and Essential Options => Content slider settings. Home page can show products using tabbed slider or in separate blocks. To show product in separate blocks one under another please uncheck "Use tabs" checkbox.

If you want to change home page text, make sure to use text editor type and not visual.

Theme Options - Content Slider

Theme Options - Custom CSS

Custom CSS feature has been added so you can conveniently override theme's css by rewriting its classes or adding your custom css code. To find out which class you want to edit you can use developer tools like Firebug or Chrome's dev tools (just hit F12 to open it, or right click and then "inspect element"). Custom CSS can be added inline or in file essential/css/custom.css - if you select "use file" in Essential Options => General make sure to make file world writable (set permissions to 666).

Home Page Content

By default theme shows latest blog posts that's why you need to have page with home page template. Once you have that in place you can click on Essential options to proceed with customization of defaults like number of products, default slider, custom CSS, etc. To modify home page settings you need to click on Essential Theme Options => Home page tab. Settings are mostly self explainable by their name and description. Tagline can be changed there along with featured product categories. Product Category list allows you to easily manage featured product categories on home page.

Featured items are products that can be selected by going to Products => Products list and clicking on star which toggles featured status for a product. Featured items are sorted by date. Continue reading for home page slider setup and options.

Tabs on home page can be sorted manually and you can set custom tab to be active (feature available from v1.1.6). Here is screenshot for those settings:

Home Page Slider

Home page has big slider in header area, in fact every page or product page can have slider in header. You can add custom slides by going to Slides => Add slide, or you can select various content for slider in Essential Theme Options => Content slider - in this section you define default slider settings so if you checked "Use theme default slider settings" in your home page. You can also customize that slider by unchecking "Use theme default slider settings" - for example you can add custom post type, whole category or tag, product category or tag, specific post or you can write custom query args to fetch slider content. Content can be sorted asc / desc by date, title, author, last modified date, random.

There are two types of sliders - default and simple. Default is a bit more advanced, it has parallax effect while simple is, like its name says, a bit simpler. Simple slider has image, heading and subheading text and sliding items. Keep on your mind that slider image is not sliding and its purpose is more like a slider background. You can slide products, posts, tags etc. It's important that objects you want to slide have image set.

Home Page Widgets

Home page itself does not have widget space. Widgets can be added to footer (8 locations named Footer 1 to Footer 8) and in pages with sidebar location named Primary. Sidebar can be located on left or right, or page can be completely without sidebar.

Home Page Footer

Home page has a place for content where you can add content like about us, quick facts, payment and shipping info... This content can be edited by going to Essential Options => Home page tab. You will see there inputs named Home footer heading, Home footer link, Home footer text and Home footer Image. Footer image is not cropped by Wordpress so make sure to upload exact dimensions - 457px x 237px. Explanation why image is not cropped is on the top of documentation, in theme setup section.

Creating Menu Items

To create, modify or delete Menu items go to Appearance => Menu. WordPress menu editor is easy to use just drag n drop menu items to right position after you selected desired menu.

First make sure that you have enabled in screen options every type of menu item you want to add and CSS classes. Then select menu you want to edit, you will see main menu and shipping and FAQ menu. If you want to create mega menu you will need to add CSS class to top level item named "megamenu" - see screenshot below.

When creating a submenu or megamenu make sure to either enter real url for parent element so WordPress can mark it as current or use '#' as placeholder if you don't want item to be marked current.

Ordering Menu

To order the menu items, you just need to drag and drop item in menu manager, you can also place and ordering the menu items as your child menu.

Create a Page

Creating a page is simple and easy. First make sure that you have enabled all Screen Options. Then click on Pages => Add New to start with new page creation. You will notice 3 different layouts which you can choose for your pages. Beside that there are three page templates - Contact, Compare and Wishlist templates. Those templates are intended for our predefined pages.

Each page can have custom header background, custom slider and featured image. You can use shortcodes in your pages (and posts).

Creating Page for Blog or News listing

First you need to define category in Posts => Categories, you can name that category for example "news" or "blog".

Once this is done just add this category to a menu via WordPress menu editor - Appearance => Menu.

Assign Featured image to post item which will be shown in post archive and single post view

Auctions

Essential (added in v1.2) comes with WooCommerce Simple Auctions plugin / extension which enables you to have auctions in WooCommerce. Prerequisite for enabling that plugin is WooCommerce. Setting up auctions is easy and simple, everything is explained in detail in WooCommerce Simple Auctions documentation here. If you want to get in touch directly with plugin creators you will need to buy single licence. Otherwise contact us for support.

Bulk Discounts

Essential (added in v1.2.30) comes with WooCommerce Simple Bulk Discounts plugin / extension which enables you to have discounts for bulk products purchase in WooCommerce. Prerequisite for enabling that plugin is WooCommerce. Setting up discounts is easy
and simple, everything is explained in documentation here.
If you want to get in touch directly with plugin creators you will need to buy single licence. Otherwise contact us for support.

Is my WooCommerce properly setup? - To find out go to WooCommerce => System Status or url http://www.yourdomain.com/wp-admin/admin.php?page=woocommerce_status and make sure that there is no red colored errors. Usually WP Memory Limit is too low and that can cause number of problems in WooCommerce.

Is there a way to remove View, Compare, Wishlist icons and just go to the product page when you click on product thumb? - Yes, in custom CSS add:

.circle-wrapper, .action-buttons { display:none !important}

What are best dimension for images? - Catalog Images: 430 x 430, Single Product Images: 960 x 960, Product Thumbnails: 180 x 180. If you set wrong dimensions and now images look blurry please download plugin http://wordpress.org/plugins/regenerate-thumbnails/ and regenerate thumbnails with new dimensions.

How do I update theme? - You can update your theme manually by replacing the existing theme folder with the new version. Delete and replace rather than overwrite the original theme folder either from your dashboard, or by accessing your site via FTP. Please note: deleting your existing theme folder will also delete any customizations you have made to your theme files. If you have customized your theme files, you will need to re-apply these changes. There is no way around this. You will need to update both themes (parent theme & child theme), then check that your theme options settings are still correct.

Create a Child Theme to Keep Your Customizations Separate

We recommend creating a child theme, which lets you use the parent theme for most of your design and functionality, but lets you customize it the way you like it. Because a child theme is separate from the parent, you will not lose anything if you update the parent theme.
Here is tutorial for creating child theme http://www.hongkiat.com/blog/wordpress-child-themes-dev/

How can I add custom slide to default slider? - Go to Slides => Add slide. Create new slide, add text, link and image. If you don't want to scale image check Use orginal image. Then go to page where
you want to use that slider or to Essential Options => Content slider and select Post type slider. If you want specific slides (slide IDs) use Specific Post option.

How can I customize simple slider? - Simple slider consists of bigger image (the watch on our demo site / woman in PSDs) and circle images that can be slided left or right. Once you add products for those circles you will need image that has height of 652px. Watch image is here, so you can check if for reference, basically it's transparent png in slider background - see image here. There is no need to add that year part, you can easily add normal text in slider option named Sub heading text.

How can I add logo image instead of text? - Here is explained how you can add logo image instead of text.

How can I change contact email? - Go to Pages => All Pages, find page named "Contact" and click edit. Scroll down to Contact page options and
there you will find field named "Send mail to".

How can I change map on about us page? - Go to Pages => All Pages, find page named "Contact" and click edit. Scroll down to Contact page options and there you will find field named "Place map". Find your location on google maps, click on "link" and under "Paste HTML to embed in website" you will find iframe code which you need to copy paste in this field.

I want sidebar on left / right side of a page? - Go to Pages => All Pages, find page you want to edit. Find in right sidebar box named "Layout". If you don't see that box click on "Screen Options" to enable it. There you can select layout with sidebar on left or right side.

I want full width page? - Go to Pages => All Pages, find page you want to edit. Find in right sidebar box named "Layout". If you don't see that box click on "Screen Options" to enable it. There you can select layout named "full width".

I want to display product only and remove add to cart, is that possible? - Yes. You need to unpublish all checkout and cart pages then add on the bottom of file wp-content/themes/essential/functions.php this code:

I see products out of stock in related products? Why? I want to hide out of stock products from related products! You have to change WooCommerce setting called "Out of stock visibility" which is located in WooCommerce Settings -> Products -> Inventory tab.

PSD Files

Following PSD files are available upon request (you can request PSD via support form):

Love this theme?

This theme is created by Prospekt and wpgenie. Check out our Envato profile where you can support us by purchasing our plugins and themes, give us feedback and post your ideas and feature requests, ask for support and rate our items. Check out our free stuff.