Elessi Woocommerce Theme Guide


We would like to thank you for purchasing Elessi theme. This file will teach you how to set up and use the Elessi WordPress theme. I hope that you'll find it easy to use and customize. I really wish it will fulfil your needs Please read this manual, because it covers almost all the aspects needed for you to know about installing & running the theme. Enjoy your Elessi theme!

Best Regards,
Nasa WordPress Team

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex – https://codex.wordpress.org/Installing_WordPress

To install Elessi theme please follow these steps:

1. Download

Download a theme package file from ThemeForest. Unzip the package file on your computer – theme package folder will be created.

2. Installing a WordPress theme is super easy via your Dashboard

Step 1 - Login to your WordPress admin

Step 2 - Find Appearance Themes in the Dashboard.

Step 3 - Click button Add New (on top of the page) and go for Upload option.

Step 4 - Open the browse, then pick elessi-theme.zip in the downloaded Theme package from ThemeForest.

Step 5 - Click Install Now.

3. Installing By FTP

In some cases, the Wordpress theme maybe too large to install through Wordpress dashboard. In such situations, we suggest you to upload the theme via FTP.

If you don't know how to use FTP, visit this link for more information: https://codex.wordpress.org/FTP_Clients.

In general, first, you need to uncompress the Wordpress theme ".zip" in the Themepackage downloaded from Themeforest. But in Elessi Theme Package, we have unziped them already into Elessi folder and . Each unzipped folder contains all nessesary files to install the theme, include layouts, css and php files contained all theme code. Using the FTP to transfer the folder of this theme to the Wordpress theme's root directory: /wp-content/themes.

Do not upload any of the other files or folders such as licensing or resource or documentation. Uploading any of the other folders may cause problems, making the theme not work properly. And the sample data folder will be use to import demo data, check the INSTALL DATA DEMO later.

Learn more from Wordpress Official Documentation on installing theme with FTP client or with cPanel: https://codex.wordpress.org/Using_Themes

4. Activate Theme to be Your Default Theme

After successful upload the theme, activate to set it your theme.

Go to your Dashboard > Appearance > Themes > Activate Elessi Theme is now yours.

5. Theme Setup - Import Demo Content

Right after you have activated the theme, You can start to install demo data at Dashboard > Appearance > Theme Setup.

Recommend:

max_execution_time = 3000
PHP Max Input Time: max_input_time = 3000
upload_max_filesize = 128M
PHP Max Input Vars: max_input_vars = 5160;

Follow these steps to install site:

Step 1 - Choose plugins list.

Step 2 - Choose Homepage for your site..

Step 3 - Import Content..

Create or Edit page with Elementor

Create or edit a page with Elementor please follow these steps:

Step 1 - Go to Dashboard > Pages and click Add New or Edit

image

Step 2 - (If "Add New") Edit title your page and click Edit with Elementor

image

Step 3 - Drag and drop Elementor Nasa Widgets for page

image

Elementor Widget Nasa Product

Search Element with "Nasa Product" and drag and drop Element to use

image

image

Elementor Widget Nasa Product Tabs

Search Element with "Nasa Product Tabs" and drag and drop Element to use

image

image

Elementor Widget Nasa Products Special Deal

Search Element with "Nasa Products Special Deal" and drag and drop Element to use

Style: No Nav Items

image

Style: Has Nav 2 Items

image

Style: Has Nav 4 Items

image

Style: Deal Before Time

image

Elementor Widget Nasa Products Masonry (Metro)

Search Element with "Nasa Products Masonry" and drag and drop Element to use

image

Elementor Widget Nasa Product Categories - SC

Search Element with "Nasa Product Categories SC" and drag and drop Element to use

image

The Elementor's documentation is continuing to be updated...

1. Create page with WPBakery Page Builder page builder

You can quickly build a home page using WPBakery Page Builder for WordPress. It is a drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine without a single touch of code. No programming knowledge required!

From your Dashboard, navigate to Pages

Each one page always include lot of parts like Header, Main Page, Widget Sidebar and Footer. The main page may be build using WPBakery Page Builder mentioned above. (It is licensed, but we have purchased and included for you).

Have you ever used WPBakery Page Builder? Please follow this guide first :VIDEO TUTORIALS ACADEMY

Using WPBakery Page Builder, you can drag and drop elements you want to build your page layout.

 

2. Theme Elements

Moreover we also provide to you more elements to create your shop page easier. They are named Nasa elements:

Using WPBakery Page Builder to build page site:
Go to Dashboard > Pages > Add new or edit a page -> Click Add element  -> Nasa Core -> Choose Elements you want

3. Nasa Banner

Allows you to add a banner image and an overlay text. It also allows you to animate the banner on hover action.

Parameter element Settings

If you want to choose any demo page do your home page, follow these steps:
From Dashboard > Settings > Reading

1. Adding and Managing Products (Default WooCommerce)

3.1. Use the variations products

3.2. Setting Color - Size - Image for variation products

Setting Color (Size - Label | Image) attribute for product please work follow images:

Next, set variations for Product variable:

Setting an image attribute type for a product please work follow these steps:

Step 1 - From Dashboard > Products > Attribute

Step 2 - Go to upload your image for attributes:

3.3. How to settings the Color and Label Attribute Style for a single product

You can choose any our Variations Swatches style demo to show on the single product page here:

Style 1

Style 2

Style 3

Style 4

Style 5 and Style 6

Style 7

Style 8

You can override Variations Swatches for Root Category Product (Parent = 0)

4. Use the group products

5.1 Buy Now

Enable Dashboard > Appearance > NasaTheme Options > Single Product Page
And you can setting Color for it.

Buy Now

5.2 Sticky Add To Cart

Enable Dashboard > Appearance > NasaTheme Options > Single Product Page

Size Guide

5.2 Setting Size Guide

The first, you need to create content for Size Guide,
- Go to Dashboard > Static Blocks > Add New

Size Guide

Next Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set Size Guide

Size Guide Options

You can override Size Guide for Root Category Product (Parent = 0)

5.3 Setting Request a Call Back

The first, you need to create content for Request a Call Back,
- Go to Dashboard > Contact (Contact Form 7) > Add New (If not exists Request a Call Back Form)

Size Guide

Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set Request a Call Back

Size Guide Options

5.4 Setting Ask a Question

The first, you need to create content for Ask a Question as the same Request a Call Back (use Contact Form 7 to create content),
- Go to Dashboard > Contact (Contact Form 7) > Add New (If not exists Ask a Question Form).

Ask a Question Options

- Next, Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set Ask a Question

Ask a Question Options

5.5 Setting Delivery and Return

The first, you need to create content for Delivery and Return,
- Go to Dashboard > Static Blocks > Add New (If not exists Delivery and Return)

Delivery and Return Options

- Next, Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set Delivery and Return

Delivery and Return Options

5.6 Content After Single Product Add To Cart Form - Trust Badge as Demo site

The first, you need to create content,
- Go to Dashboard > Static Blocks > Add New (If not exists)

Delivery and Return Options

- Next, Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set Content After Single Product Add To Cart Form

Content After Single Product Add To Cart Form Options

6. Setting Bought Together

Add new or edit product > Tab Linked Products
Note: This feature only support for Simple product and linked with the other Simple products

Bought Together

7. Setting Free Shipping

The firstly, you need install plugin WooCommerce Advanced Free Shipping and active it.

Advanced Free Shipping

Next, go to Dashboard > WooCommerce > Settings > Shipping > Advanced Free Shipping > set as image

Advanced Free Shipping 2

Note: you need to create only one Free shipping rates with the format as image

Advanced Free Shipping 3

8. Product 360° Viewer

The firstly, you need Enable this feature at Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Product 360° Viewer.

Product 360 degree Viewer

Next, Edit or Add new Product and Add Gallery images 360° Viewer for product (Upload Multiple for images)

Product 360 degree Viewer

9.1. After Process Checkout Button - Shopping Cart Page

The first, you need to create content for Content After Process Checkout Button,
- Go to Dashboard > Static Blocks > Add New

After Process Checkout Button

Next Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set After Process Checkout Button

After Process Checkout Button Options

9.2. After Cart Content - Shopping Cart Page

The first, you need to create content for Content After Cart in Shopping Cart Page,
- Go to Dashboard > Static Blocks > Add New

After Cart Content

Next Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set After Cart Content

After Cart Content Options

10.1. After Place Order Button - Checkout Page

The first, you need to create content for Content After Place Order Button in Checkout Page,
- Go to Dashboard > Static Blocks > Add New

After Place Order Button

Next Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set After Place Order Button

After Place Order Button Options

10.2. After Review Order Payment - Checkout Page

The first, you need to create content for Content After Review Order Payment in Checkout Page,
- Go to Dashboard > Static Blocks > Add New

After Review Order Payment

Next Go to Dashboard > Appearance > NasaTheme Options > WooCommerce Open > Set After Review Order Payment

After Review Order Payment Options

AJAX Filter Product by Variation

Filter by Color Attribute

AJAX Filter Product by Categories / How to add icon to the Product Categories

Filter by Categories

The following steps will guide you in defining your menus using the WordPress menu editor and Nasa Megamenu. The mega menus are available only for top level navigations items only in "Main Menu" area.
Follow the steps below to create a mega menu:

Step 1 - Add a an item to the menu editor. This has to be a top level item!

Step 2 - Click on the arrow icon in the top right-hand and expand.

Step 3 - Check the "Enable megamenu".

Step 4 - Write in the "Megamenu columns" the number of columns you want to use (from 3 to 5).

Step 5 - Now, you need to add child menu items, which will represent columns in the mega menu.
First level of child items will represent Titles in each of 3 columns.
Add 3 sub child menu items, like on the image below.

Step 6 - Adding Image to the Menu. Please checkin Image megamenu.

 

To it is displayed please follow these steps:

Step 1 - From Dashboard > Appearance > Nasa Core Options

Step 2 - Then, please click Single Product Page

Elessi featured an amazingly powerful and beautiful NasaTheme Options where you can find all the theme settings. It is as easy to use as it gets and offers several different options fields and input types which help to set the right option value.

How to use theme admin panel?

Go to Apperance > NasaTheme Options

Please go to Dashboard > Appearance > NasaTheme Options > Fonts > Set Type font to "Custom Font"

How to upload your custom font:
You can create with as this format:
folder: name => your_custom_font_name in folder => create file: your_custom_font_name.css and all files fonts (ttf, eot, woff, ...)
in file: your_custom_font_name.css => call link to fonts file:
This is ex about fonts of us get at here.
Please view here: Use the Nasa Instagram Feed Element
To integrate social network (Facebook, Google, Twitter) login function into WordPress theme:

Please follow these steps:

Step 1 - Please install plugin Nextend Social Login and Register (Facebook, Google, Twitter) on your site:

Step 2 - From Dashboard > Settings > Nextend Social Login

Step 3 - Getting started:

1. Change Header Type

The theme is ready to translate by using the po file. If you want to build a multilingual site, you need to use WPML plugin. Our theme does not include the WPML plugin. It only is compatible with the WPML plugin. You have to buy a license for this plugin.

1. Using Po File

There are 2 ways to create and edit the po file

  1. Use the Poedit software and refer this document
  2. Use the translation plugins, such as Loco Translate
Please note that:
  • You have to generate the mo file after translating
  • You already set your language. Go to Settings > General and check Site Language option

2. Using WPML

In this section, you will know how to build a multilingual website by using the WPML plugin. All the information needs to get started and use it is on the WPML.org page.

Below are some reference links:

Installing and Setting Up the WPML plugin

You need to install a recent version of WPML, including the String Translation, Translation Management and CMS Navigation modules. After installing these plugins, you set up Languages from WPML > Languages and translate your content.

Translating Pages and Posts

Go to All Pages and pick a page for translation. Click on the plus icon. If the page is already translated, the plus icon will be replaced with a pen icon.

WPML actually creates a new WordPress page, linked to the original one. In this new page, you can add new content as you normally do. You can also keep the original content, just translate into the new language.

Translating Categories

To translate a category, click on the language which you want to translate it and then add a new category. Make sure the new category is linked to an original category.

Translating Menus

You go to WPML > String Translation. Find the text in the list and translate it. Please make sure you check the Translation is complete checkbox after translating.

Sometimes, some texts are not translated. First, you need to go to WPML > Theme and Plugins localization. You click on the Scan the theme for strings button. Then, you go back to the String Translation page and find those texts.

How to Updating the Theme

To update the theme, You can use 1 of 2 ways:

* Manual use FTP update: ========================= */
Follow the steps below to manually update the theme:
Step 1 - Backup theme-folder on your server
Step 2 - Download the new theme package from ThemeForest. You have to log into your ThemeForest account and navigate to the Downloads tab. You find the theme in your purchased themes list
Go to https://themeforest.net/downloads
Step 3 - Unzip theme package
Step 4 - You can delete the current theme. Don't worry about this. Your data will be not lost.
Step 5 - Copy override theme folder to theme directory on your server

* Auto Update: ==================================== */
you need install plugin Envato Market to auto-update theme when releasing a new version.
Please view doc and download plugin Envato Market here:
https://envato.com/market-plugin/


P/S: Updating this theme will not lose any customizations you have made if you are using child-theme and all custom work in child-theme


There are some notes about updating the theme:
1) After Updated complete theme, please go to Dashboard - Appearance - Install Plugins to update all required plugins.
2) Before check site again, please delete cache and cookie browser.

1. How to add the Custom content to the Shop page

Go to the Appreance -> NasaTheme Options -> Archive Products Pages -> TOP BOTTOM CONTENT PRODUCTS PAGE

2. How to edit Contact Form or Newsletter form

3. How to insert new label or sale label to the mega menu

Didn't find the necessary information in our documentation?

We aim to help our clients if they have any unresolved difficulties.

For this reason, if you still have questions we will be happy to answer them. Please open your support ticket at https://support.nasatheme.com or contact us via email: nasathemes@gmail.com

 

Thank you for purchasing the Elessi Theme!

© nasatheme.com. All Rights Reserved.