Back to top

Thank you very much for purchasing

Mango | Responsive WooCommerce Theme!

This document describes simple guide for the installation and use of Mango | Responsive WooCommerce Theme - We recommend you to read this document thoroughly before starting or if you are experiencing any difficulties.

If you get any problems with Mango, please contact us via our Support System here, We're always ready to make you happy with our products!
http://smartwavethemes.net/support

Getting Started


 

Getting Started

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress installation guide -
http://codex.WordPress.org/Installing_WordPress

Note:

  • We recommend you to backup your original files and database data before activation.

 

Install Theme

  • **Make sure your server configurations are good enough, Please check attached file to ensure:
    Theme Requirements.rtf
  1. Extract the theme package (downloaded file from ThemeForest) on your computer and navigate inside "Theme Files" folder.
  2. When you are ready to install a theme, you must first upload the theme files.
    • FTP Upload

      Using your FTP program, upload the unzipped theme folder "Mango" into the /wp-content/themes/ folder on your server.

    • WordPress Upload

      Navigate to Appearance > Add New Themes > Upload.

      Click Install Themes and click the Upload button.

      Navigate to find the "Mango.zip" file on your computer and click "Install Now"

  3. Go to Appearance > Themes and activate "Mango" theme.

 

Install Plugins

Mango theme needs to install many plugins. Some are required and some are optional.

  • WooCommerce - WordPress eCommerce plugin (Required)
  • WPBakery Visual Composer ($33 value) - Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. (Required)
  • Ultimate Addons for Visual Composer ($17 value) - This plugin adds several premium elements in your Visual Composer. (Required)
  • Iconize WordPress Plugin ($17 value) - Add vector icons to posts, pages, menu items, widget titles & taxonomy terms visually, using simple and easy to use modal dialog. Select more than 2000+ icons. (Required)
  • Meta Box - A complete tool to create meta box and custom fields in WordPress. (Required)
  • WC Vendors - The #1 Free Multi-Vendor WooCommerce Plugin. Create your own marketplace and allow vendors to sell just like etsy, Envato, eBay, or Amazon type sites! (Optional)
  • WP Font Awesome Share Icons - Use for the social sharing in product, post, porfolio pages (Optional)
  • Contact Form 7 - Use for contact form (Optional)
  • Regenerate Thumbnails - Allows you to regenerate all thumbnails after changing the thumbnail sizes. (Optional)
  • Revolution Slider ($18 value) - Revolution Slider is Premium responsive slider. (Optional)
  • YITH WooCommerce Compare - Allows you to compare more products with WooCommerce plugin, through product attributes. (Optional)
  • YITH WooCommerce Wishlist - Allows you to add Wishlist functionality to your e-commerce. (Optional)
  • YITH WooCommerce Ajax Search - Allows your users to search products in real time. (Optional)
  • YITH WooCommerce Ajax Navigation - Allows user to filter products in Shop page without reloading the page. (Optional)
  • Subscribe2 - Notifies an email list when new entries are posted. (Optional)

Install and Activate all bundled plugins

You should install and activate the plugins.

We recommend these plugins to setup your site:

Font Awesome Share Icons For Wordpress

By default, plugin settings should be correct and working. But if you notice any issue then please configure plugin settings under Settings -> Font-Awesome Share as shown below.

 

Setup WooCommerce

Install WooCommerce Pages

After activating WooCommerce plugin, you should install WooCommerce pages.

Change Product Image Sizes

You should change the image sizes in WooCommerce > Settings > Products > Display.

Note: If you have same sized images for ALL your products, then no need to hard crop the images. Please un-check the hard crop box.

Note: If you have different sized images fro ALL your products, then you need to hard crop the images. Please check the hard crop box and define the size you want to crop the image on the Shop Page and Product Page.

Regenerate Thumbnails

After changing the image sizes, you'll need to resize all images with "Regenerate Thumbnails" plugin.

Make Mango Retina Ready

WP Retina 2x - All graphic elements like icons, buttons, boxes, etc... are already retina ready in our theme. If you want your content images to be Retina Ready in your site, use WP Retina 2x plugin to make your website look beautiful and crisp on Retina / High DPI displays. (Optional)

 

After installing WooCommerce plugin, you should change Permalink Settings.

  1. Go to Settings > Permalinks.
  2. Change Common Settings to Post Name or other.
  3. Change Product permalink base to Product or other if you've installed WooCommerce plugin.
  4. Save Changes.

 

Import Demo (optional)

Import Demo Content

Mango has 20 Demos, you can easily import demo content in "Theme Options -> Demo Importer" page. Alternatively, you can also use XML files to import demo content, XML file is placed in "XML Files" folder in theme.

Note: BEFORE importing please make the settings for your products images. Change Product Image Sizes

Note: BEFORE importing make sure your server configurations are good enough, Please check attached file to ensure: Theme Requirements.rtf
It can take around 2-10 minutes to import everything, depends on your server. Please be patient and wait for it to complete. After load, you will see a "Imported!" message in white label.

Note: We didn't include all menu items in demo content so you should configure the menus. Please see Menus at the top of documentation.

After import, you should configure menus again in Appearance > Menus & the widgets in Appearance > Widgets. Please see "Menus" in top menu.

You should select the Front page in Settings > Reading. For example, if you want to use "Home Version 5" as your homepage, you should select "Home Version 5" page as your Front page.

Import Revolution Slider

You can import demo sliders for Revolution Slider with "home_version_1.zip", "home_version_2.zip", "home_version_3.zip", "home_version_4.zip", "home_version_7.zip", "home_version_8.zip", "home_version_12.zip", "home_version_13.zip", "home_version_15.zip", "home_version_16.zip", "home_version_17.zip", "home_version_18.zip", "home_version_19.zip", "home_version_20.zip", "shop_category.zip" inside "Dummy Data" folder.

Update Theme & Plugins

Prepare for Updating Theme

  1. We recommend you have a current backup of your site including wp-content folder, wp-config.php file and .htaccess file and a copy of wordpress database. If you are not familiar with how to do this, you can use several plugins such as BackWPup Free. And you should backup Mango theme options in
    - Theme Options -> Import / Export
    - Theme Design -> Import / Export
  2. You should completely remove all previous Mango theme folder.
  3. You should NOT rename Mango theme folder.
  4. You should reset browser cache, server cache and plugin cache.
  5. You should update required and recommended plugins.
  6. If you are running a multilingual site using PO/MO files, it is recommended to always keep backup of your translated files, it may gets overwritten while updating the Theme, same is the case for plugins. However if you are using WPML there is nothing to worry about.

HOW TO DOWNLOAD NEW THEME FILES FROM THEMEFOREST

  1. Log into your Themeforest account and navigate to your downloads tab. Find the "Mango" theme.

  2. Click the "download" button next to it and choose to download the "Installable WordPress Theme" which is just the WordPress file, or choose the "Main Files" which is the entire package that contains everything.

  3. Then you need to decide if you want to install the update via FTP or via WordPress. Directions for both methods are below.

Update Method using Envato Toolkit

You can update it from WP Dashboard -> Envato Toolkit section. You will see it in left bar once Envato Toolkit plugin is activated. Please follow the instructions on the page and see below screenshots as well.

Update Plugins

You can update plugins with a one click method. To do that, go to the ‘Updates’ section of your WordPress dashboard. If there are some plugins that can be updated, they will appear here, right below the part which tells you if a new version of WordPress is available or not. To update your plugins, select them and click on the ‘Update Plugins’ button.

IMPORTANT!

We have included server plugins in our theme, if you notice there is an update for any of these & you are having trouble to update plugins, please follow these steps:

  1. Please go in "Plugins" menu.
  2. Select and deactivate these plugins.
  3. Select and delete these plugins.
  4. Please go in "Appearance > Install Plugins" menu.
  5. Select and install these plugins.
  6. Select and activate these plugins.

Update Method using FTP

This method does require more steps and manual work. First you need to manually download the new theme package from your Themeforest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP. Please see the information below for how to download new files, and install it via WP or via FTP.

  1. Go to "wp-content > themes" location and backup your "Mango" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will NOT be lost.

  2. Retrieve the "Mango.zip" file from your new Themeforest download and extract the file to get the "Mango" theme folder.

  3. Then simply drag and drop the new "Mango" theme folder into "wp-content > themes" location. Choose to "Replace" the current one if you did not delete it.

  4. Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. You should update the plugins. You can see Update Plugins for more details.

 

Theme Translate WPML

Mango is fully compatible with WPML plugin. We strongly recommend to setup your site as multilingual using WPML plugin, to save your time. You can see Multilingual Mango theme in action on WPML + Mango public test site. Below is the process for turning Mango multilingual with WPML.

First, you need to to purchase a latest version of WPML, including String Translation and Translation Management add-ons. (You can either buy the Multilingual CMS or Multilingual CMS Lifetime).

Initial Setup

– Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management), and then other WPML plugins that may depend on them.

– Setup WPML from WPML->Languages. See WPML Getting Started Guide for complete reference, but the initial simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector.

Translating Pages, Posts and other post types

To translate a page you need to go to WP Dashboard -> Pages and in the list you will see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page. Go ahead and edit or add the translated page for 'Home'.

Right now you just need to translate your page into the new language.


Read this to easily duplicate your existing content.

Translating custom post types and taxonomies

Mango comes with extra custom post types such as portfolios and testimonials, and custom taxonomies. In order to get a similar interface for translation/duplication as for posts and pages, you need to go to WPML->Translation Management, and select the tab ‘Multilingual Content Setup’.

Translating Menus and Language Switcher in Header

WPML can synchronize menus for you. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in synch menus for other languages pointing to the translated versions of these pages, posts or categories.

From WordPress Appearance->Menus you can see your existing menus and add menu translations and synchronize menus across translations.

To show the language switcher in the header you need to activate it from Theme Options -> Header.


Translating theme texts and other strings in your site

To translate strings you need to follow the procedure for Theme and Plugin Localization. Go to WPML->Theme and Plugins Localization, and click on ‘Scan the theme for strings’ and you will see theme strings and which ones are translated or not.

 

Theme Translate PO/MO

Mango theme includes default PO and MO files. For our theme to be fully translated into your language you need to convert 2 language files as our theme has 2 default language files:

  1. First in the theme's lang folder wp-content/themes/mango/lang
  2. Second in wp-content/plugins/mango_core/lang
  3. Please note, you will also need to convert languages files of the plugins that you are going to use with our theme.
  4. It is recommended to always keep backup of your translated PO/MO files.
You can translate using POEdit tool. You can download this tool from here.

More details: Translating With Poedit.

Theme Colors / Skin Options

You can easily change main colors from Theme Options -> Skin Options tab.

Individual elements design settings (Body, Page, Header, Main Menu, etc...) can be found in sections right below same Skin Options tab. On few pages, text color is coming from Visual Composer editor so please change text color from there.

If you want to further modify design for any elements, then follow below steps to Add Your Custom CSS code:

  1. Upload & Activate Mango Child Theme (included in main theme files).
  2. Add Your Custom CSS code in Custom CSS area in Skin Options tab.

 

Theme Options

You can easily change Theme Options.

Theme Options have "Skin Options", "General", "Header", "Title and Breadcrumbs", "Body, Page", "Footer", "Blog & Single Post", "Portfolio", "Woocommerce (Shop, Category, Product, Cart pages)", "Wc Vendor", "404 Page", "Contact", "Social Links", "Import / Export", "Demo Importer" sections.

Post

How to create a post:

  1. Go to Posts > Add New.
  2. Add title, insert content and configure post options. Please see Content Type Options about post options.
  3. Select categories.
  4. Upload or select featured image.
  5. Add Slider Images.
  6. Publish.

 

Page

How to create a page:

  1. Go to Pages > Add New.
  2. Add title, insert content and configure page options. Please see Content Type Options about page options.
  3. Select page parent (optional) and page template.
  4. Publish.

 

Product

How to create a product:

  1. Please see the following documentation: Managing Products.

 

Portfolio

How to create a portfolio:

  1. Go to Portfolios > Add New.
  2. Select Portfolio Type (Boxed or Full Width).
  3. Add title, insert content and configure portfolio options. Please see Content Type Options about portfolio options.
  4. Select categories.
  5. Upload or select featured image.
  6. Add Portfolio Images.
  7. Publish.

Portfolio Layout

You can set portfolio layout from Portfolio Options > Portfolio Type. As well as other options.

 

FAQ

How to create a faq:

  1. Go to FAQs > Add New.
  2. Add title, insert content and select category.
  3. Publish.

 

Content Type Options

While editing the post, page, portfolio and product, you can configure content type options. General Options will work in All Post Types (Portfolio Post, Products, Blog Post, Pages, etc...).

  • Breadcrumbs - You can disable breadcrumbs.
  • Page Title (only page) - You can hide page title.
  • Layout - You can select page layout as: "Full Width", "Left Sidebar", "Right Sidebar", "Both Sidebar".

  • Sidebar - You can select & display any sidebar and select its position "Left" or "Right" or "Both". If you didn't select sidebar, then theme will use the layout that you have selected in Theme Options panel.
  • Banner Type - You can select banner type.
    • - No Banner
    • - Video
    • - Image
    • - Revolution Slider
  • Banner Image - You should Upload Banner Image if banner type is "Image".


  • Revolution Slider - You should select revolution slider if banner type is "Revolution Slider".


  • Banner Video - You should add YouTube, Vimeo, Dailymotion & other Video URL if banner type is "Video".

  • Portfolio Type (only portfolio) - You can use portfolio type as "Image (Featured Image)", "Video", "Gallery (Slider Images)", "None". Default is "Image".
  • Portfolio Columns (only portfolio page) - You can select portfolio columns in portfolio page. Default will use settings from Theme Options.
  • Portfolio Link (only portfolio) - You can input external portfolio link.

  • FAQ Category (only faq page) - You can select faq category to show in faq page.
  • FAQ Filters (only faq page) - You can show category filters in faq page.

  • Video URL (only post, portfolio) - You should input embed code if post type, portfolio type is "Video".
  • Link Field - External URL (only post, portfolio) - You should input external url if post format is "Link".

 

Taxonomy Options

You can configure taxonomy options while editing taxonomy such as "Posts Category", "Products Category", "Portfolios Category", "FAQs Category" etc.


Page Tempates

  • Default Template - standard page template
  • Blog - blog page template
  • Coming Soon - coming soon page template
  • Contact - contact page template
  • FAQs - faqs page template
  • Portfolio - portfolio page template
  • Sitemap page - sitemap page template

You can change various settings in "General Options".


Important (Optional): You can select the following options for contact page.


Important (Optional): You can select the following options for portfolio page.

Important (Optional): You can select the following options for blog page.

 

Setup Home & Blog page

  1. Go to Settings > Reading
  2. Select "A static page"
  3. For Front page select the Home page.
  4. For Posts page select the Blog page.

 

Blog Layouts

You can set blog layout in Page Body Options > Page Layout and Blog Masonry Columns in Blog Page Options.

Blog Layouts

 

Contact Form Edit

You should install Contact Form 7. While editing the contact form under Contact > Contact Forms, you can use the following example code.

<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name" class="input-desc">Your Name <span class="required-field">*</span></label>
[text* text-755 id:name class:form-control placeholder "Your name (required)"]
</div>

<!-- End .from-group -->

<div class="form-group">
   <label for="surname" class="input-desc">Your Surname</label>
[text text-241 id:surname class:form-control placeholder "Your surname"]
</div>

<!-- End .from-group -->

<div class="form-group bigger">
<label for="email" class="input-desc">Your Email <span class="required-field">*</span></label>
 [email* email-172 id:email class:form-control placeholder "Your email address (required)"]
</div>

<!-- End .from-group -->

</div>
</div>
 <div class="form-group last">
 <label for="message" class="input-desc">Your Message <span class="required-field">*</span></label>
[textarea* textarea-549 x7 id:message class:form-control placeholder "Your message content (required)"]
 </div>
 
 <!-- End .from-group -->

 [submit class:btn class:btn-custom2 class:min-width "Send Message"]
			

Forms Styles

Mango has lots of form styles carrying all important elements. You can use these form elements while editing the contact form under Contact > Contact Forms. Import our demo content first, then you can use the example codes and modify them to use in your forms. You must be familiar with Contact Form 7 plugin. You can check all Form Elements in our theme preview or in pages section of your WordPress site.

FORMS INCLUDED in MANGO

If you have imported our demo content, then you will see these pre-made form styles that you can use:

Shortcodes Overview

You'll find a lot of Visual Composer custom elements (shortcodes) by browsing the theme preview site. You can add these elements to any page using Visual Composer backend editor.

 

Mango has:
+ 42 custom elements for Visual Composer
+ 35 custom elements of Ultimate VC Addons



 

Revolution Slider Shortcode

You can use revolution slider shortcode.

[rev_slider slider_slug]

 

Contact Form 7 Shortcode

You can use contact form 7 shortcode.

[contact-form-7 id="contactform_id" title="Title"]

How to edit contact form: Please see Pages > Contact Form Edit in top menu.

 


Widget Areas

This theme register standard widgets.

  • Blog Sidebar 1
  • Blog Sidebar 2
  • Page Sidebar 1
  • Page Sidebar 2
  • Single Post Sidebar
  • Shop Page Sidebar 1
  • Shop Page Sidebar 2
  • Shop Page Sidebar 3
  • Single Product Sidebar
  • Portfolio Page Sidebar
  • Footer Top Widget 1
  • Footer Top Widget 2
  • Footer Top Widget 3
  • Footer Top Widget 4
  • Footer Top Widget v2 1
  • Footer Top Widget v2 2
  • Footer Top Widget v2 3
  • Footer Top Widget v2 4
  • Footer Widget 1
  • Footer Widget 2
  • Footer Widget 3
  • Footer Widget 4
  • Footer Widget 5
  • Wishlist Sidebar
  • Checkout Sidebar

You can also create more sidebars (widget areas) using Sidebar Generator in our theme, you will find it under Appearance > Sidebars.

 

Mango Widgets

This theme has many widgets. You can find all these under Appearance > Widgets in WordPress.

  • See all Widgets below


 

Mango Filter Widgets

Mango theme uses YITH WooCommerce Ajax Navigation plugin for filtering options in shop pages (only required for WooCommerce), but this plugin does not get configured during DEMO Import, so you'll have to setup it - but don't worry its pretty easy. Just follow the steps below.

  1. Make sure you have some attributes under Products -> Attributes.
  2. Add YITH WooCommerce Ajax Navigation (3 times) in sidebar and configure all options as shown below (you can change as you need).

Marketplace Setup: Install WC Vendors Plugin

To setup marketplace website, you should install WC Vendors plugin. This is optional and required only if you need
multi-vendors feature or a marketplace site.

You can install and activate the plugin from WordPress Dashboard as shown below:

After activation you will find these theme options:

Please go to Theme options >> Wc Vendor.

You can configure plently of settings for your marketplace Store and Single product pages from this section. This section will only display once you install and activate WC Vendors plugin.



Vendor Overview

To get started you should import Demo 21 from Theme Options, it will look just like our Demo 21 site marketplace site as you can see here: Demo 21 preview

You can find following Vendor Menus on Header 22. You can read more details to setup this primary menu on the Menus -> Demo 21 Primary Menu section of this documentation. Header 22 has 2 menu positions: Primary Menu and Main Menu.

Before Vendor Login:



After Vendor Login: (only vendor will see this menu) you will find these Vendor Menu Items:



Vendor Store Profile

When vendors login they can update their store profile, add cover photo, store description, etc:



WC Vendors Setup Guide

How to setup WC Vendors

Please see the following documentation: WC Vendors Setup Guide

Support for WC Vendors

If you find any issue or have questions regarding WC Vendors settings, vendor payments, plugin features, etc. You can get Free technical support around the clock at their Forums, plently of questions are already resolved so make sure to search in forums to get immediate solutions OR Create a new Topic in forums. They have a great support team: http://www.wcvendors.com/help/