“Essential” - Theme Documentation

Essential WooCommerce Theme v1.2

Created: 15/10/2013
Last Updated: 15/09/2017
By: Prospekt Solutions & wpgenie
Email: prospekt@prospekt.hr

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via contact form here. Happy selling!

Table of Contents

  1. Change Log
  2. Installation and Setup
  3. General Options
  4. Home page Setup
  5. Menu Setup
  6. Pages
  7. Blog / News Page
  8. Auctions
  9. Bulk Discounts
  10. Shortcodes
  11. Frequently Asked Questions - FAQ
  12. PSD Files

Change Log - top

Click here for change log

Installation and Setup - top

Since Essential is WooCommerce eCommerce theme prerequisite is Wordpress 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.

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:

  1. Login to WP-admin
  2. Go to Tools => Import menu and choose Wordpress
  3. In upload field choose the xml sample data and upload it
  4. Click on Import Attachments - Download and import file attachments checkbox (make sure that Woocommerce is installed and activated before importing dummy data)
  5. Set couple of featured items
  6. Now you need to configure Essential theme pages, options and create menus - check steps below

Essential dummy / sample data can be downloaded here

Initial theme configuration is usually done by following steps below:

  1. Login to WP-admin
  2. Activate theme
  3. 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
  4. 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.
  5. Now if you want to change color scheme and styles, add some background images do it on Essential options => General.
  6. Next step is to go to Essential options => Home page, there you can edit tagline in Home header text.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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
  12. 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 - top

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
- top

After you finished installing Essential theme, beside WooCommerce menus (WooCommerce and Products) two new menu items will appear in Wordpress admin menu:

  1. Essential Theme Options
  2. Slides

In Essential Theme Options you can change and modify 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 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 Setup - top

Pages - top

Blog / News - top

Auctions - top

Essential v1.2.x 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 - top

Essential 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.

Shortcodes - top

Essential implements shortcodes which can simplify content creating and editing.

  1. Hidden [hidden show="desktop tablet mobile-landscape mobile-portrait"]test[/hidden] allows you to show content only on specific viewport / resolution
  2. Box [box]sample text[/box] allows you to box content inside .box class
  3. Two columns [two-column]column 1 text[/two-column][two-column-last]column 2 text[/two-column-last] allows you to split content in two columns
  4. Three columns [three-column]column 1 text[/three-column][three-column]column 2 text[/three-column][three-column-last]column 3 text[/three-column-last] allows you to split content in three columns
  5. Four columns [four-column]column 1 text[/four-column][four-column]column 2 text[/four-column][four-column]column 3 text[/four-column][four-column-last]column 4 text[/four-column-last] allows you to split content in four columns
  6. Small button [small_button url=google.com]Small button[/small_button][small_button url=google.com color=orange]Small button[/small_button] create small button with link (two types available - regular and orange)
  7. Regular button [button url=google.com]Normal Button[/button][button url=google.com color=orange]Normal Button[/button] create regular button with link (two types available - regular and orange)
  8. Big button [big_button url=google.com]Big button[/big_button][big_button url=google.com color=orange]Big button[/big_button] create big button with link (two types available - regular and orange)
  9. Icons [icon character=👍] [icon character=👍 size=2em] [icon character=👍 size=3em color=red] create Entypo icons in different size and colors, more informations about Entypo icons can be found here
  10. Embed YouTube video [youtube width='200' height='100']YouTube video ID[/youtube] allows you to easily embed YouTube videos by adding video ID inside this shortcode (width and height attributes are available from v1.1.5)
  11. Horizontal line [hr] allows you to insert horizontal line

Check screenshot below to see how shortcodes actually look like on a page:

Frequently Asked Questions - FAQ - top

  1. Problems after WooCommerce 2.1 update? - Check out this url http://develop.woothemes.com/woocommerce/2014/02/solving-common-issues-after-updating-to-woocommerce-2-1/
  2. WooCommerce 2.1 - no more logout and other WooCommerce pages? - Check out this url http://www.remicorson.com/woocommerce-2-1-x-endpoints-vs-shortcodes/
  3. Where can I download your sample data? - Sample data can be downloaded here on this url http://essential.prospekt-solutions.com/documentation/essential.wordpress.2013-11-05.xml.zip
  4. 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.
  5. 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}
  6. 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.
  7. 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/
  8. 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.

  9. 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.
  10. How can I add logo image instead of text? - Here is explained how you can add logo image instead of text.
  11. 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".
  12. 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.
  13. 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.
  14. 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".
  15. 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:
    function filter_add_to_cart (){ return ''; }
  16. I want to display product thumbnails with prettyPhoto? - You need to modify template themes\essential\woocommerce\single-product\product-thumbnails.php with this code:
    <?php /* comment out this section
    <?php echo '<a href="'.esc_attr( $medium_image[0] ).'">'; ?>
    <?php echo $thumbnail_image; ?>
    <?php echo '</a>'; ?> end comment */?>

    <?php echo apply_filters( 'woocommerce_single_product_image_thumbnail_html',
    sprintf( '<a href="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $large_image, $thumbnail_image ),
    $attachment_id, $post->ID );
    You can download modified template here. After downloading replace file themes\essential\woocommerce\single-product\product-thumbnails.php (make backup of original one first).
  17. How can I increase bid input fiels? You can use this CSS code and add it to custom CSS in theme settings: .quantity {height: 40px} .woocommerce .quantity, .woocommerce #content .quantity, .woocommerce-page .quantity, .woocommerce-page #content .quantity {width: 180px} .woocommerce .quantity .plus, .woocommerce .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce #content .quantity .minus, .woocommerce-page .quantity .plus, .woocommerce-page .quantity .minus, .woocommerce-page #content .quantity .plus, .woocommerce-page #content .quantity .minus {width: 40px; height: 40px} .woocommerce .quantity .plus, .woocommerce #content .quantity .plus, .woocommerce-page .quantity .plus, .woocommerce-page #content .quantity .plus {right: 0} .woocommerce .quantity .minus, .woocommerce-page #content .quantity .minus, .woocommerce-page .quantity .minus, .woocommerce #content .quantity .minus {left: 0} .woocommerce .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce-page #content .quantity input.qty {height: 38px; margin-left: 40px; width: 98px;} .woocommerce div.product form.cart .button, .woocommerce #content div.product form.cart .button, .woocommerce-page div.product form.cart .button, .woocommerce-page #content div.product form.cart .button {height: 40px}
  18. 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 - top

Once again, thank you for purchasing our theme. We'd be glad to help you if you have any questions. If you have more general question related to our themes on ThemeForest, you might consider visiting the forums and post your question in the "Item Discussion" section.

Prospekt Solutions

Go To Table of Contents