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
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:
Using your FTP program, upload the unzipped theme folder "Mango" into the /wp-content/themes/ folder on your server.
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"
Mango theme needs to install many plugins. Some are required and some are optional.
You should install and activate the plugins.
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.
After activating WooCommerce plugin, you should install WooCommerce pages.
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.
After changing the image sizes, you'll need to resize all images with "Regenerate Thumbnails" plugin.
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.
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.
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.
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.
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.
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:
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.
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).
– 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.
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.
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’.
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.
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.
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:
More details: Translating With Poedit.
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:
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.
How to create a post:
How to create a page:
How to create a product:
How to create a portfolio:
You can set portfolio layout from Portfolio Options > Portfolio Type. As well as other options.
How to create a faq:
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...).
You can configure taxonomy options while editing taxonomy such as "Posts Category", "Products Category", "Portfolios Category", "FAQs Category" etc.
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.
You can set blog layout in Page Body Options > Page Layout and Blog Masonry Columns in Blog Page Options.
Blog Layouts
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"]
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.
If you have imported our demo content, then you will see these pre-made form styles that you can use:
Mango provides powerful and most advanced menu. There are 4 areas of the theme where you can assign a menu. Mango has 21 Menu styles or Header styles.
This theme supports megamenu feature & multi-level menu as well.
How to Edit Main Navigation:
- You can select Popup Position to Left or Right.
- You can upload popup background image and set background position, etc.
- You can select an Icon for each menu item. Mango has all Font Awesome Icons
You can show a block in the menu item. You should create or edit a new block in Blocks > Add New on admin sidebar. You should add a block slug name in Block Slug option.
Select Header 14 Side Menu from the dropdown list & click Select button. - Add pages or links to Header 14 Side Menu.
You can edit it just as the main menu or any other normal WordPress menu.
By default Mango theme will automatically display a responsive menu on mobile devices, but if you want to create a separate mobile menu for your site, then you can create an individual menu in WP Dashboard and set it as the Mobile Menu that user will see on mobile devices.
You can edit it just as the main menu or any other normal WordPress menu.
You can see the primary menu options like Menu Type, Popup Position, etc. Select Menu Type to Narrow.
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.
You can use revolution slider shortcode.
[rev_slider slider_slug]
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.
This theme register standard widgets.
You can also create more sidebars (widget areas) using Sidebar Generator in our theme, you will find it under Appearance > Sidebars.
This theme has many widgets. You can find all these under Appearance > Widgets in WordPress.
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.
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:
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.
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:
When vendors login they can update their store profile, add cover photo, store description, etc:
Please see the following documentation: WC Vendors Setup Guide
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/