Circolare Ecommerce Theme - Premium Wordpress theme - By Team Unifato - 20Script

# Circolare Ecommerce Theme

## Premium Wordpress theme - By Team Unifato

- Created: 06/24/2012
- Latest Update: 03/31/2014
- By: Chetan Chauhan
- themeforest.net/user/Unifato
- Email: unifato.themes@gmail.com

### Introduction

This theme has three different color schemes. It is much more than just a simple background change like most themes do, but instead it has the entire set of elements optimized for each of the three color skins. The three skins are Purple, Brown and Green. More skins will be added with future updates.

This theme makes use of Wordpress WooCommerce plugin.

### Installing Theme

Upon downloading the package, you will find a zip file named circolare.zip inside the theme package.

Log into your wordpress admin and under the Appearance tab click on Themes. Click on the Install Themes button on top and then click Upload. Upload the zip file circolare.zip in the upload field. After that is done, activate the theme as you would activate any other theme.

The theme comes with Widgets, Custom Menus, Slider Manager, Revolution Slider Plugin and Theme Options for easy and quick setup.

After installing the theme, you'll need to install WooCommerce plugin. And, when the plugin is installed and activated, the plugin, would ask you if it can install WooCommerce pages.

Let the WooCommerce Plugin install WooCommerce pages to save your time.

### Importing Dummy Content

If you want to, quickly, create some dummy posts and pages, you can import a dummy content XML file to your Wordpress site. Doing this would give you a hint on how this theme works. You can even edit these sample posts and pages and use them on your site. Follow these steps:

1. The XML Dummy conntent file, demo_content.xml can be found in the root folder of the package that you downloaded.
2. In your WP Admin, under Tools section, click on Import. You might, first, be required to install the Importer plugin if yours is a new Wordpress installation.
3. In the table that appears on the Import page, click on Wordpress.
4. In the Import Wordpress page, click on Choose file. In the dialog box that appears, select the XML content file. Then click on 'Upload File and Import'.
5. In the Import Wordpress Page, select the author that you want these new posts to be assigned to. Then, if you want dummy featured images to be imported too, select Import Attachments field.
6. Click Submit. You may have to wait a few minutes for the content to be downloaded on to your server.

To load some demo products please download any XML file from this page and repeat the steps above: http://www.woothemes.com/theme-demo-content/

#### Importing Widget Content

The steps listed below import only the blogposts and pages but not widgets. However, you can import widget content by using the WordPress plugin: Widget Settings Importer/Exporter

After installing the plugin, find the file widget_data.json in the PACKAGE folder. Move onto your WP admin, and under Tools menu, click on Widget Settings Import. Here upload the file widget_data.json, follow the steps and when its done importing the content, select all the widgets you want to import.

To install the woocommerce demo products content visit this link and download any of the packages: http://www.woothemes.com/theme-demo-content/

### Setting homepage and widgets

After installing the Wocommerce and importing the demo content go to Pages and look for page called Homepage. Open it and enter the following inside:

    [raw][divider type="separator-top" title="" linkto="" /][/raw]

    [raw]
    [client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo1.png" linkto="#" /][client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo2.png" linkto="#" /][client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo3.png" linkto="#" /][client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo4.png" linkto="#" /][client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo5.png" linkto="#" /][client image="http://unifato.net/circolare/wp-content/uploads/2013/05/logo6.png" linkto="#" /][/raw]

    [clear /]

    [raw][divider type="link" linkto="http://chetan.com" title="Click this link" /][/raw]

#### Widget settings

Use the following widget settings to set up properly your homepage and internal pages widgets:

#### Importing Widget Content

The steps listed below import only the blogposts and pages but not widgets. However, you can import widget content by using the WordPress plugin: Widget Data - Setting Import/Export Plugin

After installing the plugin, find the file widget_data.json in the PACKAGE folder. Move onto your WP admin, and under Tools menu, click on Widget Settings Import. Here upload the file widget_data.json, follow the steps and when its done importing the content, select all the widgets you want to import.

### WooCommerce Content

By now, you must have installed WooCommerce plugin and created WooCommerce pages like Cart, Checkout, Shop, My Account, etc.

If the site you are installing this theme on already has a few products, well and good. But if you're creating the site from scratch, that is there are no products, you can import dummy content to quickly create a few product items along with Attributes, Pricing, Featured Images, etc. You can read more about adding dummy WooCommerce content to your site here: http://www.foxrunsoftware.net/articles/wordpress/woocommerce-sample-data/

When you add the product items to your site, they are automatically fetched in the WooCommerce related pages, and you'll see them being displayed on the Shop page.

However, sometimes you can see that the WooCommerce pages appear in a distorted way, that is they show the product items fine, but don't display the site layout (or Products List layout) correctly. This happens because Wordpress automatically adds <p> or <br> tags to the content, thus breaking the layout. You can counter this by using [raw][/raw] shortcode. For any page, lets say Cart page, enclose the content with the [raw] shortcode, like shown below, and the content would appear correctly:

    [raw][woocommerce_cart][/raw]

[raw] shortcode can be used for any type of content on any page. All you need to do is enclose the content, where the layout is breaking, with the [raw] shortcode.

#### WooCommerce Image Sizes

The sizes of the product images that are shown on Shop, Single Product pages and Widgets can be selected from WooCommerce Settings. In your WP adin, go to WooCommerce > Settings > Catalog > Image Options. Here you can select the product images sizes for various parts of site. The selected sizes shown in the image below are what have been used in the demo site, and work the best with the theme. It is advised you use the same sizes in your site too.

You may not see any difference in the image sizes on the website instantly. For these changes to take effect, you'll need to use the plugin: Regenerate Thmbnails to regenerate the thumbnail sizes across the website.

### Theme Options

Now that you have installed the theme, lets look at the Theme Options. In your WP admin, under Appearance tab, click on Theme Options. You'll see 5 tabs, namely: General, Styling, Slider, Background and Integration. Let's look at them one by one.

## General

## Styling

## Slider

## Background

## Integration

### Page Templates and Widget Areas

The theme offers several page templates, so that every page can be styled accordingly. Each page template either has its own sidebar area or no sidebar at all. Whenever you create a new page, under the Page Attributes section, you can see a Template field. All the page templates are listed in this field. The template selected there will render that page.

Let's look at the different page templates avaliable:

### Default Template

This template is used to render the posts, pages, etc by default. It has one sidebar area. Depending upon what item is being shown (post or product), it renders Blog Sidebar or Shop Sidebar widget area. This template can be used for general pages like FAQ, Blog, Services, etc.

### Full_Width Template

This template doesn't have any sidebar, and thus uses the full width of the page to render the content. This template can be used for Contact Page, Services page, etc.

### Home_Page

This template is used to render the Home Page of the theme, which contains the Slider area and several widget areas like: Home Wide, Home Narrow 1 and Home Narrow 2.

## Other Sidebar Areas

The theme has other sidebar areas too, that are used in other sections of the theme. These include:

- footer_column_1 : This sidebar render the first column of the footer area in all of the pages of the site.
- footer_column_2
- footer_column_3

### Slider Manager

Now that we have setup the homepage properly, you'll see that, although the slider area is being shown on the homepage, there are no slide items being displayed. Let's create some slides to show on homepage.

There are two ways you can add slides to the Slider area. One way is by using the theme's inbuilt Slider, FlexSlider. The other ways is by using Revolution Slider plugin that is provided with the theme.

#### FlexSlider Manager

This Slider will fetch slides only when the 'Pick Slides From' field in the Theme Options has been checked as 'FlexSlider Manager'.

Under Appearance tab, click on FlexSlider Manager. You'll see the Slider Manager page offers an easy to use user interface to quickly create a few slides. You can easily upload an image to be used in the slide, add new slides with a click of the button, drag and drop the position of the slide with respect to others and remove slides easily. However, there are some prerequisites for slider to show up properly:

- The Slide images should be exactly 350px wide and 350px high.
- A Slide Title must be provided.

#### Revolution Slider

The Revolution Slider WordPress plugin is provided with the theme. You can find it in PACKAGE/plugins/revslider/revslider.zip. You will also find a documentation folder to help you get started with the plugin.

After installing the 'Revolution Slider' plugin, all you'll need to do is create a new slider and name it as homepage, just like it is shown in the image below. This step is necessary so as to show your slider in the right position on your site's home page. Now you can add as many slides as you want in the slider.

After installing the 'Revolution Slider' plugin, all you'll need to do is create a new slider and name it as homepage

### Menus

The theme comes with an added functionality of WP menus, an effective way to create and manage custom menus. The Circolare theme uses WP Menus to show the top menu bar.

To create the menu simply go to Appearance >> Menus and create a new menu.

After creating a menu, from the "Theme Locations" block dropdown choose the menu you've created and click Save. Then using "Pages", "Custom Links", "Categories" blocks, etc add items to your menu and Save it. You can drag and drop the menu items to easily manage the items and create dropdowns.

### Featured Images

Circolare theme uses Featured Image functionality of Wordpress to show post thumbnails in different sections of the site like: Blog, Widgets, etc. All the items like Pages, Posts and Product items have the Featured Image functionality enabled, thus a user can add images for any of these items.

### Widgets

Circolare theme comes with 5 custom widgets. These are:

- circolare - Photo Gallery : This widget displays a small gallery of Product Items or Posts. In case of Posts, you'll need to make sure that these have Featured Images attached. In the Categories field, you can enter the slugs of the category (categories) if you want to fetch the items only from those categories.
- circolare - Blogposts : Show your recent or popular blog posts anywhere on the site with style.
- circolare - Social Icons
- circolare - Products Widget : Using this widget you can show your recent Product items as a carousel. You can use this widget for the Homepage, in Home Wide, Home Narrow One or Home Narrow 2 sidebar areas.
- circolare - Subscribe Widget : You can choose to let your site visitors subscribe to your Feedburner feeds

### Shortcodes

The Circolare theme comes with over 30 shortcodes installed. But that's not all, the Shortcode Generator that comes installed for the post editor makes it extremely easy for you to include any shortcode and its attributes' data without having to remember the shortcodes' names.

A click on the Shortcode Generator button opens up a frame. Here you can select any shortcode. If the shortcode has any attributes it will ask you to enter its data, and if there's no attribute you can just click on Insert.

Although almost of the shortcodes' names are self explanatory, I'll go through some of them here to give you a more in depth understanding:

### raw

In the post editor Wordpress, sometimes, automatically adds random <p> and <br> tags, which can break the layout of the content area. Enclosing any content or even other shortcodes inside this [raw] shortcode fixes this issue.

    [raw]
      This is some textual content.
      [contactform sendto="admin@site.com" /]
    [/raw]

### clear

Whenever you're working with columns or images, you may find some content stacking up on the side of other content, unintentionaly. This can be solved by using [clear /] shortcode.

### tabgroup

You can include tabs in your content by using the tabgroup shortcode like this:

    [tabgroup tab1="About Us" tab2="Reach Us"]
      [tab id="tab1"]This is some content related to About Us.[/tab]
      [tab id="tab2"]This content is related to Reach Us section[/tab]
    [/tabgroup]

### faq

Similar to the tabgroup shortcode you can add FAQ items like this:

    [faq]
      [faqitem question="Your First Question?"]Here you can enter the answer to your first question.[/faqitem]
      [faqitem question="Second Question?"]Here you can enter the answer to your second question.[/faqitem]
    [/faq]

### accordion

You can include a Accordion/Toggle interface by using the [accordion] or [alt-accordion] tags like this:

    [accordion_group]
      [accordion title="First"]Your content..[/accordion]
      [accordion title="Second"]Your content..[/accordion]
    [/accordion]

### divider

You can quickly add several kinds of horizontal page wide borders using this shortcode.

### column shortcodes

The theme offers [col2], [col3], [col2_last], etc shortcodes. You can use columns like this:

    [col2]Your content ...[/col2]
    [col2_last]Your content ...[/col2_last]

or

    [col3]Your content ...[/col3]
    [col3]Your content ...[/col3]
    [col3_last]Your content ...[/col3_last]

### Theme Translation

This theme is ready for localization via .po/.mo files. If you are not familiar with translating Wordpress themes, I recommend reading this article: http://codex.wordpress.org/Translating_WordPress. The language file(s) of the theme are present in the /languages/ folder. You can use default.po file as the base for your translations.

To start with translating the theme you'll first need to install the plugin: Codestyling Localization. You can learn how to use this plugin to traslate the theme by watching this video: