Blanco - Responsive WordPress E-Commerce Theme


Compatible with: WP e-Commerce 3.8.x, WooCommerce 2.0.x
You may contact us on: support.8theme.com

Current documentation was created to help you with quick installation and configuration of  Blanco 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 WP e-Commerce or WooCommerce plugin for the correct work of our theme. The links for the plugins are provided below.

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

For detailed WP E-commerce installation instructions or for more information visit http://wordpress.org/extend/plugins/wp-e-commerce/installation/

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 Blanco_WordPress_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 Blanco 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 class="banner one-half">
     <img src="[etheme_template_url]/images/assets/b1.jpg" alt="" />
      [etheme_btn title="Shop Now" url="test_url" class="active"]
    </div>
    <div class="banner one-half last">
     <img src="[etheme_template_url]/images/assets/b2.jpg" 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(WooCommerce):
    [etheme_featured] 
    [etheme_new title="Latest Products" ]

    To add products sliders on the home page (WP E-Commerce):

    [etheme_bestsellers] 
    [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 Blanco 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>
[etheme_dropcap]C[/etheme_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_dropcap class="dark"]D[/etheme_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>
[etheme_tabs][etheme_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.[/etheme_tab][etheme_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.[/etheme_tab][etheme_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.[/etheme_tab][/etheme_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 (blanco.wp_e_commerce.xml - WP E-commerce, blanco.woo_commerce.xml - WooCommerce) you can find in the archive.

For this you need:

  • Navigate to Tools -> Import and install WordPress import plugin.
  • Select the XML file and upload it.

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

 

Before you begin the Blanco 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 Blanco_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 Blanco options after upgrading the theme. Navigate to admin panel -> Theme Options and hit Save changes.

Blanco supports custom WordPress menu. Navigate to WP Admin -> Appearance -> Menus page and create menu. Check Theme locations "Top Navigation" as it mentioned on screenshot and press Save button.

 

The theme supports two sliders, Layer Slider and Revolution 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 folders called "documentation_Revolution_Slider" and "documentation_Layer_Slider" that contain the documentation from the authors of the sliders. Please, refer to them for further information about sliders settings. Both of the sliders can be added to any page.

Layer Slider

To set up your Layer Slider follow the next steps:

Revolution Slider

To setup Revolution 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 WP e-Commerce settings are optional, for example breadcrumbs and category images, however there are a few presentation settings you should change to make sure everything works fine.

Settings

Go to WooCommerce > Settings > Products

Product Image Sizes

 

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 some social links, gift image and phone image.

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.

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options -> Portfolio and set necessary options.

You may create New Projects at Portfolio -> Add New.

If you use WooCommerce plugin your customers can browse through your store and add items to list to compile an itemization of goods or services they desire.

Crete WishList page if it's not created yet using following shortcode  [yith_wcwl_wishlist]

Go to WooCommerce > Settings > Pages and select your Wishlist Page.

Go to WooCommerce > Settings > Wishlist and set other desired settings.

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

If you use WooCommerce plugin 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/blanco/images/assets/home_1.png"></a>
<a href="#"><img src="http://YOUR_PATH/wp-content/themes/blanco/images/assets/home_2.png"></a>
<a href="#"><img src="http://YOUR_PATH/wp-content/themes/blanco/images/assets/home_3.png"></a>			
<span class="close-parent"> </span>
Product Page sidebar:

- 8theme - Subcategories List
- Woocommerce Price Filter (WooCommerce) or Price Range widget (WP E-Commerce)
- Text widget with following code:

<div class="side_banner">
<img src="http://YOUR_PATH/wp-content/themes/blanco/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>
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/blanco/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/blanco/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/blanco/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.

Blanco fully supports Child Theme. 

A WordPress child theme is a theme that inherits the functionality of the parent theme. With child theme you can make modification or add additiona functionality to parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.

You may read how to create child theme here http://codex.wordpress.org/Child_Themes

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