XMarket - Responsive WordPress E-Commerce Theme


Compatible with: WooCommerce 2.1.x
You may contact us on: support.8theme.com

Current documentation was created to help you with quick installation and configuration of  XMarket theme. Please, read it carefully to avoid most of potential problems with incorrect configuration. 

To install this theme you must have a working version of WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below.

For detailed WordPress installation instructions visit http://codex.wordpress.org/Installing_WordPress

For detailed WooCommerce installation instructions or for more information visit http://www.woothemes.com/woocommerce/

Download the zipped package from ThemeForest and extract to your desktop. In the extracted package you will find XMarket_Theme.zip file which is the WordPress theme.

You can install the theme in two ways:

If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see below).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host. 

Once you have activated the theme you will need to change some of the pages and media settings for optimal performance.

The next step gives the opportunity to install automatically the Home Page with banners and product sliders, the page Contact Us with contact form shortcode, Blog and Typography page. But do this at once after installation WordPress and XMarket theme, as this function works with database and it can break your settings.

You can make this installation manually as well

Follow the steps below and you will be adding content in no time.


Home page

  1. Create a page called "Homepage".
  2. To add banners on the home page (as on demo under the main slider) you need to add the following HTML code:
    <div>[layerslider id="1"]</div>
    <div class="banner "><img src="[etheme_template_url]/images/assets/banner1.png" alt="" />
    [etheme_btn title="Shop Now" url="test_url" class="active"]</div>
    <div class="banner last"><img src="[etheme_template_url]/images/assets/banner2.png" alt="" />
    [etheme_btn title="Shop Now" url="test_url" class="active"]</div>
    <div class="clear"></div>
    
  3. To add products sliders on the home page:
    [etheme_featured] 
    [etheme_new title="Latest Products" ]
  4. Set the page template (under page attributes) to Frontpage.

Blog

Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings -> Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage, and "Posts Page" to the blog page you just created.

Typography Page

This page contains examples of using our theme shortcodes (see item XMarket Shortcodes).

Create a page, set the page template (under page attributes) to "One column, without sidebar" and add the following code:

[etheme_column size="one_third" last="0"]
<h4>Buttons</h4>
[etheme_btn title="Simple Button" url="#" big="0" active="0"]

[etheme_btn title="Active Button" url="#" big="0" active="1"]

[etheme_btn title="Large Button" url="#" big="1" active="0"]

[etheme_btn title="Large Active Button" url="#" big="1" active="1"]
[/etheme_column]
 
[etheme_column size="one_third" last="0"]
<h4>Dropcaps</h4>
[dropcap]C[/dropcap]ras aliquet. Integer faucibus, eros ac molestie placerat,
enim tellus varius lacus, nec dictum nunc tortor id urna
eros ac molestie placerat, enim tellus varius nec dictum nunc tortor id urna
eros ac molestie placerat, enim tellus varius.
[dropcap class="dark"]D[/dropcap]ras aliquet. Integer faucibus, eros ac molestie placerat,
enim tellus varius lacus, nec dictum nunc tortor id urna
eros ac molestie placerat, enim tellus varius nec dictum nunc tortor id urna
eros ac molestie placerat, enim tellus varius.
[/etheme_column]
 
[etheme_column size="one_third" last="1"]
<h4>List Styles</h4>
[etheme_list style="arrow"]<li>Arrow List - There are many variations</li>[/etheme_list]
[etheme_list style="arrow_2"]<li>Arrow 2 List - There are many variations</li>[/etheme_list]
[etheme_list style="circle"]<li>Circle List - There are many variations</li>[/etheme_list]
[etheme_list style="check"]<li>Check List - There are many variations</li>[/etheme_list]
[etheme_list style="square"]<li>Square List - There are many variations</li>[/etheme_list]
[etheme_list style="star"]<li>Star List - There are many variations</li>[/etheme_list]
[etheme_list style="plus"]<li>Plus List - There are many variations</li>[/etheme_list]
[etheme_list style="dash"]<li>Dash List - There are many variations</li>[/etheme_list][/etheme_column]
<div class="clear"></div>
 
[etheme_column size="two_third" last="0"]
<h4>Tabs</h4>
[tabs][tab title="First Tab"]1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, 
condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit., consectetur adipiscing elit. Aenean nisl orci, condim entum, consectetur adipiscing elit.
 Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor 
 sit amet, consectetur adipiscing elit. ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit.[/tab][tab title="Second Tab"]2. Lorem ipsum dolor sit amet, consectetur 
 adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit., consectetur adipiscing elit. Aenean nisl orci, condim entum, 
 consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing,
 leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ultrices consequat eu, vehicula ac mauris. Ut adipiscing,
 leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/tab][tab title="Third Tab"]3. Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit., consectetur adipiscing elit. Aenean nisl orci, condim entum, 
 consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing,
 leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ultrices consequat eu, vehicula ac mauris. Ut adipiscing,
 leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/tab][/tabs]
[/etheme_column]
 
[etheme_column size="one_third" last="1"]
<h4>Alert Boxes</h4>
[etheme_alert type="error" title="Error -"]Your message![/etheme_alert][etheme_alert type="success" 
title="Success -"]Your message!
[/etheme_alert][etheme_alert type="info" title="Info -"]Your message![/etheme_alert][etheme_alert type="notice" 
title="Notice -"]
Your message![/etheme_alert]
[/etheme_column]
<div class="clear"></div>
 
<h4>Headings</h4>
<hr />
<h1>This is a H1 Heading</h1>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor! 
Scelerisque eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus 
elementum hac porttitor! Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h1</span>></span>This is
 a H1 Heading<span class="tag"><</<span 
class="title">h1</span>></span></code></pre>
<h2>This is a H2 Heading</h2>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor!
 Scelerisque eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus 
 elementum hac porttitor! Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h2</span>></span>This is
 a H2 Heading<span class="tag"><</<span 
class="title">h2</span>></span></code></pre>
<h3>This is a H3 Heading</h3>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor!
 Scelerisque eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus elementum hac
 porttitor! Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h3</span>></span>This is 
a H3 Heading<span class="tag"><</<span 
class="title">h3</span>></span></code></pre>
<h4>This is a H4 Heading</h4>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor! Scelerisque 
eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus elementum hac porttitor! 
Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h4</span>></span>This is 
a H4 Heading<span class="tag"><</<span 
class="title">h4</span>></span></code></pre>
<h5>This is a H5 Heading</h5>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor! Scelerisque
 eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus elementum hac porttitor! 
 Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h5</span>></span>This is 
a H5 Heading<span class="tag"><</<span 
class="title">h5</span>></span></code></pre>
<h6>This is a H6 Heading</h6>
Tristique nascetur ultrices et porttitor, tincidunt augue quis eu ultricies montes, auctor et turpis! Cum lundium tortor! Scelerisque 
eros ultrices, adipiscing porttitor nec est nascetur placerat porta tincidunt augue, diam sociis, a lacus elementum hac porttitor!
 Tincidunt, tincidunt ut nec tortor parturient diam. Ultrices! Magnis penatibus diam porttitor arcu.
<pre><code class="xml"><span class="tag"><<span class="title">h6</span>></span>This is 
a H6 Heading<span class="tag"><</<span
 class="title">h6</span>></span></code></pre>
 
<h4>Block Quotes</h4>
<hr />
[etheme_blockquote align="left"]<p>Consectetuer adipiscing elit. Mauris fermentum dictum magna</p>[/etheme_blockquote]Aliquam erat 
volutpat. Duis turpis. Integer rutrum ante eu lacus consectetuer. Adipiscing elit. Maurisfetun Duis ultricies pharetra magna. Donec 
accumsan malesuada orci lorem ipsum dolor amet consecttuer unean auctor wisi eturna. Aliquam erat volutpat. Duis turpis. Integer rutrum 
ante eu lacus consectetuer. Adipis cing elit. Maurisfetun Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec amet eros.
Lorem ipsum dolor amet.
<hr />
[etheme_blockquote align="right"]<p>Consectetuer adipiscing elit. Mauris fermentum dictum magna</p>[/etheme_blockquote]Aliquam erat volutpat.
Duis turpis. Integer rutrum ante eu lacus consectetuer. Adipiscing elit. Maurisfetun Duis ultricies pharetra magna. Donec accumsan malesuada
 orci lorem ipsum dolor amet consecttuer unean auctor wisi eturna. Aliquam erat volutpat. Duis turpis. Integer rutrum ante eu lacus 
 consectetuer. Adipis cing elit. Maurisfetun Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec amet eros. Lorem ipsum dolor amet.
<hr />
[etheme_blockquote align="center"]<p>Consectetuer adipiscing elit. Mauris fermentum dictum magna. Aliquam erat volutpat. Duis turpis. 
Integer rutrum ante eu lacus consectetuer<p>[/etheme_blockquote]Aliquam erat volutpat. Duis turpis. Integer rutrum ante eu lacus consectetuer.
 Adipiscing elit. Maurisfetun Duis ultricies pharetra magna. Donec accumsan malesuada orci lorem ipsum dolor amet consecttuer unean auctor 
 wisi eturna. Aliquam erat volutpat. Duis turpis. Integer rutrum ante eu lacus consectetuer. Adipis cing elit. Maurisfetun Duis ultricies
 pharetra magna. Donec accumsan malesuada orci. Donec amet eros. Lorem ipsum dolor amet.</p>

Products and categories import

You may also import XML file, where some demo data from our site are, which can facilitate your work with theme. XML file (xmarket.woo_commerce.xml - WooCommerce) you can find in the archive.

For this you need:

Do not forget: 
- Folder wp-content/uploads should have permissions 777. 
Download and import file attachments should be checked. 

Before you begin the XMarket updating process, we recommend to do the backup of all your files!

You can update theme in two ways:

FTP:
1. Download the zipped package from ThemeForest and extract to your desktop.
2. In the extracted package you will find archive XMarket_theme.zip, which is the WordPress theme.
3. Extract zip file and upload the extracted folder to /wp-content/themes/ folder on your server with overwriting.

WordPress:
1. Install Envato Toolkit plugin.

2. Navigate to Envato Toolkit and fill in required Marketplace Username and Secret API Key fields, press Save Settings button.
3. Press update automatically and theme will be updated.

Important!

Do not forget to re-save your XMarket options after upgrading the theme. Navigate to admin panel -> Theme Options and hit Save changes.

XMarket supports custom WordPress menu. Navigate to WP Admin -> Appearance -> Menus page and create menu. Select the newly created menu from the theme locations dropdown box "Top Navigation" as it mentioned on screenshot and press Save button.

The theme supports Layer Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folder called "documentation_Layer_Slider" that contains the documentation from the authors of the slider. Please, refer to it for further information about slider settings. Slider can be added to any page.

Layer Slider

To set up your Layer Slider follow the next steps:

Pay attention for the slider to be on the home page, you need to insert there shortcode of the slider.

A lot of the WooCommerce settings are optional, for example Catalog Options, some Inventory Options, however there are a few presentation settings you should change to make sure everything works fine.

Go to WooCommerce > Settings > Products

Image Options

 

General

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!

Product page

Single Product Page

Color Scheme

Header

Contact form

In this section you can also find the settings of social links.

First of all allow the registration. Navigate to Settings -> General -> Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

There are several shortcodes which can be used in XMarket theme inside posts and pages. You can look at examples on Typography page of our demo here.

You may also use WooCommerce shortcodes. To make them work in our theme, you need to insert prefix "etheme_" before shortcode words. For example: [etheme_best_selling_products per_page="12"] will display best selling products and [etheme_product_category category=" "] - multiple products in a category by slug etc.

 

There are a total of 13 widget areas which you can use to add your own content and functionality. There are five widgets in the sidebars, one in top footer area, seven in the lower footer area.

Home Page sidebar:

- Text widget with following code:

            <a href="#"><img src="http://YOUR_PATH/wp-content/themes/xmarket/images/assets/home_1.png"></a>
            <span class="close-parent"> </span>
Product Page sidebar:

- 8theme - Subcategories List
- WooCommerce - Price Filter
- Text widget with following code:

<div class="side_banner">
<img src="http://YOUR_PATH/wp-content/themes/xmarket/images/assets/side_banner.png">
<a href="#" class="button active"><span>Shop Now</span></a>
</div> 

- Text widget "CUSTOM BANNER" with following code:

<p style="margin-bottom: 10px;border-bottom: 1px solid #efefef; padding-bottom:10px;">This is a HTML block; you can create it via admin panel. 
There are many blocks like this on site. They are created especially to set to everybody’s preferences. If you have any questions please make 
a request via our <a href="#" target="_blank">contact form</a></p>
<p>Thanks</p>
Before Prefooter Area:

- Text widget with following code

<ul class="links fl-l">
 <li><a href="#">Site Map</a></li>
 <li><a href="#">Search Terms</a></li>
 <li><a href="#">Advanced Search</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
<ul class="links fl-r">
 <li><a href="#">Site Map</a></li>
 <li><a href="#">Search Terms</a></li>
 <li><a href="#">Advanced Search</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
The First, Secont, Third, Fourth Footer Widget Area:

- Text widgets with following code:

<ul>
 <li><a href="#">New products</a></li>
 <li><a href="#">Top sellers</a></li>
 <li><a href="#">Specials</a></li>
 <li><a href="#">Manufacturers</a></li>
 <li><a href="#">Suppliers</a></li>
 <li><a href="#">Specials</a></li>
 <li><a href="#">Customer Service</a></li>
</ul>
Footer Twitter Area:

- 8theme - Twitter feed:

If you get an error on frontend, please, check permissions on your wp-content/themes/xmarket-wo/code/cache folder, it should be 777 with recursion.

Payments Area:

- Text widget with following code:

<a href="#"><img src="http://YOUR_PATH/wp-content/themes/xmarket/images/assets/payments.png"></a>
Copyrights:

- Text widget with following code:

<ul class="links">
 <li><a href="#">Site Map</a></li>
 <li><a href="#">Search Terms</a></li>
 <li><a href="#">Advanced Search</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

The translation file you can find in languages folder (/wp-content/themes/xmarket/languages). Edit the .pot file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po into languages folder. It will generate both a .po and .mo file for your translation.

Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

This theme utilises the jQuery framework and imports a number of custom and 3rd party scripts: