Moros - Responsive WooCommerce WordPress Theme

Created by Joommasters


Moros is creative multi-purpose WordPress theme with a unique cool design, modern, stylish for creating your best online store. All these amazing features are blended together in Moros – your powerful, stylish and attractive responsive WordPress Theme. Make your business with our theme. We are sure that it will satisfy all your needs!

Quick Access

Before Getting Started

If you are not familiar with WordPress, please get accustomed with it before proceeding to using our theme. Here are some links that will help you to become more confident with WordPress:

Requirements & Compatibility

Requirements

To run WordPress your host just needs a couple of things:

Compatibility

Our theme is compatible with these browsers:

Installation

Wordpress Core

You download and install WordPress version 4.5 or later

Theme Package

To download, you need to log into your ThemeForest account and go to your http://themeforest.net/downloads page. Locate the theme that you purchased in your Downloads list and click on the Download button

If you download All files & documentation, you will unzip it. Then, you find the installable file inside.

You can also download only the Installable Wordpress file.

WordPress Installation

Follow the steps below to install via WordPress:

  1. In your WordPress Admin Panel, go to Appearance > Themes
  2. Click on the Add New and Upload Theme buttons
  3. Click on the Choose File button and navigate to find the moros.zip file on your computer and click on the Install Now button
  4. Wait while the theme is uploaded and installed
  5. Activate the newly installed theme
  6. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
WordPress Installation
Please note that some hostings have a restriction on a size of a file that you are uploading. If you have any warning, you will contact your hosting provider. They should increase your maximum upload size.

FTP Installation

Follow the steps below to install via FTP:

  1. Log into your hosting space via an FTP software
  2. Unzip the moros.zip file and ONLY use the extracted moros folder
  3. Upload the extracted moros folder into wp-content > themes folder
  4. Go to Appearance > Themes and activate Moros theme
  5. Then you will get a notification about installing the required plugins. Follow the steps to install and activate the plugins
FTP Installation

Required Plugins

After activating the theme, you will get a notification about installing the required plugins. You go to Appearance > Install Plugins to install them.

Install Required Plugins

After click that link go to list plugin required. You should select all plugins and set action to install:

List Required Plugins

After Install and Active completed. Click on Return to the Dashboard

Install Completed Plugins
Please note that you do not purchase directly King Composer plugins. So you can not update them by yourself. It is also not recommended. When they have a new version, we will be careful to test and release the new theme's version.
We also notice that you should not update other plugins without updating the theme. Please see our changelog to make sure the current theme's version is compatible with the new plugin's version.

Updating The Theme

Manual Update

Follow the steps below to manually update the theme:

  1. First, you download the new theme package from themeforest. You have to log into your themeforest account and navigate to Downloads tab. You find the Bigshop theme in your purchased themes list.
  2. You can delete the current theme. Don't worry about this. Your data won't be lost.
  3. You upload the new theme package via Wordpress or FTP software.
Please ensure that you only upload the installable wordpress file. If not, you may get an error message: The package could not be installed. The theme is missing the style.css stylesheet.

Automatic Update

You update the theme through the Envato Toolkit plugin. Follow the steps below to set up this plugin:

  1. Download and install the Envato Toolkit plugin
  2. You log into your Themeforest account. Under Settings > API Keys, you generate an API key. Get it.
  3. In WordPress admin panel, you find the section called Envato Toolkit. You input your envato username and API key.

Please read this tutorial http://www.wpexplorer.com/envato-wordpress-toolkit-guide/ to get more information.

Import Samples Data

Moros support 2 type of import sample data : Sample Data Import and Manual Import

1. Sample Data Import

IMPORTANT: The included plugins need to be installed and activated before you install a demo. Follow the steps to install and activate the plugins

You click to Import Base Data and check to Includes all pages it will import all content, slideshows, widgets, theme options.

Oneclick to import data

- After Import base data, you can select Home Page on Home Setup box then click to Import Home Button to Import Settings and set for this home to Frontpage.
- After Import base data, you can select Page on Pages Import box then click to Import Page Button to Import selected Page.


2. Manual import

All post content

You can import content for projects, contact form,..

Login to your WordPress dashboard, navigate to Tools - Import. Click on WordPress link on the table then click Install Now button on popup window to install WordPress Importer.

Visual Composer Elements List

Click on Activate Plugin & Run Importerlink to begin

Click "Browse..." button and select XML files in "exported_files" folder. :

Click on Upload file and import button

Visual Composer Elements List

On the next interface, select existing user on dropdown, check on Download and import file attachments to download sample images.

Click on Submit button to import.

All the content blocks are for sample, after importing finished, you have to edit them. Go to Content Blocks menu to see all, click on each block to edit.

If the process Import Data fails , you can import the data again

Widgets

You can import all widgets for theme using by follow steps:

- goto widget import/export
- select "widget_data.json" file in exported_files folder (in package downloaded)
- Click import button

import-widgets.jpg

Theme Options

After activating our theme, you can go to Theme Options or Appearance >> Customize to configure the theme. Below will explain what you can do with Theme Options.

General Setting

- Change logo, Favicion, set site loader, select loading style, Smooth Browser Scroll and Back to Top.

General Setting

Header Setting

- We can select header layout, there are 5 layouts of header

- Show/Hide : Search, Cart and Toggle button

- Change header text and set Header sticky or not sticky ...

Header Setting

Topbar Setting

- You can set Show/Hide : topbar, set phone ,email

- Show/Hide : Login/Account, Language, Currency, Social

Footer Setting

Blog Setting

1. Blog List

- We can select : Blog Style (3 styles), Pagination Style (3 styles), Blog Layout (3 Layouts)

- Set Blog Title and Blog title background

Blog Setting

1. Blog Single

- Show/Hide : Featured Image, Related Posts, Navigation

- Select Layout : Left, Right Sidebar, No Sidebar

Blog Setting

Portfolio Setting

- We can set Portfolio title, set Page style (color , background,...)

- Set columns number, Items per Page, Pagination style.

Portfolio Setting

WooCommerce Setting

1. General Setting

- Show/Hide Page Title

- Enable/Disable Fullwidth

- Select Add To Cart Style (4 Styles)

Woo Setting

2. Product List Setting

- We can select Product box Style, Product Box Hover, Column number, Style, Pagination Style, Layouts ...

- Show/Hide : Filter, Quickview, Wishlist, Category Name, Attribute Variation.

Product List Setting

3. Single Product Setting

- We can select Product Page Layout

Note : In product detail in backend you can select Product style.

Product List Setting

Typography

- You can set font, font size, color for Body, Heading, Menu, ...

Typography Setting

Color Scheme

- We can set Primary Color, Background Color, Body Color, Heading Color, Header Background, Header Color, Header Top Background, Header Top Color, Footer Background, Footer Title Color, Footer Color.

Theme Styling Setting

Social Network

- You can set link for social network

Social Network

Maintenance

- You can set Maintenance mode, heading, message, Maintenance time and background for maintainance Page

Maintenance

Import/Export

- You can import/export theme option in this tab.

Import Export

Widgets & Sidebars

To manage widgets, you go to Appearance > Widgets. Just drag and drop widgets over to the sidebar.

Moros comes with many custom widgets and 5 sidebars. You can also easily add a new sidebar.

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in exported_files folder.

Login to your WordPress dashboard, navigate to Tools >> Widget Settings Import

Widget Area

Click on "Browse..." or Choose File button then select widget_data.json, click on Import Widgets to finish.

Widget Area

Pages

Moros comes with King Composer plugin and powerful. The following sections will explain how to create a new page and make it look like our demo. If you use our One Click Import Demo functionality, you can ignore this.

Create A New Page

Follow the steps below to create a new page:

  1. In admin panel, go to Pages and click on the Add New button
  2. Input the page title and page content
  3. On the Page Attributes section, choose the page template from dropdown list

Home Pages

Setting up a home page

Navigate to Appearance >> Customize >> Static Front Page Tab

Set "Front page displays" to "A static page" and select one Home page for "Front page" select box.

Reading Settings
In Moros we has 9 home page, We build it with king composer. Below is our demo home pages. To build a home page look like our demo, first you create new page then copy the page content into the Text editor and click to Update button.

Home Page 1(Default)

Page Content: you can copy it from pages_content/homepage1.txt file

Home Page 2

Page Content: you can copy it from pages_content/homepage2.txt file

Home Page 3

Page Content: you can copy it from pages_content/homepage3.txt file

Home Page 4

Page Content: you can copy it from pages_content/homepage4.txt file

Home Page 5

Page Content: you can copy it from pages_content/homepage5.txt file

Home Page 6

Page Content: you can copy it from pages_content/homepage6.txt file

Home Page 7

Page Content: you can copy it from pages_content/homepage7.txt file

Home Page 8

Page Content: you can copy it from pages_content/homepage8.txt file

Home Page 9

Page Content: you can copy it from pages_content/homepage9.txt file

Contact Us

It is easy to make your contact page look like our demo. First create new page then copy the page content and paste into the Text editor and click to Update button.

Page Content: you can copy it from pages_content/contactpage.txt file

Note: Contact Page use Contact Form 7 plugin, you need make sure that plugin installed and actived.

Translate Theme

Try installing the 'Loco Translate' plugin. ( Can be found in 'Plugin > Add New' section ) or You can download plugin at https://wordpress.org/plugins/loco-translate/

- After installed plugin go to 'Loco Translate' section. And Click to "Theme > New Language"

To translate click to Loco Translate >> Themes >> click to Theme Name >> click to Language Name

You can learn more about how to localize / translate the wordpress string from http://codex.wordpress.org/WordPress_in_Your_Language as well

Multiple Currencies

1. Navigate to Jms Currencies

You can add new Currency (New Currency Button) and Update Currency Rate (Update Rate Button) from Yahoo.

Configure Plugins

Contact Form 7 for WordPress

Use this plugin to make the newsletter sign up form on footer. Navigate to Contact.Click on Add New link

Copy following code to new form then Save

[select* menu-460 include_blank "Product" "Support" "Update"] <label>[text* your-name placeholder "Your Name"]</label> <label>[email* your-email placeholder "Your Email Address"]</label> [file file-805] <label>[textarea your-message placeholder "Your Message"]</label> [submit "Send"]

Products Compare

Navigate to YIT Plugins -> Compare.

Products Wishlist

Navigate to YIT Plugins -> Wishlist.

Ajax Product Filter

Navigate to YIT Plugins -> Ajax Product Filter.

Yith Popup

1. Navigate to Popup >> Create New Popup.

2.Navigate to Yith Plugins >> WC Popup.

Yith Product Countdown

2.Navigate to Yith Plugins >> Product Countdown.

After config Product Countdown, when go to Product Edit page you will see tab to choose expire time for countdown.

Image Swatch

You can add Image swatch flowing steps below :

1. Navigate to Image Swatch.

You can set Attributes avaiable for Swatch, Attribute show on Product Detail

2. Go to a Product edit page.

Then click to Tab Attribute, select attribute from select box then click to add.

3. Click to Variations Tab to add Variations for Attribute.

Then you can edit variation and upload image swatch image for variations.

4. Click to Variations Thumbnail to manage thumbs icon for Variations.

You can add/upload swatch icon for each variations.

King Composer

Visual Composer will help you manage your content at the WordPress sites and build any layout you can imagine in few minutes without coding. You can read King Composer Documentation to get more details.

Please note that you do not purchase directly King Composer plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme's version. If you see the notification below, you can dismiss it.

How to add new row

To add new row, you scroll to bottom of page, click the Toolbar on bottom

King Composer Add New Row

How to add new element

To add new element, First you need click to Edit icon on colum then click to + button

King Composer Add New Element

Then, you choose an element from King Composer elements list

King Composer Elements List
All our addons are in Jms Addons tab.

Revolution Slider

Revolution Slider is slideshow plugin, help you create sliders. You can create unlimited slider, then use Revolution Slider shortcode to show one slider on page. You can read Revolution Slider Documentation to get more details.

Please note that you do not purchase directly Revolution Slider plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme's version. If you see the notification below, you can dismiss it.

WooCommerce

Megashop theme is fully compatible with the latest version of WooCommerce plugin. We customized and added many features, shortcodes and widgets for this plugin. In the following sections, you will know how to install and set up WooCommerce plugin. You can also refer WooCommerce Documentation to get more information.

Install WooCommerce

There are 2 ways to install WooCommerce plugin

  1. After activating our theme, you go to Appearance > Install Plugins. You install WooCommerce plugin from the required plugins list.
  2. Install WooCommerce plugin from the Plugins page
Install WooCommerce
Install WooCommerce
You should install WooCommerce from the required plugins list. Because we tested that version and it is compatible with the current theme's version. To make sure our theme is compatible with the new version of WooCommerce, you should see our changelog or contact us

Adding WooCommerce Pages

There are 2 ways to add WooCommerce pages

  1. After activating WooCommerce plugin, you will get a notification as the screenshot below. Simply click the Install WooCommerce Pages button to create all WooCommerce pages
  2. Use the WooCommerce shortcodes. You can get them here
Adding WooCommerce Pages

Setting Up WooCommerce

To set up WooCommerce, you go to WooCommerce > Settings in admin panel.

Currency Options

  1. In WooCommerce Settings page, you select the General tab
  2. You find Currency Options section and configure your currency

List of currencies that you can choose

Currency Options
You can also add a custom currency symbol. Please refer this document

Product Image Sizes

  1. In WooCommerce Settings page, you select the Products tab. Then you select the Display sub tab
  2. You find Product Images section and configure your product image size
  3. Our demo is configured as the screenshot
  4. After save new size. You must run "regenerate your thumbnail" link to update on front-end.
Product Image Sizes

Page Settings

After you create WooCommerce pages. You will go to the Settings page to assign them.

  • To assign the Shop page, you select the Products tab and then select the Display sub tab
  • To assign the My Account page, you select the Accounts tab
  • To assign the Cart and Checkout pages, you select the Checkout tab
  • After change page settings, you must go to permarlink setting to save one again for update new urls.
Setting Pages
Please note that: if you install WooCommerce pages by clicking on the WooCommerce notification, WooCommerce will automatically assign for you

Registration Options

You also make sure that you allow your customers to register on your site. You select the Accounts tab and find the Registration Options section as the screenshot.

Registration Options

Adding Product

Follow the steps below to add a new product

  1. In admin panel, you go to Products and click the Add Product button
  2. Input the product title and product content
  3. Select Product Category, Product Tag
  4. Add Featured Image and Product Gallery
  5. In the Product Options section, you can override some options in Theme Options
  6. Next is the Product Data section. This is where the majority of the product data is input

Product Options

This section allows you to override some options in Theme Options. You can set layout for individual products. You can also override custom tab content

Product Options

Product Data

You should also read WooCommerce Documentation to get more details. We only have some notes that we think you need to know.

Product Data Product Data - Shipping Tab
  1. Adding a product on sale and a deal:
    • With the Simple Product, you select General tab. You add a Sale Price and click the Schedule button to set up date.
    • With the Variable Product, after setting up Product Attributes in the Attributes tab, you can go to the Variations tab and add New Variation. With each Variation Product, you also click the Schedule button next to the Sale Price field. Please note that product only displays the time of first Variation Product.
  2. Adding Additional Information: You go to the Shipping tab. You set value of Weight and Dimensions options. You can change the unit by going to WooCommerce > Settings > Products tab
  3. Enable/Disable Product Review: You go to the Advanced tab. You will see Enable reviews option. Just check/uncheck it.

Addons

Moros comes with several addons which can be used to display your content. To use our addons, you go to page editor and change to King Composer Live Editor. Click on the Add Element button to open King Composer elements list and change to Jms Addons tab.

King Composer Elements List

In this all field except Mailchimp for WP : We can setting title,Number of columns,Number of row, select option show: Grid or Carousel, Add Extra class name, Set Columns count desktop small, set Columns count tablet small , set Columns count mobile, Margin: set spacing between intems.

Updates History (Changelog)

Version 1.0 — March 07, 2018