Linea - Premium Responsive Woocommerce Theme

Linea is a modern, fully responsive Wordpress Woocommerce Theme created for e-commerce and online shop websites and gives you the ability to lead your business a step further. Linea is user-friendly and easily customizable to fit your needs. Built with latest coding standards and clean design, the theme is envisioned to provide you a long-term and powerful solution for your next online project.

Theme Features

  •   Modern and clean Responsive design
  •   Easy to install and customize
  •   Easy custom home page
  •   Easy Widget Positioning
  •   WooCommerce Integrated
  •   SEO Optimized
  •   Best Seller and Featured products on home page
  •   Related product slider on product details page
  •   Header dropdown shopping cart
  •   Back to top button
  •   Scroller Thumbnail images in product page
  •   Powerful Admin Panel
  •   Valid XHTML and CSS markup
  •   Cross Browser Support (IE 9+, Safari, Mozilla Firefox, Chrome, Opera 9+)
  •   User Guide Documentation html file

Installing The Theme

The following Documentation will help you better understand theme settings and configuration options.

1Requirements for Theme

To install this theme you must have a working version of WordPress. Please refer to WordPress documentation for further instructions. You can download the latest version of WordPress here https://wordpress.org/download.

  • 1 ) WordPress 4.5 or higher.
  • 2 ) PHP 5.5.15 or higher.
  • 3 ) MySQL 5.0 or higher.

Compatible Browsers: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

2Install WordPress

If you have not set up your WordPress installation yet, you can grab a copy of latest WordPress version here. Next, go through the installation instructions inside readme.html file and set up your WordPress installation.

3Linea Theme Installation

    Now that you have purchased this wonderful theme, it’s time to install it in WordPress. To install the theme and there are 2 methods for doing so:

  • 1 ) Installation via FTP Client
  • 2 ) Installation via Wordpress Admin Panel
  • 1 Installation via FTP Client
    • 1 ) Extract your download package main ZIP file.
    • 2 ) Connect to your FTP server and navigate to the folder where your WordPress is installed.
    • 3 ) Go to wp-content/themes/ and upload the linea folder to wp-content/themes/ directory using an FTP software like Filezilla, CuteFTP or others.

  • 2 Installation via Wordpress Admin Panel
    • 1 ) Extract your download package main ZIP file.
    • 2 ) Next, look for the folder named linea and zip this folder.
    • 3 ) Open wordpress admin panel (navigate through web browser to the folder where you have installed the WordPress e.g http://www.yoursite.com/wp-admin/)
    • 4 ) Go to Appearance > Themes on admin sidebar.
    • 5 ) Click Add New link and click Upload Theme link. Please upload linea.zip file.

  • Note: Do NOT upload the downloaded zip directly which you have downloaded.

4Activate Theme

  • 1 ) Log into your WordPress admin using the following URL: http://www.yoursite.com/your-wordpress-dir/wp-admin
  • 2 ) Next, go to Appearance > Themes. Here, you shall see a thumbnail of Linea theme.
  • 3 ) Click on ‘Activate’ link to activate the theme.
  • Activate the theme

  • 4 ) After activation, preview this theme by clicking on your blog name (top left corner) > Visit Site.

Note: Since, we haven't configured the theme yet so it may look empty.


On first load, you may see some unwanted widgets inside top-right section of header area. You can remove those widgets by navigating to WordPress Appearance > Widgets. Delete or pull out any unwanted widgets from this section. You can of-course place appropriate widgets in this section later on.


Disable Admin Bar on top

  • 1 ) If you wish to disable admin bar on front end. You can do so by navigating to WordPress Users > Your Profile section.
  • Disable admin bar

  • 2 ) Uncheck the toolbar option.
  • 3 ) Next, scroll down and click on "Update Profile" button to save the changes. The admin bar will hide.

5Plugin Installation

After installing and activating the theme, you should install and activate the required and recommended plugins.


Required plugins:

  • 1 )Redux Framework - Redux is a simple, truly extensible options framework for WordPress themes and plugins.
  • 2 )WooCommerce - WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.
  • 3 )YITH WooCommerce Compare - Allows you to compare more products with WooCommerce plugin, through product attributes.
  • 4 )YITH WooCommerce Quick View - YITH WooCommerce Quick View allows your users to have a quick look about products.
  • 5 )YITH WooCommerce Wishlist plugins - YITH WooCommerce Wishlist allows you to add Wishlist functionality to your e-commerce.

Recommended plugins:

  • 1 )MailChimp for WordPress - Adds various highly effective sign-up methods to your site.
  • 2 )Regenerate Thumbnails - Allows you to regenerate all thumbnails after changing the thumbnail sizes.
  • 3 )WordPress Importer - Import posts, pages, comments, custom fields, categories, tags and more from a WordPress export file.

6Dummy Data

You can find the dummy / sample data in Dummy Data folder under theme zip you have downloaded. Please find the following files in Dummy Data folder

  • 1 ) .xml - Woocommerce Sample Data

    First Upload .xml file via Admin > Tools > Import > Select checkbox for Download and import file attachments > Save


  • 2 ) .json - Default Redux settings

    Once theme is installed new menu is generated under left column "Linea Options". Then Go to Linea Options > Import / Export Paste the json code from .json text file & import.

Create Home Page

By default, WordPress shows blog posts on front page unless we change these settings to show a static page. In our case, we will create a Home page and set it as static front page. You can follow these steps for creating a Home page:


If you imported the dummy data then home page and blog page automatically created.


If you do not import then follow the given steps:

  • 1 )Navigate to Pages > Add New. Next, enter a title for your home page. Say, "Home".
  • 2 )This will create a basic Home Page. But this page will still not appear on front page. For that, it will be required to set Front page Displays.
  • 3 )Please Select Home Template for Home page.
  • 4 )Similarly, Navigate to Pages > Add New create one more page and call it "Blog".

Note: We have just created the Home page. But this will not appear as front page yet. For that, we will need to adjust Front Page Display Settings.


Front Page Display Settings

  • 1 ) Navigate to Settings > Reading > Front page displays > A static page.
  • 2 ) Next, set Front page as "Home", and choose Posts page as "Blog".
  • 3 ) Finally, Save the changes.
  • Set front page

  • 4 ) Once you are done, check the site. It should show your newly created Home page with basic content.

How to select home template

  • 1 )Home template styling for a page can be selected under Page options.
  • 2 )Go to Pages > All pages > Select Home page edit the page.
  • 3 )In to the Page Attributes block Select Template > Home template.
  • home template

Linea Theme Options

For additional theme options we use redux framework. Linea theme support 4 different color variation .


Linea comes with a theme options panel for basic settings and configuration of the theme. In order to configure theme options, navigate to Linea Options. You shall see different sections in form of tabs. Let’s cover a brief introduction about each of these sections:

  • 1 ) Home Settings: This section contains home settings to configure/update your store's home page.

  • 2 ) General Settings: This section contains general settings like Upload Company/clients Logo.

  • 3 ) Styling Options: This section covers settings for styling your Linea store. You can define your header footer background etc.

  • 4 ) Header: This section can be used to configure header related settings i.e. logo, search boxes etc.

  • 5 ) Menu: This section covers settings for menu.

  • 6 ) Footer: This section can be used to configure footer settings i.e. footer color schemes.

  • 7 ) Blog Pages: This section covers settings Blog Page. You can set different Blog Page Layouts here.

  • 8 ) Social Media: This section covers Social Media settings. You can set links of different social media accounts here.

  • 9 ) Import/Export: You can import and export redux data from here.

Once you have configured basic settings, click on "Save Changes" button at the bottom of page. You can also reset all settings to default by clicking on "Reset all settings" button.

1 Home Settings

a . Select Color Variation

Linea theme support 4 different color variation. You can select different color variation form here.

b . Enable Home Page Gallery

You can enable home page gallery and add/upload/use images to create slides with image and text which will be shown right below menu section.

    home_page_gallery

    Slide 1 Text :
    <div class="info"> <div class='tp-caption ExtraLargeTitle sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1100' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:2;max-width:auto;max-height:auto;white-space:nowrap;'><span>Mens style</span> </div> <div class='tp-caption LargeTitle sfl tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1300' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:3;max-width:auto;max-height:auto;white-space:nowrap;'><span>Season Sale</span> </div> <div class='tp-caption Title sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1450' data-easing='Power2.easeInOut' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'>In augue urna, nunc, tincidunt, augue, augue facilisis facilisis.</div> <div class='tp-caption sfb tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'><a href='#' class="buy-btn">Shop Now</a> </div> </div>
    Slide 2 Text :
    <div class="info slide2"> <div class='tp-caption ExtraLargeTitle sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1100' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:2;max-width:auto;max-height:auto;white-space:nowrap;padding-right:0px;'><span>Super Sale</span> </div> <div class='tp-caption LargeTitle sfl tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1300' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:3;max-width:auto;max-height:auto;white-space:nowrap;'>Fashion life</div> <div class='tp-caption Title sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Power2.easeInOut' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class='tp-caption sfb tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'><a href='#' class="buy-btn">Buy Now</a> </div> </div>
c . Enter welcome message

You can add default welcome message here.

home_header_banner_text

d . Home Page side Banner

Set this as ON and add Side Banner image. It will display in home page here.

homepage_side_banner
e . Home Page Promotion Banners

Set this as ON and add Promotion Banner images. It will display in home page here.

homepage_promotion_banner
f . Show New Products

Set this as ON if you want to display new products on your store's home page.

home_new_products


g . Show Best Seller Products

Set this as ON then select product categories whose best selling product you want to display in home page.

home_best_seller_products


h . Show Featured Products

Set this as ON if you want to display featured products products on your store's home page. To create featured products, go to wooCommerce products and click on the star icon in front of the product name.

enable_featured_product_slider


i . Home Page Custom Slider Uploads

Set this as ON and add slides images .It will display in home page here.

homepage_sub_banners

j . Show Hot Deal Product

    Set this as ON . Then this product will display in hotdeal section of home page.

    home-hot_deal

    If you want to display product in hot deal section of home page then you have to add sale price and sale schedule in that product.
      sale_schedule
  • In that product you have checked hot deal on page banner option. Then this product will display in home page hot deal banner section.
  • home_daily_deal
k . Enable Testimonial

Set this as ON and add as many Testimonial as you like and link them. Click on + icon and provide necessary details.

homepage_sub_banners
l . Enable Home Page bottom Banners

Set this as ON and add Side Banner image. It will display in home page here.

homepage_bottom_banner
m . Show Related Products

Set this as ON if you want to display related products on your store's product detail page.

related_productsr


n . Show Upsell Products

Set this as ON if you want to display upsell products on your store's product detail page.

upsell_products


o . Show cross sells Products

Set this as ON if you want to display cross sells products on your store's cart page.

cross_sells_products


p . Show Home Blog

Set this as ON to display latest posts on your store's home page.

home_latest_post

Linea Options

Here you will find the Home Settings.

Home Settings

2General Settings

a . Enable Product Page Social Share

Set this as ON Product Page Social Share .It will display in Product page here.

homepage_logo

b . Show Header Service

Set this as ON Header service.It will display in the header section here.

footer_service

Back To Top
This setting controls the back to top functionality. We recommend to set it as ON.

Browse the other Linea options and configure the way you like to make your store the way you like.

Linea Options

Here you will find the General Settings.

General Settings

3Footer

a . Enable Mailchimp Form

Set this as ON footer mailchimp form .It will display in the footer section here.

footer_mailchimp_form

b . Enable Footer Middle

Set this as ON footer middle text .It will display in the footer section here.

footer_text

Footer middle text is given below

<div class="payment-accept"> <img src="http://wordpress.magikthemes.com/linea/wp-content/uploads/sites/119/2016/03/payment-1.png" alt=""> <img src="http://wordpress.magikthemes.com/linea/wp-content/uploads/sites/119/2016/03/payment-2.png" alt=""> <img src="http://wordpress.magikthemes.com/linea/wp-content/uploads/sites/119/2016/03/payment-3.png" alt=""> <img src="http://wordpress.magikthemes.com/linea/wp-content/uploads/sites/119/2016/03/payment-4.png" alt=""> </div>
c . Bottom Footer Text

Bottom footer text .It will display in the footer section here.

footer_text

Bottom footer text is given below

<div class="col-sm-5 col-xs-12 coppyright">© 2016 Magikcommerce. All Rights Reserved.</div> <div class="col-sm-7 col-xs-12 company-links"> <ul class="links"> <li><a title="Magento Themes" href="#">Magento Themes</a></li> <li><a title="Premium Themes" href="#">Premium Themes</a></li> <li><a title="Responsive Themes" href="#">Responsive Themes</a></li> <li class="last"><a title="Magento Extensions" href="#">Magento Extensions</a></li> </ul> </div>

Using Widget Areas

Widget area is a section where you can use widgets for the theme. Linea supports 9 widget areas. 1 for sidebars of (Product Categories, Blog and Pages each). 5 for footer sections.


In order to access your widget areas, go to Appearance > Widgets. You will see 8 widget areas, as shown below:

Default Widget Areas

These are the default widget areas. The theme will use these default widget areas when no exclusive widget area is defined for a page or post.

Let’s have a quick look on each widget area:


Widget Area Description
Shop Sidebar Widgets placed under primary sidebar will appear only on Woocommerce pages i.e. categories, subcategories etc.
Content Sidebar Widgets placed under content sidebar will appear only on wordpress pages i.e. About Us, Contact us etc.
Blog Sidebar Widgets placed under content blog will appear only on wordpress post pages i.e. Blog page, blog category, blog tags, archive & blog single pages.
Footer Widget Area 1 Widgets placed under content blog will appear only under footer widget section 1. Where you see our logo, some text and payment gateway images on our demo store.
Footer Widget Area 2 Widgets placed under content blog will appear only under footer widget section 2.
Footer Widget Area 3 Widgets placed under content blog will appear only under footer widget section 3.
Footer Widget Area 4 Widgets placed under content blog will appear only under footer widget section 4.

1 Widget Dummy Content

a . Footer Widget Area 1

<ul class="links"> <li><a href="#" title="How to buy">Blog</a></li> <li><a href="#" title="FAQs">FAQs</a></li> <li><a href="#" title="Payment">Payment</a></li> <li><a href="#" title="Shipment">Shipment</a></li> <li><a href="#" title="Where is my order?">Where is my order?</a></li> <li><a href="#" title="Return policy">Return policy</a></li> </ul>

b . Footer Widget Area 2

<ul class="links"> <li><a href="#" title="Your Account">Your Account</a></li> <li><a href="#" title="Information">Information</a></li> <li><a href="#" title="Addresses">Addresses</a></li> <li><a href="#" title="Addresses">Discount</a></li> <li><a href="#" title="Orders History">Orders History</a></li> <li><a href="#" title="Order Tracking">Order Tracking</a></li> </ul>

c . Footer Widget Area 3

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

d . Footer Widget Area 4

<div class="contacts-info"> <address> <i class="add-icon">&nbsp;</i>123 Main Street, Anytown, <br> &nbsp;CA 12345 USA </address> <div class="phone-footer"><i class="phone-icon">&nbsp;</i> +1 800 123 1234</div> <div class="email-footer"><i class="email-icon">&nbsp;</i> <a href="mailto:support@magikcommerce.com">support@magikcommerce.com</a> </div> </div>

It will display in the footer section here.

footer

Create Navigation Menus

How to open screen options panel

    The screen options are a pull down menu which is located in the top right corner of your WordPress admin panel.

    screen_options

    You can see a list of the different modules and checkboxes in the ‘Screen Options’ drop-down menu. You can show or hide something on the current screen of the WordPress dashboard by simply checking or unchecking the boxes.

    screen_options_panel

    In the image above, you’ll see a screen options panel.The Screen Options let you choose which sections and columns on the current screen of the WordPress admin panel are displayed or not.


How to Create Navigation Menus

  • Linea support WordPress menus in two locations. Top Menu in top header section, and Main Menu as the main menu.
  • 1 ) Navigate to Appearance > Menus.
  • 2 ) On the right side, you will see a form for adding new menu. Enter a menu name; say "toplinks" and click on "Create Menu" button.
  • Create a Menu

  • Next, assign this menu to any of the available theme locations. i.e. Top Menu or Main Menu.
  • Menu theme locations
  • After assigning a theme location, save the menu. Next, add pages or custom links to the menu as required.

Note: You can drag menu items up-down to manage order of appearance. You can drag them left-right to set as sub-page. You can also edit "Navigation Label" and "Title Attribute" if you wish to do so.

Create Page

Create a Page with required layout

  • 1 ) Go to Pages > Add New. Next, enter a Page Title and Page Content.
  • Add a post

  • 2 ) Scroll down to the bottom of your page. You will see a new panel added by a theme to set the required layout for your page.
  • You can repeat same procedure for creating more pages.

Create Category and Posts

Theme's blog content will depend upon categories, posts and featured images associated with them. Most of the site content will contain images. So let’s start by creating a category and publish some posts in it. But before that, a quick note about image preparation.


Image Preparation

Since the theme is responsive, images will be shown in fluid width. For better results, you can prepare images of around 800px to 100px width and auto height. You can save these images in web optimized .jpg or .png format, and keep on your hard drive. These can be uploaded to the posts when required.


Create a Category

Navigate to Posts > Categories. Next, create a new category (say, Featured) and click on "Add Category".

Create a category

A newly created category will appear.

Find a category ID

Finding a Category ID: Hover your mouse pointer on the category name and watch it's link in the status bar of your browser. You shall see a link as taxonomy=category&tag_ID=xx. This xx is the category ID. Note this down as we will need the category IDs to populate the widgets, blog and portfolio pages.


You can follow same procedure for creating more categories like News, Health, Beauty, Blog etc. Let's create some posts for our "Featured" category.


Create a Post with Featured Image
  • 1 ) Go to Posts > Add New. Next, enter a Post Title and Post Content.

    Add a post

  • 2 ) Scroll down to the right-bottom side of your page. You will see a panel for "Featured Image". Click on the "Set featured image" link.

    Set Featured Image

    A media uploader will appear. You can either Upload new image files by dragging them in the upload box, or set already uploaded images from the 'Media Library' section. After choosing an image, click on the 'Set featured image' button.


    Select media files

    The newly set featured image will appear inside the "Featured Image" panel.

  • 3 ) Finally, assign the post to an appropriate category and click on "Publish" button.


    Publish the post

    You can repeat same procedure for creating more posts in different categories. i.e. Create a post, set featured image, and publish it in appropriate category. Once you have enough posts and categories, they can be displayed in various sections of the site.


Create Blog/Archive page

A blog or archive page can be created using built in page templates. Below are some basic steps for creating a blog or archive page:

Navigate to Pages > Add New. Next, enter a title for blog page. Say - “Blog”.

Create Blog or Archive Page

After publishing the page, just click on Blog to see your posts showing up in browser.

Frequently Asked Questions

Below are some Frequently Asked Questions that may help you in finding a solution to your specific issue.


1.I have just uploaded the download zip file to WordPress, and it is showing stylesheet missing error. Why?

Your download zip file is not the theme itself. It is a collection of theme and documentation. It will be required to unzip this folder first. Next look for the folder named "linea" folder. Upload it to the wp-content/themes/ directory.


2. Why are images not appearing properly on site?

WordPress thumbnail sizes DO NOT get generated for images that were uploaded before the theme was installed. i.e. only newly uploaded images will get generated into the theme specified sizes. (This is a limitation with WordPress). To rectify this issue, you can follow any one of these solutions:

  • a ) Delete old attachments and re-upload the images into the media library. Next, set these newly uploaded images as featured image to each post. (This could be a long process and time consuming).

  • b ) Use the Regenerate Thumbnails plugin. This plugin regenerates all your post thumbnails without having to upload images again. This is a handy plugin and widely used for themes with WP Thumbnails feature. The installation instructions can be found inside the plugin. After installing this plugin, navigate to Tools > Regen Thumbnails. Next, follow the instructions and re-generate the thumbnails.


3. What are recommended sizes for images in this theme?

Since the theme is responsive, images are of fluid width. You can upload images from 800px to around 1200px in web optimized format for better results. The height of images are set to auto. You can also specify custom image sizes inside Appearance > Theme Options > Image Sizes.


4. How to use Theme Customizer

Linea supports WordPress Theme Customizer for basic color schemes on main Navigation menu, secondary area and footer. In order to use Theme Customizer, navigate to WordPress Appearance > Themes. Next, click on the "Customize" link that appears on the active theme section.


5. How to change Image Sizes of woocommerce products

Theme's image sizes can be changed inside Woocommerce > Settings > Products . Inside this section, provide image widths and height for different elements. After changing dimensions, click on "Save Changes". Once you are done, it will be required to regenerate thumbnails using Regenerate Thumbnails Plugin. Recommended Settings are:

  • Catalog Images: 194X194
  • Single Product Image:375x375
  • Product Thumbnails:73x73


6. How to set cart / checkout / shop / my account pages.

You can set set that pages from admin panel. Here inside Woocommerce setting you can see option for set the page .

  • Shop Page: WooCommerce -> Settings -> Products -> Display
  • Cart / Checkout Page: WooCommerce -> Settings -> Checkout
  • My Account : WooCommerce -> Settings -> Accounts

    If you want to show registration form on My Account page then you have to enable this option Enable registration on the "My Account" page .


7. How you enable Product category and other option in admin menu page :

You can enable product category and their subcategory in menu from here path- Appearance -> Menus.
Here on the top of the page you can see "Screen Options".
Please click on this then Product Categories and other options will display. Please check the options. (Like Product Categories) Now that option will display to the left side of menus.


Videos links

Videos links that will help you.


We would be glad to help you if you have any questions relating to this theme please contact us via email at - [email protected]. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.