# Introduction

![Elessi Theme](/files/-M_R3h5ev0HsTfhjUW6T)

First, we would like to thank you for purchasing <mark style="color:red;">**Elessi**</mark> theme. This file will teach you how to set up and use the <mark style="color:red;">**Elessi**</mark> WordPress theme. We hope that you will find it easy to use and customize. We really wish it will fulfill 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 <mark style="color:red;">**Elessi**</mark> theme!

| The Portfolio                                                                   | Demo                                                                                         | Email                                                                                    |
| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [<mark style="color:blue;">**NasaTheme Studio**</mark>](https://nasatheme.com/) | [<mark style="color:blue;">**Demo Elessi Theme**</mark>](https://elessi.nasatheme.com/demo/) | [<mark style="color:blue;">**nasathemes@gmail.com**</mark>](mailto:nasathemes@gmail.com) |

#### *If you are unable to find your answer here in our documentation, feel free to ask for help from our support team, all you have to do is submit your problem via:*

**Ticket support:** [<mark style="color:blue;">**https://support.nasatheme.com/**</mark>](https://support.nasatheme.com/)\
**Email support:** [<mark style="color:blue;">**nasathemes@gmail.com**</mark> ](mailto:nasathemes@gmail.com)


# Download and Installation


# Requirements

Some requirements for hosting, configuring PHP, let the theme can run better.

To install <mark style="color:red;">**Elessi**</mark> 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 here:

{% embed url="<https://wordpress.org/download/>" %}

### 1. **Requirements for WordPress**

Make sure that your web host has the [<mark style="color:blue;">**minimum requirements to run WordPress.**</mark>](http://wordpress.org/about/requirements/)

#### **To install WordPress CMS to your site please follow these steps:**

1. Download the latest WordPress version from [<mark style="color:blue;">**https://wordpress.org/download/**</mark>](https://wordpress.org/download/)
2. Upload the zip file to your website root folder and unzip
3. Create the database (using your hosting panel)
4. Set up WordPress

{% hint style="info" %}
Detailed instructions: [<mark style="color:blue;">**https://wordpress.org/support/category/installation/**</mark>](https://wordpress.org/support/category/installation/)
{% endhint %}

### 2. **Recommended PHP Configuration Limits**

#### Sometimes you may get some errors while installing our theme, importing content or activating plugins like white screen or PHP errors. They may be caused by low PHP configuration limits. In this case, you need to increase some values. You can do this on your own or contact your hosting providers with the following requirements:

{% hint style="success" %}
**max\_execution\_time >= 60**
{% endhint %}

{% hint style="success" %}
**PHP Max Input Time: max\_input\_time >= 60**
{% endhint %}

{% hint style="success" %}
**upload\_max\_filesize >= 64M**
{% endhint %}

{% hint style="success" %}
**PHP Max Input Vars: max\_input\_vars >= 5000**
{% endhint %}

{% hint style="success" %}
[**PHP**](https://www.php.net/) **version 7.4 or greater (The newest version is the best)**
{% endhint %}

{% hint style="success" %}
[**MySQL**](https://www.mysql.com/) **version 5.7 or greater OR** [**MariaDB**](https://mariadb.org/) **version 10.4 or greater.**
{% endhint %}

{% hint style="success" %}
**memory\_limit (WordPress memory limit) >= `512M`**
{% endhint %}


# Download Theme

In order to download the theme, log into your ThemeForest account and go to your account profile. Then click on the download link. This is where you will find all of your ThemeForest purchases. Find <mark style="color:red;">**Elessi**</mark> Theme, click on the download button and select the All files & documentation.

![](/files/-MbpIEuuaBCA1jmS6o3O)


# Installation Theme

There are two ways to upload any theme to the WordPress site: Admin panel and FTP. The most recommended way is uploading via the Admin panel, however, sometimes there may be size limitations for files uploaded that is why this manual provides both ways:

### **Upload Theme through WordPress Admin panel**

#### **Method 1: Install the theme through the WordPress Dashboard**

**The first**: Download a theme package file from ThemeForest. Unzip the package file on your computer - **themeforest-xxxxxxxx-elessi-woocommerce-ajax-wordpress-theme.zip**, and the theme package folder will be created.

<figure><img src="/files/ktUpp1xGdOFhr8FKh71b" alt=""><figcaption><p>You will need to use <mark style="color:red;"><strong>elessi-theme.zip</strong></mark> file to install</p></figcaption></figure>

#### **Installing a WordPress theme is super easy via your Dashboard**

1. Sign in to your admin panel at yourdomain.com/wp-admin
2. Find **Appearance →** **Themes** in the Dashboard
3. Click the button **Add New** (on top of the page) and go for the **Upload** option
4. Open the browse, then pick **elessi-theme.zip** from the **unzip folder** of your downloaded Theme package from ThemeForest
5. Click the "**Install Now**" button

![](/files/yXw4hYmd88Ug7M75McEn)

### **Installing By FTP**

#### **Method 2: Upload through the FTP**

First, you need to uncompress the WordPress theme ".zip" in the Theme package downloaded from Themeforest. But in <mark style="color:red;">**Elessi**</mark> Theme Package, we have unzipped them already into <mark style="color:red;">**Elessi**</mark> folder and each unzipped folder contains all necessary files to install the theme, including layouts, CSS and PHP files containing all theme code. Using the FTP to transfer the folder of this theme to the WordPress theme's root directory: /wp-content/themes.

{% hint style="info" %}
Connect to your hosting (server) via FTP client
{% endhint %}

{% hint style="info" %}
Upload your theme folder to your-site.com/wp-content/themes folder
{% endhint %}

{% hint style="info" %}
Login to your WordPress Dashboard and go to **Appearance** **→** **Themes** and activate Theme
{% endhint %}

{% hint style="info" %}
Open your site and check if everything is okay
{% endhint %}


# Import Demo Content

The import demo will give you all pages and posts, sample sliders, widgets, Theme Options, and more with only one click.

We have upgraded the theme with *One-click Import* easily and quickly to install:

<mark style="color:blue;">**Step 1**</mark> - Login to the **WordPress Dashboard**

<mark style="color:blue;">**Step 2**</mark> - Go to **Theme Option → Theme Setup.** This section will lead you to the steps to install the demo with *One-click Import*

<figure><img src="/files/PDmjUhnPgOLNW4UMAOKA" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step 3**</mark> - Click the circle to select all the plugins you want to install and click on the **CONTINUE** button

![We recommend using only one page builder plugin (WPBakery Page Builder or Elementor). More importantly,  for pages built with WPBakery Page Builder plugin please don't switch to editing with Elementor plugin and vice versa.](/files/QiUkoOWoZREne10tFqjW)

<mark style="color:blue;">**Step 4**</mark> - Choose the demo and data you want to import and click **START IMPORT SAMPLE DATA**

![Import by the WPBakery Page Builder](/files/QS0l20mool7weCPiC5YR)

![Import by the Elementor](/files/OXCoBHkeSGalETIDMisj)

<mark style="color:blue;">**Step 5**</mark> - Navigate to **Woocommerce Tools** to delete cache and update product schedule time again

![1](/files/ZkdDpUE45r2zuJXQlwyE)

![2](/files/OcyHdhiXBY7KpSBA5Tf7)

{% hint style="success" %}
Next, to set up the homepage, please view [<mark style="color:blue;">**here**</mark>](/common-issues-and-faqs/faq-guides/how-to-setting-home-page)
{% endhint %}

### <mark style="color:red;">**Installation Guide Clip**</mark>

Watch our video tutorial that demonstrates how to install <mark style="color:red;">**Elessi**</mark> theme and import dummy content properly just in a few minute&#x73;**:**

{% embed url="<https://www.youtube.com/watch?v=T0mCabWIW5I>" %}

{% hint style="info" %}
If you got the issues with the import sample data [<mark style="color:blue;">**click here to see this useful article**</mark> ](/common-issues-and-faqs/i-can-not-import-demo-content)
{% endhint %}


# Import More Demos

After completing the theme installation process and importing sample data, you can also add additional home pages if you want

Please go to **Theme Options → Import More Demos**

<mark style="color:red;">Note: This process only appears when the theme installation and sample data import process is complete</mark>

<mark style="color:red;">If you are using</mark> <mark style="color:red;"></mark><mark style="color:red;">**WPML**</mark><mark style="color:red;">, please temporarily deactivate</mark> <mark style="color:red;"></mark><mark style="color:red;">**WPML**</mark> <mark style="color:red;"></mark><mark style="color:red;">so this can work</mark>

<figure><img src="/files/7v7UPu4777GsjSveakqC" alt=""><figcaption></figcaption></figure>


# Updates


# Update Theme

There are two methods to update your theme: the Envato Market Plugin update method and the traditional method that involves more steps via WordPress or via FTP:

* [<mark style="color:blue;">**Method 1: Automatic Updates**</mark>](/getting-started/updates/update-theme/automatic-updates)
* [<mark style="color:blue;">**Method 2: Manual Update**</mark>](/getting-started/updates/update-theme/manual-update)

<mark style="color:red;">**Important**</mark><mark style="color:orange;">**:**</mark> After updating the theme, all your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files, language files will be lost. So you need to use the child theme to customize the theme and backup the lang file if you translated the theme.

{% hint style="info" %}

### Best practice & important notes <a href="#best-practice-important-notes" id="best-practice-important-notes"></a>

* **Create a backup:** whenever you update it’s always a good idea to make sure that you have a current backup of your website and database. There are several plugins available that completely automate that process. You can also ask your host to perform a free backup for you.
* **Save Theme Options:** after the update Save your Theme Options in order to recreate the dynamic CSS file with settings like custom colors and fonts.
* **Clear cache:** it is always recommended to reset your browser, possible cache plugins, and server cache when you update. Possible visual issues may occur after an update if you have old files cached, this is something easily avoided by clearing your cache after all updates.
  {% endhint %}


# Method 1: Automatic Updates

This guide shows how to install & connect the [<mark style="color:blue;">**Envato Market**</mark>](https://envato.com/market-plugin/) plugin to your ThemeForest/Envato account so you can update easily from the WordPress admin.

### <mark style="color:blue;">**Step 1**</mark>**&#x20;- Generate Token**

Navigate to **Envato Market** in the WordPress admin. Click the **generate a personal token** link.

![](/files/-Mbp7XwqDtc8XV5h7HC8)

After clicking the link you will be taken to the page below (you may need to login to your Envato account first).

1. Enter a name into the **Token name** field ("updates" for example).
2. Check the "Terms and Conditions" box.
3. Click the **Create Token** button.

*You can leave the Permission options as they are.*

![](/files/-Mbp3w0QrSzgYZ0VXxs0)

Copy your token code from the "Success" screen (this is important since Envato doesn't store it for you) and click the **Got it** button.

![](/files/-Mbp40GOYxnlz28XDhki)

### <mark style="color:blue;">**Step 2**</mark>**&#x20;- Connect Envato Account**

To connect your Envato Market account, enter your Envato token into the **Token** field and click the **Save Changes** button.

{% hint style="info" %}
If you see the following error message when you first enter your token, simply go back to the previous page and try again. It should work on the second go.
{% endhint %}

![](/files/-Mbp4Hw0-M-BAfVB2O8B)

### <mark style="color:blue;">**Step 3**</mark>**&#x20;- Update Theme**

Once your token is saved and validated the available items for your Envato account will be displayed.\
To update the theme, simply click the **Update Available** link in the orange notice on the theme listing.

![](/files/-MbpFMCm3EIjlHiF43Zb)

**That's it!**

{% hint style="success" %}
That will update only the theme, you still have to **update the bundled plugins**
{% endhint %}

### <mark style="color:blue;">Step 4</mark> - Update bundled plugins

After the theme update always check **Appearance → Install Plugins** for any plugin updates

![](/files/jCbVVbFSkwC3JssvX8br)


# Method 2: Manual Update

Get the latest <mark style="color:red;">**Elessi**</mark> theme version from your [<mark style="color:blue;">**ThemeForest account**</mark>](http://www.themeforest.net/downloads)<mark style="color:blue;">.</mark>\
If you don't want to or can't use the plugin, you can always update the theme manually in these steps.

### <mark style="color:blue;">Step 1</mark> - Get the theme files

Save the theme's files on your computer first.

* Go to the [<mark style="color:blue;">**Downloads**</mark>](https://themeforest.net/downloads) section in your Envato account
* Then click the green Download button to grab the theme and make sure you're getting the "**Installable WordPress file only"**

![](/files/-MbpIEuuaBCA1jmS6o3O)

### <mark style="color:blue;">Step 2</mark> - Upload and replace the theme&#x20;

Now that the theme's files are saved on your computer, you can log into WordPress administration dashboard to upload and install it.

Navigate to **Appearance** **→** **Themes** and click the "**Add New**"

![](/files/-MbpOk-dA0Ga9hsY9Pl7)

Upload the file you've downloaded from ThemeForest in the previous step and click **Install Now**.

![](/files/-MbpNOav-n_iU497Vhxs)

Finally click **Replace current with uploaded**

![](/files/-MbpKqBS8AlEn6s2sQt6)

{% hint style="info" %}
**Now update the bundled plugins as indicated in the next section.**
{% endhint %}

### <mark style="color:blue;">Step 3</mark> - Update bundled plugins

After the theme update always check **Appearance → Install Plugins** for any plugin updates

![](/files/jCbVVbFSkwC3JssvX8br)


# Update Nasa Core plugin

<mark style="color:blue;">**Nasa Core**</mark> plugin is one of the plugins required for <mark style="color:red;">**Elessi**</mark> theme. To update the <mark style="color:blue;">**Nasa Core**</mark> plugin please follow these steps:&#x20;

Go to **Theme Options** **→** **Install plugins** and click on **Update**

![](/files/tEvbrspKNvXSWDV40U06)


# Update WP Bakery and Revolution Slider plugin

{% hint style="info" %}
We purchased the extended license for this plugin. The update option is for users who have purchased this plugin individually.
{% endhint %}

{% hint style="info" %}
Since the <mark style="color:blue;">**WPBakery Page Builder**</mark> plugin (and <mark style="color:blue;">**Slider Revolution**</mark> plugin) does not allow updating via updating the theme, so please follow these steps below to update it:
{% endhint %}

<mark style="color:blue;">**Step 1**</mark> – Go to **Theme Options → Install Plugins.**  Select the **Update Available**

![](/files/v3w0LIwoptMGSxi73qFy)

<mark style="color:blue;">**Step 2**</mark> – Check and select all the plugins you want to update, select **Update** from the dropdown box, and then click the button to **Apply**.

![](/files/W1RCgKvMM2sox6addcoc)


# Performance

We developed the theme with performance in mind and have put a lot of work into making it as Lightweight as possible. With that said, any WordPress site can benefit from some performance optimization so we have listed our recommendations below:\
\
[![](/files/-MbWuPCrwQJMJHcCW-2v)](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=)[![](/files/-MbWupzfSSsjK4XrIATU)](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=)

*We recommend the WP Rocket caching plugin. Click* [*<mark style="color:blue;">**here**</mark>*](/common-issues-and-faqs/faq-guides/how-to-configuration-the-optimization-wp-rocket-basic) *to know how to configuration the optimization WP Rocket plugin basic.*

### **Hosting**

Using a solid web-host plays a major part in your site's performance. For business owners setting-up a Small to Medium size WooCommerce store, a shared host from [<mark style="color:blue;">**NameCheap**</mark>](https://namecheap.pxf.io/5X6Po) is popular choices.

### **Caching**

The most effective way to speed up a WordPress site is with a Caching plugin. We are using [<mark style="color:blue;">**WP Rocket**</mark>](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=) on the theme's preview site. WP Rocket is a premium plugin, but it's one of the best and most beginner-friendly caching plugins available in our opinion.

### **Images**

Non-optimized images are a common issue with beginner websites. Since original images tend to be large, we recommend using an image-editor to resize and optimize them before uploading to WordPress.\
To help automate this process you can use an image-optimization plugin like [<mark style="color:blue;">**Imagify**</mark>](https://wordpress.org/plugins/imagify/)<mark style="color:blue;">**,**</mark> [<mark style="color:blue;">**Smush**</mark>](https://wordpress.org/plugins/wp-smushit/) or [<mark style="color:blue;">**EWWW Image Optimizer**</mark>](https://wordpress.org/plugins/ewww-image-optimizer/).

### **CDN (Content Delivery Network)**

If your site is getting a good amount of traffic you can consider using a [<mark style="color:blue;">**CDN**</mark>](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=)**.** This will ensure that your site's most frequently-accessed content (like images) are delivered from a server located closest to the visitor. The most popular providers today are [<mark style="color:blue;">**Rocket CDN**</mark>](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=) (our choice) and [<mark style="color:blue;">**Cloudflare**</mark>](https://www.cloudflare.com/cdn/)**.**

\
**The** [<mark style="color:blue;">**WP Rocket**</mark>](https://shareasale.com/r.cfm?b=1075949\&u=2826062\&m=74778\&urllink=\&afftrack=) **caching plugin recommended above has built-in CDN support.**


# Changelog

#### Please check our latest changelog here: [<mark style="color:blue;">**https://elessi.nasatheme.com/wp-content/themes/elessi-theme/update.txt**</mark>](https://elessi.nasatheme.com/wp-content/themes/elessi-theme/update.txt)


# Header


# Header Layout

The theme includes 6 different Header layouts and it is easy to switch your header layout. \
Simply go to **Theme Options** **→** **Header**

![](/files/nAP3lvJ46eXb9lxXySne)

*Also, you need to turn off the options change header that has overridden some Home Page Demo (like Organic, Tech Accessories, ...) so the header of the theme option that shows:*

<figure><img src="/files/rY1EfQdLG1T9JcmpPLTy" alt=""><figcaption><p><mark style="color:blue;"><strong>1</strong></mark></p></figcaption></figure>

<figure><img src="/files/3iFOufodIvHD7V8pL4qa" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/xxbul7Y1XNsuXA4jJTaf" alt=""><figcaption><p><mark style="color:blue;"><strong>2</strong></mark></p></figcaption></figure>

###

### [<mark style="color:green;">Header Type 1</mark>](/header-and-menu/header/header-layout/header-layout-1)

![](/files/WB97pOyCujXXcS3nTGXn)

###

### [<mark style="color:green;">Header Type 2</mark>](/header-and-menu/header/header-layout/header-layout-2)

![](/files/0y3LT7NZwM9ZXfqUGKlU)

###

### [<mark style="color:green;">Header Type 3</mark>](/header-and-menu/header/header-layout/header-layout-3)

![](/files/GJefVP8VKbbglRNVNr1H)

###

### [<mark style="color:green;">Header Type 4</mark>](/header-and-menu/header/header-layout/header-layout-4)

![](/files/isVwjyrH6JiXG2sEtEtG)

###

### [<mark style="color:green;">Header Type 5</mark>](/header-and-menu/header/header-layout/header-layout-5)

![](/files/Bgi7tdPPlliYnVym6LPe)

###

### [<mark style="color:green;">Header Type 6</mark>](/header-and-menu/header/header-layout/header-layout-6)

![](/files/qA0oAI4FzZqId0Vt6ha8)


# Header Layout 1

![](/files/LMm21xHQ66fzPkBlQV2k)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Topbar Left**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#1.-topbar-left)
2. [<mark style="color:green;">**Topbar Right**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#2.-topbar-right)
3. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
4. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)
5. [<mark style="color:green;">**Product Categories Icon**</mark>](/common-issues-and-faqs/faq-guides/how-to-show-top-icon-filter-categories-on-all-pages)


# Header Layout 2

![](/files/1cXHaV1wElknm2cp9rst)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Topbar Left**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#1.-topbar-left)
2. [<mark style="color:green;">**Topbar Right**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#2.-topbar-right)
3. [<mark style="color:green;">**Icons social network**</mark>](/single-product/extended-features/social-share)
4. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
5. [<mark style="color:green;">**Product Categories Icon**</mark>](/common-issues-and-faqs/faq-guides/how-to-show-top-icon-filter-categories-on-all-pages)
6. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)


# Header Layout 3

![](/files/TfuAn3g7QwWf80GoFF9V)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Topbar Left**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#1.-topbar-left)
2. [<mark style="color:green;">**Topbar Right**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#2.-topbar-right)
3. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
4. [<mark style="color:green;">**Product Categories Icon**</mark>](/common-issues-and-faqs/faq-guides/how-to-show-top-icon-filter-categories-on-all-pages)
5. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)


# Header Layout 4

![](/files/I52LkIPS2gDSmUjHQnuN)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Topbar Left**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#1.-topbar-left)
2. [<mark style="color:green;">**Topbar Right**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#2.-topbar-right)
3. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
4. [<mark style="color:green;">**Vertical Menu**</mark>](/header-and-menu/menus/config-mega-menu/how-to-set-up-mega-menu-vertical)
5. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)
6. [<mark style="color:green;">**Static Block**</mark>](/common-issues-and-faqs/faq-guides/how-to-add-the-number-telephone-show-on-the-header)


# Header Layout 5

![](/files/qEMwbyqhDW7LhUs6Bwpf)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)
2. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
3. [<mark style="color:green;">**Product Categories Icon**</mark>](/common-issues-and-faqs/faq-guides/how-to-show-top-icon-filter-categories-on-all-pages)


# Header Layout 6

![](/files/klNyyPlwbwFgOAjx34Dk)

Simply go to **Appearance** **→** **Theme Options** **→** **Header and Footer**

![](/files/nAP3lvJ46eXb9lxXySne)

#### **Elements**

1. [<mark style="color:green;">**Topbar Left**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#1.-topbar-left)
2. [<mark style="color:green;">**Topbar Right**</mark>](https://elessi-docs.nasatheme.com/header-and-menu/header/header-layout/pages/-MV6EH-JtTk3dkArPQzM#2.-topbar-right)
3. [<mark style="color:green;">**Logo**</mark>](/header-and-menu/header/set-up-logo)
4. [<mark style="color:green;">**Vertical Menu**</mark>](/header-and-menu/menus/config-mega-menu/how-to-set-up-mega-menu-vertical)
5. [<mark style="color:green;">**Main Menu**</mark>](/header-and-menu/menus/create-new-menu#following-these-steps-to-create-a-menu)
6. [<mark style="color:green;">**Static Block**</mark>](/common-issues-and-faqs/faq-guides/how-to-add-the-number-telephone-show-on-the-header)


# Topbar Promotion - Vertical Scroll

<figure><img src="/files/cPsbPWFFkbMrf20rj457" alt=""><figcaption></figcaption></figure>

You can Set up this in **Dashboard -> Theme Options -> Header Global -> Promotion News**

<figure><img src="/files/bKhBkQ7wojnVKnugWEnI" alt=""><figcaption></figcaption></figure>

Content Sample here:

```html
<a href="https://1.envato.market/dvQG2" target="_blank" class="nasa-bold nasa-flex jc">Lifetime Warranty&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="16" height="16"><path fill="#C1694F" d="M21.978 20.424c-.054-.804-.137-1.582-.247-2.325-.133-.89-.299-1.728-.485-2.513-.171-.723-.356-1.397-.548-2.017-.288-.931-.584-1.738-.852-2.4-.527-1.299-.943-2.043-.943-2.043l-3.613.466s.417.87.868 2.575c.183.692.371 1.524.54 2.495.086.49.166 1.012.238 1.573.1.781.183 1.632.242 2.549.034.518.058 1.058.074 1.619.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989-.074.6-.182 1.197-.311 1.789-.185.848-.413 1.681-.67 2.475-.208.643-.431 1.261-.655 1.84-.344.891-.69 1.692-.989 2.359-.502 1.119-.871 1.863-.871 2.018 0 .49.35 1.408 2.797 2.02 3.827.956 4.196-.621 4.196-.621s.243-.738.526-2.192c.14-.718.289-1.605.424-2.678.081-.642.156-1.348.222-2.116.068-.8.125-1.667.165-2.605.03-.71.047-1.47.055-2.259.002-.246.008-.484.008-.737 0-.64-.03-1.261-.071-1.872z"/><path fill="#D99E82" d="M18.306 30.068c-1.403-.244-2.298-.653-2.789-.959-.344.891-.69 1.692-.989 2.359.916.499 2.079.895 3.341 1.114.729.127 1.452.191 2.131.191.414 0 .803-.033 1.176-.08.14-.718.289-1.605.424-2.678-.444.157-1.548.357-3.294.053zm1.06-4.673c-1.093-.108-1.934-.348-2.525-.602-.185.848-.413 1.681-.67 2.475.864.326 1.881.561 2.945.666.429.042.855.064 1.27.064.502 0 .978-.039 1.435-.099.068-.8.125-1.667.165-2.605-.628.135-1.509.21-2.62.101zm.309-2.133c.822 0 1.63-.083 2.366-.228.002-.246.008-.484.008-.737 0-.641-.029-1.262-.071-1.873-.529.138-1.285.272-2.352.286-1.084-.005-1.847-.155-2.374-.306.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989.763.161 1.605.253 2.461.257l.062.001zm-.249-4.577c.825-.119 1.59-.333 2.304-.585-.133-.89-.299-1.728-.485-2.513-.496.204-1.199.431-2.181.572-.91.132-1.605.124-2.129.077.1.781.183 1.632.242 2.549.152.006.29.029.446.029.588.001 1.2-.043 1.803-.129zm1.271-5.116c-.288-.931-.584-1.738-.852-2.4-.443.222-1.004.456-1.737.659-.795.221-1.437.309-1.951.339.183.692.371 1.524.54 2.495.681-.068 1.383-.179 2.094-.376.679-.188 1.31-.44 1.906-.717z"/><path fill="#3E721D" d="M32.61 4.305c-.044-.061-4.48-5.994-10.234-3.39-2.581 1.167-4.247 3.074-4.851 5.535-1.125-1.568-2.835-2.565-5.093-2.968C6.233 2.376 2.507 9.25 2.47 9.32c-.054.102-.031.229.056.305s.217.081.311.015c.028-.02 2.846-1.993 7.543-1.157 4.801.854 8.167 1.694 8.201 1.702.02.005.041.007.061.007.069 0 .136-.028.184-.08.032-.035 3.22-3.46 6.153-4.787 4.339-1.961 7.298-.659 7.326-.646.104.046.227.018.298-.07.072-.087.075-.213.007-.304z"/><path fill="#5C913B" d="M27.884 7.63c-4.405-2.328-7.849-1.193-9.995.22-2.575-.487-7.334-.459-11.364 4.707-4.983 6.387-.618 14.342-.573 14.422.067.119.193.191.327.191.015 0 .031-.001.046-.003.151-.019.276-.127.316-.274.015-.054 1.527-5.52 5.35-10.118 2.074-2.496 4.55-4.806 6.308-6.34 1.762.298 4.327.947 6.846 2.354 4.958 2.773 7.234 7.466 7.257 7.513.068.144.211.226.379.212.158-.018.289-.133.325-.287.02-.088 1.968-8.8-5.222-12.597z"/></svg>&nbsp;Easy Returns&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="16" height="16"><path fill="#C1694F" d="M21.978 20.424c-.054-.804-.137-1.582-.247-2.325-.133-.89-.299-1.728-.485-2.513-.171-.723-.356-1.397-.548-2.017-.288-.931-.584-1.738-.852-2.4-.527-1.299-.943-2.043-.943-2.043l-3.613.466s.417.87.868 2.575c.183.692.371 1.524.54 2.495.086.49.166 1.012.238 1.573.1.781.183 1.632.242 2.549.034.518.058 1.058.074 1.619.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989-.074.6-.182 1.197-.311 1.789-.185.848-.413 1.681-.67 2.475-.208.643-.431 1.261-.655 1.84-.344.891-.69 1.692-.989 2.359-.502 1.119-.871 1.863-.871 2.018 0 .49.35 1.408 2.797 2.02 3.827.956 4.196-.621 4.196-.621s.243-.738.526-2.192c.14-.718.289-1.605.424-2.678.081-.642.156-1.348.222-2.116.068-.8.125-1.667.165-2.605.03-.71.047-1.47.055-2.259.002-.246.008-.484.008-.737 0-.64-.03-1.261-.071-1.872z"/><path fill="#D99E82" d="M18.306 30.068c-1.403-.244-2.298-.653-2.789-.959-.344.891-.69 1.692-.989 2.359.916.499 2.079.895 3.341 1.114.729.127 1.452.191 2.131.191.414 0 .803-.033 1.176-.08.14-.718.289-1.605.424-2.678-.444.157-1.548.357-3.294.053zm1.06-4.673c-1.093-.108-1.934-.348-2.525-.602-.185.848-.413 1.681-.67 2.475.864.326 1.881.561 2.945.666.429.042.855.064 1.27.064.502 0 .978-.039 1.435-.099.068-.8.125-1.667.165-2.605-.628.135-1.509.21-2.62.101zm.309-2.133c.822 0 1.63-.083 2.366-.228.002-.246.008-.484.008-.737 0-.641-.029-1.262-.071-1.873-.529.138-1.285.272-2.352.286-1.084-.005-1.847-.155-2.374-.306.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989.763.161 1.605.253 2.461.257l.062.001zm-.249-4.577c.825-.119 1.59-.333 2.304-.585-.133-.89-.299-1.728-.485-2.513-.496.204-1.199.431-2.181.572-.91.132-1.605.124-2.129.077.1.781.183 1.632.242 2.549.152.006.29.029.446.029.588.001 1.2-.043 1.803-.129zm1.271-5.116c-.288-.931-.584-1.738-.852-2.4-.443.222-1.004.456-1.737.659-.795.221-1.437.309-1.951.339.183.692.371 1.524.54 2.495.681-.068 1.383-.179 2.094-.376.679-.188 1.31-.44 1.906-.717z"/><path fill="#3E721D" d="M32.61 4.305c-.044-.061-4.48-5.994-10.234-3.39-2.581 1.167-4.247 3.074-4.851 5.535-1.125-1.568-2.835-2.565-5.093-2.968C6.233 2.376 2.507 9.25 2.47 9.32c-.054.102-.031.229.056.305s.217.081.311.015c.028-.02 2.846-1.993 7.543-1.157 4.801.854 8.167 1.694 8.201 1.702.02.005.041.007.061.007.069 0 .136-.028.184-.08.032-.035 3.22-3.46 6.153-4.787 4.339-1.961 7.298-.659 7.326-.646.104.046.227.018.298-.07.072-.087.075-.213.007-.304z"/><path fill="#5C913B" d="M27.884 7.63c-4.405-2.328-7.849-1.193-9.995.22-2.575-.487-7.334-.459-11.364 4.707-4.983 6.387-.618 14.342-.573 14.422.067.119.193.191.327.191.015 0 .031-.001.046-.003.151-.019.276-.127.316-.274.015-.054 1.527-5.52 5.35-10.118 2.074-2.496 4.55-4.806 6.308-6.34 1.762.298 4.327.947 6.846 2.354 4.958 2.773 7.234 7.466 7.257 7.513.068.144.211.226.379.212.158-.018.289-.133.325-.287.02-.088 1.968-8.8-5.222-12.597z"/></svg>&nbsp;Free US Shipping on $75+</a>
<a href="https://1.envato.market/dvQG2" target="_blank" class="nasa-bold nasa-flex jc">Lifetime Warranty&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="16" height="16"><path fill="#C1694F" d="M21.978 20.424c-.054-.804-.137-1.582-.247-2.325-.133-.89-.299-1.728-.485-2.513-.171-.723-.356-1.397-.548-2.017-.288-.931-.584-1.738-.852-2.4-.527-1.299-.943-2.043-.943-2.043l-3.613.466s.417.87.868 2.575c.183.692.371 1.524.54 2.495.086.49.166 1.012.238 1.573.1.781.183 1.632.242 2.549.034.518.058 1.058.074 1.619.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989-.074.6-.182 1.197-.311 1.789-.185.848-.413 1.681-.67 2.475-.208.643-.431 1.261-.655 1.84-.344.891-.69 1.692-.989 2.359-.502 1.119-.871 1.863-.871 2.018 0 .49.35 1.408 2.797 2.02 3.827.956 4.196-.621 4.196-.621s.243-.738.526-2.192c.14-.718.289-1.605.424-2.678.081-.642.156-1.348.222-2.116.068-.8.125-1.667.165-2.605.03-.71.047-1.47.055-2.259.002-.246.008-.484.008-.737 0-.64-.03-1.261-.071-1.872z"/><path fill="#D99E82" d="M18.306 30.068c-1.403-.244-2.298-.653-2.789-.959-.344.891-.69 1.692-.989 2.359.916.499 2.079.895 3.341 1.114.729.127 1.452.191 2.131.191.414 0 .803-.033 1.176-.08.14-.718.289-1.605.424-2.678-.444.157-1.548.357-3.294.053zm1.06-4.673c-1.093-.108-1.934-.348-2.525-.602-.185.848-.413 1.681-.67 2.475.864.326 1.881.561 2.945.666.429.042.855.064 1.27.064.502 0 .978-.039 1.435-.099.068-.8.125-1.667.165-2.605-.628.135-1.509.21-2.62.101zm.309-2.133c.822 0 1.63-.083 2.366-.228.002-.246.008-.484.008-.737 0-.641-.029-1.262-.071-1.873-.529.138-1.285.272-2.352.286-1.084-.005-1.847-.155-2.374-.306.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989.763.161 1.605.253 2.461.257l.062.001zm-.249-4.577c.825-.119 1.59-.333 2.304-.585-.133-.89-.299-1.728-.485-2.513-.496.204-1.199.431-2.181.572-.91.132-1.605.124-2.129.077.1.781.183 1.632.242 2.549.152.006.29.029.446.029.588.001 1.2-.043 1.803-.129zm1.271-5.116c-.288-.931-.584-1.738-.852-2.4-.443.222-1.004.456-1.737.659-.795.221-1.437.309-1.951.339.183.692.371 1.524.54 2.495.681-.068 1.383-.179 2.094-.376.679-.188 1.31-.44 1.906-.717z"/><path fill="#3E721D" d="M32.61 4.305c-.044-.061-4.48-5.994-10.234-3.39-2.581 1.167-4.247 3.074-4.851 5.535-1.125-1.568-2.835-2.565-5.093-2.968C6.233 2.376 2.507 9.25 2.47 9.32c-.054.102-.031.229.056.305s.217.081.311.015c.028-.02 2.846-1.993 7.543-1.157 4.801.854 8.167 1.694 8.201 1.702.02.005.041.007.061.007.069 0 .136-.028.184-.08.032-.035 3.22-3.46 6.153-4.787 4.339-1.961 7.298-.659 7.326-.646.104.046.227.018.298-.07.072-.087.075-.213.007-.304z"/><path fill="#5C913B" d="M27.884 7.63c-4.405-2.328-7.849-1.193-9.995.22-2.575-.487-7.334-.459-11.364 4.707-4.983 6.387-.618 14.342-.573 14.422.067.119.193.191.327.191.015 0 .031-.001.046-.003.151-.019.276-.127.316-.274.015-.054 1.527-5.52 5.35-10.118 2.074-2.496 4.55-4.806 6.308-6.34 1.762.298 4.327.947 6.846 2.354 4.958 2.773 7.234 7.466 7.257 7.513.068.144.211.226.379.212.158-.018.289-.133.325-.287.02-.088 1.968-8.8-5.222-12.597z"/></svg>&nbsp;Easy Returns&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="16" height="16"><path fill="#C1694F" d="M21.978 20.424c-.054-.804-.137-1.582-.247-2.325-.133-.89-.299-1.728-.485-2.513-.171-.723-.356-1.397-.548-2.017-.288-.931-.584-1.738-.852-2.4-.527-1.299-.943-2.043-.943-2.043l-3.613.466s.417.87.868 2.575c.183.692.371 1.524.54 2.495.086.49.166 1.012.238 1.573.1.781.183 1.632.242 2.549.034.518.058 1.058.074 1.619.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989-.074.6-.182 1.197-.311 1.789-.185.848-.413 1.681-.67 2.475-.208.643-.431 1.261-.655 1.84-.344.891-.69 1.692-.989 2.359-.502 1.119-.871 1.863-.871 2.018 0 .49.35 1.408 2.797 2.02 3.827.956 4.196-.621 4.196-.621s.243-.738.526-2.192c.14-.718.289-1.605.424-2.678.081-.642.156-1.348.222-2.116.068-.8.125-1.667.165-2.605.03-.71.047-1.47.055-2.259.002-.246.008-.484.008-.737 0-.64-.03-1.261-.071-1.872z"/><path fill="#D99E82" d="M18.306 30.068c-1.403-.244-2.298-.653-2.789-.959-.344.891-.69 1.692-.989 2.359.916.499 2.079.895 3.341 1.114.729.127 1.452.191 2.131.191.414 0 .803-.033 1.176-.08.14-.718.289-1.605.424-2.678-.444.157-1.548.357-3.294.053zm1.06-4.673c-1.093-.108-1.934-.348-2.525-.602-.185.848-.413 1.681-.67 2.475.864.326 1.881.561 2.945.666.429.042.855.064 1.27.064.502 0 .978-.039 1.435-.099.068-.8.125-1.667.165-2.605-.628.135-1.509.21-2.62.101zm.309-2.133c.822 0 1.63-.083 2.366-.228.002-.246.008-.484.008-.737 0-.641-.029-1.262-.071-1.873-.529.138-1.285.272-2.352.286-1.084-.005-1.847-.155-2.374-.306.006.204.015.401.018.611.01.656-.036 1.323-.118 1.989.763.161 1.605.253 2.461.257l.062.001zm-.249-4.577c.825-.119 1.59-.333 2.304-.585-.133-.89-.299-1.728-.485-2.513-.496.204-1.199.431-2.181.572-.91.132-1.605.124-2.129.077.1.781.183 1.632.242 2.549.152.006.29.029.446.029.588.001 1.2-.043 1.803-.129zm1.271-5.116c-.288-.931-.584-1.738-.852-2.4-.443.222-1.004.456-1.737.659-.795.221-1.437.309-1.951.339.183.692.371 1.524.54 2.495.681-.068 1.383-.179 2.094-.376.679-.188 1.31-.44 1.906-.717z"/><path fill="#3E721D" d="M32.61 4.305c-.044-.061-4.48-5.994-10.234-3.39-2.581 1.167-4.247 3.074-4.851 5.535-1.125-1.568-2.835-2.565-5.093-2.968C6.233 2.376 2.507 9.25 2.47 9.32c-.054.102-.031.229.056.305s.217.081.311.015c.028-.02 2.846-1.993 7.543-1.157 4.801.854 8.167 1.694 8.201 1.702.02.005.041.007.061.007.069 0 .136-.028.184-.08.032-.035 3.22-3.46 6.153-4.787 4.339-1.961 7.298-.659 7.326-.646.104.046.227.018.298-.07.072-.087.075-.213.007-.304z"/><path fill="#5C913B" d="M27.884 7.63c-4.405-2.328-7.849-1.193-9.995.22-2.575-.487-7.334-.459-11.364 4.707-4.983 6.387-.618 14.342-.573 14.422.067.119.193.191.327.191.015 0 .031-.001.046-.003.151-.019.276-.127.316-.274.015-.054 1.527-5.52 5.35-10.118 2.074-2.496 4.55-4.806 6.308-6.34 1.762.298 4.327.947 6.846 2.354 4.958 2.773 7.234 7.466 7.257 7.513.068.144.211.226.379.212.158-.018.289-.133.325-.287.02-.088 1.968-8.8-5.222-12.597z"/></svg>&nbsp;Free US Shipping on $75+</a>
```


# Top Bar

![Header Layout 1](/files/uFHMoxzOxz4B8O7ZHgHX)

## How to change the Top Bar Content?

### <mark style="color:blue;">**1. Top Bar left**</mark><mark style="color:blue;">:</mark>&#x20;

Currently, the <mark style="color:red;">**Elessi**</mark> theme just includes the top bar in case you choose: \ <mark style="color:green;">**Header Layout 1, Header Layout 2, Header Layout 3, Header Layout 4 and Header Layout 6**</mark>

#### **Simply, please follow these steps:**

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options → Static Block** and edit **Top Bar** or **Add new Block** if not exists

![](/files/znqSc59O49Sf2eHIKF9x)

<mark style="color:blue;">**Step 2**</mark>**&#x20;-** Copy and add this code to change the content for the top bar

```html
<span class="nasa-flex jc">Add anything here or just remove it...</span>
```

![](/files/3ftr4dW3UcgSQkG5MKfJ)

{% embed url="<https://www.youtube.com/watch?v=8pyqhxafOS8>" %}

{% hint style="warning" %}
**NOTE**: If you want to use the <mark style="color:red;">**Elementor**</mark> plugin to build the top bar, please view a guidepost [<mark style="color:blue;">**here**</mark>](/elementor/elementor-elements/static-blocks)
{% endhint %}

### <mark style="color:green;">**2**</mark>*<mark style="color:green;">**.**</mark>*<mark style="color:green;">**&#x20;**</mark><mark style="color:green;">**Top Bar right:**</mark>

#### <mark style="color:green;">**Language Switcher**</mark>

![DEMO](/files/uBuRLcp116Wo125WG05M)

* Install [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/) to set your language switcher
* Go to **Theme Options → Header Global** to enable this option

![](/files/Mnoaq5dMnDH4Dg5ixN0W)

#### <mark style="color:green;">**Currency Switcher**</mark>

![DEMO](/files/lM2TQyq9a66B1qZZeTiR)

* Install [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/)**.**
* Please view the guide documentation [<mark style="color:blue;">**here**</mark>](https://wpml.org/documentation/related-projects/woocommerce-multilingual/multi-currency-support-woocommerce/) to know how to set up the WooCommerce Currency Switcher feature (included in the [<mark style="color:blue;">**WPML**</mark>](https://wpml.org/) package)
* Go to **Theme Options → Header Global** to enable this option

![](/files/dlKfksGrEkEiMOTvGVWi)

### <mark style="color:blue;">**3. Show/Hide Top Bar**</mark>

(Go to **Header Global)**

![](/files/tALLbrShHTVSK72qIDTs)


# Set Up Logo

![Header Layout 6](/files/dtOaBjOQZQ6ZQgJTGLrs)

#### <mark style="color:red;">**Elessi**</mark>**&#x20;theme includes options to upload and custom your site Logo such as logo width, logo height, and logo max height.**

Simply go to **Theme Options** **→** **Logo and Favicon** > upload your logo:

![](/files/lUrrtPvsizy9DOzWz4tk)


# The Block Under Header

![](/files/fwtIRZSX9j0rmnwvJMpe)

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**nasa\_block**)

![](/files/cYzZrlwvlVOd6edCp7lT)

<mark style="color:blue;">**Step 1**</mark> - Go to **Static Blocks** **→** Add New Block to create content

![](/files/5QxWnTwITQ5akEuyjLtx)

<mark style="color:blue;">**Step 2**</mark> - Navigate to **Theme Options** **→** **Header and Footer** to enable **The Block Under Header** section

![](/files/X5UwuKf596e1NZOgJSU4)

{% hint style="warning" %}
**NOTE**: If you want to use the <mark style="color:red;">**Elementor**</mark> plugin to build the Block Under Header, please view a guidepost [<mark style="color:blue;">**here**</mark>](/elementor/elementor-elements/static-blocks)
{% endhint %}


# Header Transparency

![](/files/-MVz_orYj3IRp68vQcZ1)

Simply go to **Dashboard** **→** **Pages** **→** **Edit Page (in Dashboard)**

<figure><img src="/files/2sLdVZ38qwiexeet2PHl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wSWbaVSWgDdgC4lmOv05" alt=""><figcaption></figcaption></figure>


# Sticky Header

![](/files/s8qkqgmMOXl518D05loH)

Simply go to **Theme Options** **→** **Header Global**

![](/files/z6kLcCYFsTaeLPnCVYP8)


# Header Builder


# By the WP Bakery

#### **To build a header builder with the&#x20;**<mark style="color:blue;">**WPBakery Page Builder**</mark>**&#x20;plugin, please follow these steps:**

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Header**)

![](/files/0eQc9cv8dsGe9fMQkPuy)

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options → Header Builder (WPBakery) → Add New Header**

![Click Backend Editor](/files/SYHqXoDPkDFgVgPfhibd)

<mark style="color:blue;">**Step 2**</mark> - Drag and drop any elements here to insert the content of your header and then **→** **Publish the Header**

![](/files/pOrmFuMObBvhv1fDCiIG)

<mark style="color:blue;">**Step 3**</mark> - Navigate to **Theme Options** **→** **Header Global** to select your **Header Builder**

![](/files/DCrudj2GMKwtD6m6QkV7)


# By the Elementor&#x20;

#### **To build a header builder with the&#x20;**<mark style="color:red;">**Elementor**</mark>**&#x20;plugin, please follow these steps:**

**First**, be sure your site has installed the <mark style="color:blue;">**Elementor - Header, Footer & Blocks**</mark> plugin\
(From **Theme Options** **→** **Install Plugins**)

![Elementor - Header, Footer & Blocks](/files/TZq9cda8ukirz1RjvHxX)

<mark style="color:blue;">**Step 1**</mark> - Simply navigate to **Theme Options → Elementor** **Header & Footer Builder** to add a new header

![](/files/zxypB2hy2iiidBFaVMOq)

<figure><img src="/files/R9UGG2zbz4jP4KyS6wD0" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step 2**</mark> - Drag and drop any elements here to build the content of your header

![Drop and Drag any elements of the Elementor plugin to build Header](/files/zhpOvle7VfEia93IwRuk)

<mark style="color:blue;">**Step 3**</mark>**&#x20;-** Final, go to **Theme Options** **→** **Header Global** to select your **Header Builder by Elementor**

<figure><img src="/files/W8t5XBo5ERWxamOQEhKT" alt=""><figcaption></figcaption></figure>


# Menus


# Menus & Locations

### **1. Menus**

#### The theme has 3 available menu locations:

* **Top Menu - Only show level 1:** Located in the right top bar content
* **Main Menu:** Located in the main page header
* **Vertical Menu:** Located in the left vertical menu (include on <mark style="color:green;">**Header Layout 4**</mark> and <mark style="color:green;">**Layout 6**</mark>)

You can manage and create menus by navigating to **Appearance** **→** **Menu**

1. Click the **create a new menu** link
2. Enter a name for the menu (this can be anything e.g "Main Menu")
3. Click the **Create Menu** button

![](/files/PLSeQWLeu4rXYFa2TB2e)

### **2. Locations**

#### Assigning Menu Locations

After creating a menu you can assign it to one of the theme's menu locations.\
Click the **Manage Locations** tab and assign the menus to their appropriate locations.

![](/files/d8fAUxnBz4uWGM61zGy4)


# Create New Menu

### Following these steps to create a menu:

<mark style="color:blue;">**Step 1**</mark> – Go to **Appearance** **→** **Menus**

<mark style="color:blue;">**Step 2**</mark> – Click the **create a new menu** link to create a new menu

![](/files/PLSeQWLeu4rXYFa2TB2e)

<mark style="color:blue;">**Step 3**</mark> – Select items from the left meta boxes and click **Add to Menu**

<mark style="color:blue;">**Step 4**</mark> – On the right, feel free to drag and drop menu items to organize them

![](/files/IEAF3La5ta12SWKNuvQH)

By default WordPress only shows the basic menu items, but you can scroll to the top page, click on "Screen Options" and check the section menu you want to show. Such as Product Categories, Products.

![](/files/u4t5stYZaquUtqHUg93o)

<mark style="color:blue;">**Step 5**</mark> – When you are done moving menu items, check a menu location at the bottom of the page

<mark style="color:blue;">**Step 6**</mark> – Click **Save Menu**


# Vertical Menu Float

This article will guide you to create Vertical Menu Float

<figure><img src="/files/EdRfX4vb7Bht8El0Szwx" alt=""><figcaption></figcaption></figure>

link homepage: <https://elessi.nasatheme.com/elementor/homepage-hand-tool/>

First you need to create a menu in Appearance -> MenMenu. Here you can add icon or svg to display in menu<br>

<figure><img src="/files/Mf5FvxXjbF0iVTv60kWY" alt=""><figcaption></figcaption></figure>

Next go to theme options -> header -> menu option -> vertical float menu. Turn on the feature and select the menu you just created to complete the installation.

<figure><img src="/files/oiKpijI1Xv0RFPNdm206" alt=""><figcaption></figcaption></figure>


# Config Mega Menu

The theme adds some options to the menu item. They allow you to config the mega menu. Click the Settings link in every menu item to show options.

{% embed url="<https://youtu.be/FNxiRLBWGaM>" %}

## Setting Mega Menu

![](/files/Jrs9LbcqosWUK8uRSg82)

* Mega Menu and Full-Width tab. Only top-level items can have this tab
* The width of the mega menu. It is optional. The default value is 100%. It affects the top-level items only
* The columns of the sub-menu.
* Increase or decrease the number of the columns.

### 1. Mega Menu Image

#### **Image Mega Menu tab and some options of the image such as position, title, custom class ...**

![](/files/ZdEUt1sq1YqAvl49foNt)

### 2. Mega Menu Icon

![](/files/4GzYmHAofJ0mDtXeT9F5)

1. Select Icon menu
2. Click here if you want to remove the icon selected
3. Search icons.
4. Icons avaiable to select.

![](/files/OHEA5l4njnY0jjMIvZ23)

### 3. Sub Menu

![](/files/zfnkpHtNaHooRvHuZR5d)


# How to set up Mega menu horizontal

![](/files/2FiOGBuionz0qR6d22j4)

### Here is the instruction you can follow if you desire to set up a mega menu horizontal for your site:

<mark style="color:blue;">**Step 1**</mark> - Simply, navigate to **Appearance** **→** **Menu**

<mark style="color:blue;">**Step 2**</mark> - Choose **Main Menu** and click Select button

<mark style="color:blue;">**Step 3**</mark> - Go to Shop (Our tutorial video shows an example with the menu item **"SHOP"**), You can do it similarly with other menus. Imagine that we have Shop and inside of it, we need to have four sub-menus. \
Click on **Mega Menu** and **Full-Width** option if you want to display the full-screen mega menu

![](/files/b3vcVBkvehy9yc7cvTAB)

<mark style="color:blue;">**Step 4**</mark> - Drag and drop to have 4 submenus

![](/files/xZ3TZWaEgKR393NbgzWA)

#### **In addition, our theme is designed by default with 3 levels of sub-menu, if you want to display sub-menu with 4 levels , please insert the following code in / wp-content / themes / elessi-theme-child / functions .php:**

{% tabs %}
{% tab title="PHP" %}
{% code title="function" %}

```php
add_filter ('nasa_max_depth_main_menu','custom_max_depth_menu');

function custom_max_depth_menu ($depth) {

return 4; // Return max depth menu - Default is 3
}

/* ====================== */
```

{% endcode %}
{% endtab %}
{% endtabs %}

### <mark style="color:red;">RESULT</mark>

![](/files/7vI1AomHDPFxoEE5Lw8U)

![Please change the number here if you want to up any sub-menu levels](/files/-MlFgZaXq2szzOvmAogp)


# How to set up Mega menu vertical

![](/files/DdWTi0eRhFXDBp4196P5)

### Here is the instruction you can follow if you desire to set up a menu vertical for your site:

<mark style="color:blue;">**Step 1**</mark> - Simply, navigate to **Appearance** **→** **Menu**

<mark style="color:blue;">**Step 2**</mark> - Create a new menu that you want to use do the **vertical menu** and click Select button

<mark style="color:blue;">**Step 3**</mark> - On the right, feel free to drag and drop menu items to organize them

![](/files/4evKlbkPqrZFK4rLIkzZ)

<mark style="color:blue;">**Step 4**</mark> – When you are done moving menu items, check a menu location at the bottom of the page and click **Save Menu**

![](/files/k7UtVHqNtXwfOS8kSisQ)

{% hint style="warning" %}
**NOTE:** The vertical menu only works to <mark style="color:green;">**Header Layout 4**</mark> and <mark style="color:green;">**Header Layout 6**</mark>, to set up the vertical menu please follow these steps:
{% endhint %}

Go to **Appearance** **→ Theme Options → Header and Footer**

![](/files/eK1atODkpU6mS0Z9xZyW)

#### <mark style="color:red;">**Elessi**</mark>**&#x20;theme is designed by default with 3 levels of sub-menu, if you want to display sub-menu with 4 levels , please insert the following code in / wp-content / themes / elessi-theme-child / functions .php:**

{% tabs %}
{% tab title="PHP" %}
{% code title="function" %}

```php
add_filter('nasa_max_depth_vertical_menu','custom_max_depth_menu');

function custom_max_depth_menu($depth) {

return 4; // Return max depth menu – Default is 3

}

/* ===================== */
```

{% endcode %}
{% endtab %}
{% endtabs %}

### <mark style="color:red;">RESULT</mark>

![](/files/zBfNEsG8kOeqhazIJZrW)

![Please change the number here if you want to up any sub-menu levels](/files/-MlFfiAfw7ICVY0O-JD0)


# Footer Layout


# Footer WP Bakery

#### **The&#x20;**<mark style="color:red;">**Elessi**</mark>**&#x20;theme includes available Footer templates (Built by the&#x20;**<mark style="color:blue;">**WP Bakery**</mark>**&#x20;plugin) and allows the creation of footers of different layouts and colors.**&#x20;

Simply to set up the footer go to **Theme Options** **→** **Footer Global**\
(Select **Builder** Mode)

![](/files/QyfrM76XfnOlz0KDFDEu)

### <mark style="color:red;">DEMO</mark>

![Footer Light 1](/files/SNhdFgMrKGzOJK7mI6EN)

![Footer Light 2](/files/mrQwtvyFk8VxoyFl3kel)

![Footer Light 3](/files/6o98loideleu2fIIs3zO)

![Footer Dark](/files/zr8MroHotfNRzEi1bOFi)


# Footer Light 1

![](/files/w3dnqKFs86Hh9ni9IbpZ)

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Footer**)

![](/files/KTsoDespoi1Dc2CCRheU)

Next, navigate to **Theme Options > Footer Builder (WPBakey)** to control these sections

![](/files/hin2a0GyChU23TBviLhc)

![Click Backend Editor to drop and drag elements](/files/fSKU27JXOjMnv51xPn8X)

#### <mark style="color:green;">**1. How to set up logo**</mark>

![](/files/QUV2jpGRCakF2dASltlh)

#### <mark style="color:green;">**2. How to change the contact form**</mark>

![](/files/z80VSfqfoCOfkQjPYUCk)

#### <mark style="color:green;">**3. How to change the icon social network**</mark>

![](/files/XH0o0e7d281UdPHQV6dp)

#### <mark style="color:green;">**4.1 How to change the content of Menu 1 Level**</mark>

1. Please view [<mark style="color:blue;">**here**</mark>](/header-and-menu/menus/create-new-menu) to know how to create your Menu
2. Select your menu here

![](/files/KQZbY7IhA1EZ70fgy2FP)

#### <mark style="color:green;">**4.2 How to change Menu 1 at the type inline-block**</mark>

Simply, you just need to copy this class:

```html
nasa-menu-inline
```

![](/files/HrtwjM9fyoOyeWyE3Ujp)


# Footer Light 2

![](/files/zyCauCcA3jQxn8dF5PYZ)

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Footer**)

![](/files/KTsoDespoi1Dc2CCRheU)

Next, navigate to **Theme Options > Footer Builder (WPBakery)** to control these sections:

![](/files/7xOWeY93IIsmWLorYSMl)

![Click Backend Editor to drop and drag elements](/files/2f5WFEiE2m53ZxZG5SzH)

#### <mark style="color:green;">**1. How to set up logo**</mark>

![](/files/yPQQemKIgmgubCt31Cyy)

#### <mark style="color:green;">**2. How to change the icon social network**</mark>

![](/files/XH0o0e7d281UdPHQV6dp)

#### <mark style="color:green;">**3. How to change the contact form**</mark>

![](/files/Bw9lJXFs5RgBfByGDK8g)

#### [<mark style="color:green;">**4**</mark>. <mark style="color:green;">**How to change the content of Menu 1 Level**</mark>](https://elessi-docs.nasatheme.com/footer/footer-layout/footer-wp-bakery/pages/FhuSdacuOMQh0KR3bqyy#4.1-how-to-change-the-content-of-menu-1-level)


# Footer Light 3

![](/files/o65KSWJizddlY1CFvvTu)

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Footer**)

![](/files/KTsoDespoi1Dc2CCRheU)

Next, navigate to **Theme Options > Footer Builder (WPBakery)** to control these sections

![](/files/ESiOfGoIq9GeaLWPUY7d)

![](/files/mhI1eupPugg9VALFFkLM)

![](/files/XH2fFHoDU1KYjC9f0RNl)

#### <mark style="color:green;">**1. How to change the icon social network**</mark>

![](/files/XH0o0e7d281UdPHQV6dp)

#### [<mark style="color:green;">2.</mark> <mark style="color:green;"></mark><mark style="color:green;">**How to change the content of Menu 1 Level**</mark>](https://elessi-docs.nasatheme.com/footer/footer-layout/footer-wp-bakery/pages/FhuSdacuOMQh0KR3bqyy#4.1-how-to-change-the-content-of-menu-1-level)


# Footer Widgets

#### **The&#x20;**<mark style="color:red;">**Elessi**</mark>**&#x20;theme includes available Footer templates (Build by Widgets)**

{% hint style="warning" %}
This feature just works when you have installed the <mark style="color:red;">**Elementor**</mark> and <mark style="color:blue;">**Elementor Header & Footer Builder**</mark> plugins.
{% endhint %}

**First** - be sure that you have enabled this option\
(From **Theme Options** **→** **Footer Global**)

![](/files/d7Sx63p1C5aaYQcicX4O)

<mark style="color:blue;">**Step 1**</mark> - Simply go to **Appearance** **→** **Widgets** to control this section

![You can drag and drop any widgets to build the footer](/files/JB24v36800Iadnll1Rd6)

<mark style="color:blue;">**Step 2**</mark> - Set widgets to the position suitable on <mark style="color:red;">**Elessi**</mark> theme has been available design:

![Footer Light 1](/files/Rq4XBLsXYZh7T2LLXyvn)

![ Footer light 2](/files/p2q3QbBqjDy2w1QCbx0J)

![Footer Light 3](/files/jyPlpbosj3diwpoNyWcQ)

<mark style="color:blue;">**Step 3**</mark> - Final, navigate to **Theme Options** **→** **Footer Global** to select your footer\
(Select **Build-in** Mode)

![](/files/e4lmvN4MgijDEn0ZVi1v)


# Footer Elementor

#### **The&#x20;**<mark style="color:red;">**Elessi**</mark>**&#x20;theme includes available Footer templates (Built by the&#x20;**<mark style="color:red;">**Elementor**</mark>**&#x20;plugin) and allows the creation of footers of different layouts and colors.**

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options → Elementor - Header, Footer & Blocks** to edit any available footer. Here we get "*The Footer Light 2*" as an example:

![1](/files/7ajWoJkY7NNDnw35aC6X)

![2](/files/5nWstc0h4ktPuOqQfoyc)

<mark style="color:blue;">**Step 2**</mark> - Navigate to **Theme Options** **→** **Footer Global**\
(Select **Elementor Builder** Mode)

![](/files/PzM3L6ugCxInq0yZ7DWD)


# Footer Builder


# By the WP Bakery

### **1. Add New Footer**

In <mark style="color:red;">**Elessi**</mark> theme, these steps below that allow you to create a footer area as on our demo. Simply drag and drop elements of the <mark style="color:blue;">**Wp Bakery**</mark> plugin then edit them:

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Footer**)

![](/files/KTsoDespoi1Dc2CCRheU)

<mark style="color:blue;">**Step 1**</mark> - Navigate to **Footer Builder** **→** **Add New Footer**\
Enter title for the footer and click the <mark style="color:blue;">**Backend Editor**</mark> button:

![](/files/u6tdSkcVmrE9yrVHdDLe)

<mark style="color:blue;">**Step 2**</mark> - Search, drag and drop elements like Menu 1 level, Contact info, Text block then **→ Publish Footer**

![](/files/pOrmFuMObBvhv1fDCiIG)

### 2. Footer Option

Navigate to **Theme Options → Footer Global** to select your footer\
(Select **Builder** Mode)

![](/files/RGtchwpBqerGA2vHscqB)


# By the Elementor

#### **To create a new footer with the&#x20;**<mark style="color:red;">**Elementor**</mark>**&#x20;plugin, please follow these steps:**&#x20;

**First**, be sure your site has installed the <mark style="color:blue;">**Elementor - Header, Footer & Blocks**</mark> plugin\
(From **Appearance** **→** **Install Plugins**)

![ Elementor - Header, Footer & Blocks](/files/TZq9cda8ukirz1RjvHxX)

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options → Elementor - Header, Footer & Blocks** to add new footer

![](/files/NIpnTw840vhXCfQE4moI)

![](/files/NEThOHgtRBNgJj1PySFT)

<mark style="color:blue;">**Step 2**</mark> - Edit your footer with the <mark style="color:red;">**Elementor**</mark> plugin then **→** **Publish**

![](/files/X05ZeUBCTVyX0fq5Ua4Z)

<mark style="color:blue;">**Step 3**</mark> - Final go to **Theme Options** **→** **Footer Global** to select your footer\
(Select **Elementor Builder** Mode)

![](/files/PzM3L6ugCxInq0yZ7DWD)


# Mobile Footer

#### **Footer Mobile is available for mobile devices (Created by the&#x20;**<mark style="color:blue;">**WP Bakery**</mark>**&#x20;and&#x20;**<mark style="color:red;">**Elementor**</mark>**&#x20;plugin)**

![Footer Mobile](/files/LDd8z69OEywCdKW4gFCa)

1. [<mark style="color:blue;">**Built by the WP Bakery**</mark>](/footer/mobile-footer/by-the-wpbakey)
2. [<mark style="color:blue;">**Built by the Elementor**</mark>](/footer/mobile-footer/by-the-elementor)


# By the WP Bakery

**First** - go to **WPBakery Page Builder** > **Role Manager** and under the user roles, choose the post type is Custom and check the post type you want to use the <mark style="color:blue;">**WPBakery Page Builder**</mark> (**Footer**)

![](/files/KTsoDespoi1Dc2CCRheU)

<mark style="color:blue;">**Step 1**</mark> - Simply, go to **Footer Builder** **→** **Footer Mobile** to control this section

![1](/files/dhFWe3r2L6vtj7WsF9y4)

![2](/files/PHG2LitWulrxRyQPN2Aa)

<mark style="color:blue;">**Step 2**</mark> - Navigate to **Theme Options → Footer Global** to select the **Footer Mobile Layout**

![1](/files/eyu1pTDX7GmlSr8RIizm)

<mark style="color:blue;">**Step 3**</mark> - Final go to **→ Core Options** to check this feature was activated or not

![2](/files/gkvHqMzTxHcwTSHRtWnO)


# By the Elementor

<mark style="color:blue;">**Step 1**</mark> - Simply go to **Theme Options → Elementor - Header, Footer & Builder** to edit the **Footer Mobile**

![1](/files/Ls4OC9JslzH8nXhuIYhj)

![2](/files/zsRWUbWZTUlBV2Zrj7QI)

<mark style="color:blue;">**Step 2**</mark> - Navigate to **Theme Options → Footer Global** to select the **Footer Mobile Layout**

![1](/files/qBBDUBDCt2YCYxFkvOhQ)

<mark style="color:blue;">**Step 3**</mark> - Final go to **Theme Options → Mobile Layout - tab** to check this feature was activated or not

![2](/files/rdefawf7PMRcYhD9a82G)


# App Simulation Mobile Layout

<figure><img src="/files/e7pdqreW73YrzwQh7z3V" alt=""><figcaption><p><mark style="color:green;"><strong>App Simulation Mobile Layout</strong></mark></p></figcaption></figure>

Simply navigate to **Theme Options** **→** **Mobile Layout**

<figure><img src="/files/OX9XBUIefn3wt8XDbjrB" alt=""><figcaption></figcaption></figure>


# Sticky Add To Cart

![Sticky Add To Cart Mobile](/files/qL5HC1YuLmu6pQdKCt37)

Simply navigate to **Theme Options** **→** **Single Product Page** and set *Only Show Button* for **Sticky Add To Cart In Mobile**

![ ](/files/B8jl5zSbs9ozxnOQyFlz)


# Mobile Bottom Bar

This is a feature built specifically for mobile and includes some utilities

<figure><img src="/files/VXcZdClDsic42okP1Ky5" alt=""><figcaption></figcaption></figure>

To turn it off, Please go to **Theme Options → Mobile Layout → Mobile Bottom Bar**<br>

<figure><img src="/files/ZXLVwvLaNuyuBGTAEPHc" alt=""><figcaption></figcaption></figure>

There will be 2 ways to use Mobile Bottom Bar

w1: This is a built-in feature that cannot be changed - Set Mobile Bottom Bar Content to "**Select**" value

w2: You can create a new Static Block (**WPBakery version**) or Custom Block (**Elementor Header and Footer Builder version**) to build content for the Mobile bottom bar:

You can use the HTML below and change it to what you want

```
<ul class="nasa-bottom-bar-icons nasa-4-columns">
<li class="nasa-bot-item ns-bot-store">
<a class="nasa-bot-icons nasa-bot-icon-shop" href="#" title="Shop">
<svg class="nasa-svg-shop" height="23" width="22" viewBox="0 0 32 32" fill="currentColor">
<g transform="matrix(0.048565, 0, 0, 0.048565, 24.580261, 2.974931)">
<g transform="matrix(1, 0, 0, 1, -518.638794, 10.322351)">
<path d="M 325.775 138.986 L 325.775 3.106 L 226.224 3.106 L 206.439 139.36 C 206.645 170.27 234.133 190.889 268.991 190.889 C 303.978 190.889 325.803 170.085 325.803 139.017 C 325.803 139.007 325.803 138.997 325.803 138.986 L 325.775 138.986 Z M 184.112 137.888 L 203.681 3.106 L 97.891 3.106 L 58.284 139.43 C 58.584 170.266 86.435 190.733 121.233 190.733 C 156.222 190.733 184.07 170.085 184.07 139.017 C 184.07 138.63 184.088 138.254 184.128 137.89 L 184.112 137.888 Z M 594.367 -19.814 C 599.223 -19.831 603.454 -16.894 604.618 -12.712 L 646.637 136.813 C 646.84 137.534 646.943 138.276 646.947 139.019 C 646.947 180.185 613.869 209.926 567.511 209.926 C 531.02 209.926 499.688 193.287 489.208 175.252 C 478.646 193.118 453.202 209.443 416.701 209.443 C 380.201 209.443 352.393 193.307 341.803 175.252 C 331.352 193.145 304.741 212.29 268.25 212.29 C 231.749 212.29 205.105 193.207 194.551 175.252 C 184.058 193.315 157.589 211.144 121.098 211.144 C 74.74 211.144 36.736 180.185 36.736 139.019 C 36.741 138.277 36.843 137.534 37.048 136.813 L 79.14 -12.712 C 80.303 -16.894 84.542 -19.831 89.392 -19.814 L 594.367 -19.814 Z M 348.045 139.207 C 348.045 170.275 381.317 188.935 416.303 188.935 C 450.995 188.935 476.125 170.509 476.599 139.807 L 456.751 3.106 L 348.015 3.295 L 348.015 138.403 C 348.035 138.666 348.045 138.933 348.045 139.207 Z M 499.694 139.017 C 499.694 170.085 533.968 189.636 568.956 189.636 C 603.758 189.636 624.426 170.27 624.721 139.43 L 585.114 3.106 C 587.139 0.878 481.773 1.17 480.014 3.106 L 499.402 136.59 C 499.593 137.337 499.694 138.147 499.694 139.017 Z" style="stroke-width: 0px;"></path> <path d="M 84.471 189.481 L 84.471 477.433 C 84.471 477.433 84.553 498.229 93.5 514.914 C 102.449 531.6 120.513 544.603 156.583 544.603 L 527.101 544.603 C 527.101 544.603 555.31 542.288 573.205 533.941 C 591.1 525.599 599.213 510.85 599.213 477.431 L 599.213 189.48 L 577.499 189.098 L 577.499 477.049 C 577.499 501.307 570.068 508.99 557.08 515.043 C 544.094 521.099 527.101 521.66 527.101 521.66 L 156.583 521.66 C 130.839 521.66 118.528 516.699 112.038 504.589 C 105.541 492.481 105.426 477.431 105.426 477.431 L 105.426 189.48 L 84.471 189.481 Z" style="stroke-width: 0px;"></path> <path d="M 305.173 310.741 C 271.149 310.741 253.821 328.39 245.355 345.327 C 236.885 362.259 237.011 378.904 237.011 378.904 L 237.011 525.004 L 260 525.004 L 260 378.904 C 260 378.904 260.061 367.149 266.204 354.864 C 272.349 342.576 280.805 333.685 305.338 333.685 L 383.276 333.685 C 383.276 333.685 392.741 333.794 405.026 339.942 C 417.314 346.087 428.659 354.397 428.659 378.907 L 428.663 525.007 L 451.275 525.007 L 451.275 378.907 C 451.275 345.025 433.626 327.554 416.689 319.089 C 399.757 310.619 383.112 310.745 383.112 310.745 L 305.173 310.741 Z" style="stroke-width: 0px;"></path>
</g>
</g>
</svg> Shop </a>
</li>
<li class="nasa-bot-item nasa-bot-item-sidebar hidden-tag">
<a class="nasa-bot-icons nasa-bot-icon-sidebar" href="javascript:void(0);" title="Filters" rel="nofollow">
<i class="nasa-icon pe-7s-filter"></i> Filters </a>
</li>
<li class="nasa-bot-item ns-bot-cats">
<a class="nasa-bot-icons nasa-bot-icon-categories filter-cat-icon-mobile" href="javascript:void(0);" title="Categories" rel="nofollow">
<svg width="23" height="23" viewBox="0 0 32 32" fill="currentColor">
<path d="M6.937 21.865c-1.766 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM6.937 27.195c-1.176 0-2.132-0.956-2.132-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M6.937 3.738c-1.766 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM6.937 9.069c-1.176 0-2.132-0.956-2.132-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M6.937 12.779c-1.766 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM6.937 18.11c-1.176 0-2.132-0.957-2.132-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M16 21.865c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM16 27.195c-1.176 0-2.133-0.956-2.133-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M16 3.738c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM16 9.069c-1.176 0-2.133-0.956-2.133-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M16 12.779c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM16 18.11c-1.176 0-2.133-0.957-2.133-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M25.063 21.865c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM25.063 27.195c-1.176 0-2.133-0.956-2.133-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> <path d="M25.063 10.135c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199zM25.063 4.805c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133c-1.176 0-2.133-0.956-2.133-2.133s0.956-2.132 2.133-2.132z"></path> <path d="M25.063 12.779c-1.767 0-3.199 1.432-3.199 3.198s1.432 3.199 3.199 3.199c1.766 0 3.199-1.432 3.199-3.199s-1.433-3.198-3.199-3.198zM25.063 18.11c-1.176 0-2.133-0.957-2.133-2.133s0.956-2.132 2.133-2.132c1.176 0 2.133 0.956 2.133 2.132s-0.956 2.133-2.133 2.133z"></path> </svg> Categories </a></li><li class="nasa-bot-item nasa-bot-item-acc"> <a class="nasa-bot-icons nasa-bot-icon-acc botbar-mobile-acc nasa-login-register-ajax" data-enable="0" href="https://elessi.nasatheme.com/my-account/" title="Account" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="23" height="23" viewBox="0 0 32 32" fill="currentColor"><path d="M16 3.205c-7.067 0-12.795 5.728-12.795 12.795s5.728 12.795 12.795 12.795 12.795-5.728 12.795-12.795c0-7.067-5.728-12.795-12.795-12.795zM16 4.271c6.467 0 11.729 5.261 11.729 11.729 0 2.845-1.019 5.457-2.711 7.49-1.169-0.488-3.93-1.446-5.638-1.951-0.146-0.046-0.169-0.053-0.169-0.66 0-0.501 0.206-1.005 0.407-1.432 0.218-0.464 0.476-1.244 0.569-1.944 0.259-0.301 0.612-0.895 0.839-2.026 0.199-0.997 0.106-1.36-0.026-1.7-0.014-0.036-0.028-0.071-0.039-0.107-0.050-0.234 0.019-1.448 0.189-2.391 0.118-0.647-0.030-2.022-0.921-3.159-0.562-0.719-1.638-1.601-3.603-1.724l-1.078 0.001c-1.932 0.122-3.008 1.004-3.57 1.723-0.89 1.137-1.038 2.513-0.92 3.159 0.172 0.943 0.239 2.157 0.191 2.387-0.010 0.040-0.025 0.075-0.040 0.111-0.131 0.341-0.225 0.703-0.025 1.7 0.226 1.131 0.579 1.725 0.839 2.026 0.092 0.7 0.35 1.48 0.569 1.944 0.159 0.339 0.234 0.801 0.234 1.454 0 0.607-0.023 0.614-0.159 0.657-1.767 0.522-4.579 1.538-5.628 1.997-1.725-2.042-2.768-4.679-2.768-7.555 0-6.467 5.261-11.729 11.729-11.729zM7.811 24.386c1.201-0.49 3.594-1.344 5.167-1.808 0.914-0.288 0.914-1.058 0.914-1.677 0-0.513-0.035-1.269-0.335-1.908-0.206-0.438-0.442-1.189-0.494-1.776-0.011-0.137-0.076-0.265-0.18-0.355-0.151-0.132-0.458-0.616-0.654-1.593-0.155-0.773-0.089-0.942-0.026-1.106 0.027-0.070 0.053-0.139 0.074-0.216 0.128-0.468-0.015-2.005-0.17-2.858-0.068-0.371 0.018-1.424 0.711-2.311 0.622-0.795 1.563-1.238 2.764-1.315l1.011-0.001c1.233 0.078 2.174 0.521 2.797 1.316 0.694 0.887 0.778 1.94 0.71 2.312-0.154 0.852-0.298 2.39-0.17 2.857 0.022 0.078 0.047 0.147 0.074 0.217 0.064 0.163 0.129 0.333-0.025 1.106-0.196 0.977-0.504 1.461-0.655 1.593-0.103 0.091-0.168 0.218-0.18 0.355-0.051 0.588-0.286 1.338-0.492 1.776-0.236 0.502-0.508 1.171-0.508 1.886 0 0.619 0 1.389 0.924 1.68 1.505 0.445 3.91 1.271 5.18 1.77-2.121 2.1-5.035 3.4-8.248 3.4-3.183 0-6.073-1.277-8.188-3.342z"></path></svg> Account </a></li><li class="nasa-bot-item item-other ns-bot-wl"> <a class="nasa-bot-icons nasa-bot-icon-wishlist botbar-wishlist-link" href="javascript:void(0);" title="Wishlist" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="23" height="23" viewBox="0 0 32 32" fill="currentColor"> <path d="M21.886 5.115c3.521 0 6.376 2.855 6.376 6.376 0 1.809-0.754 3.439-1.964 4.6l-10.297 10.349-10.484-10.536c-1.1-1.146-1.778-2.699-1.778-4.413 0-3.522 2.855-6.376 6.376-6.376 2.652 0 4.925 1.62 5.886 3.924 0.961-2.304 3.234-3.924 5.886-3.924zM21.886 4.049c-2.345 0-4.499 1.089-5.886 2.884-1.386-1.795-3.54-2.884-5.886-2.884-4.104 0-7.442 3.339-7.442 7.442 0 1.928 0.737 3.758 2.075 5.152l11.253 11.309 11.053-11.108c1.46-1.402 2.275-3.308 2.275-5.352 0-4.104-3.339-7.442-7.442-7.442v0z"></path>
</svg> Wishlist </a>
<a class="wishlist-link nasa-wishlist-link nasa-flex" href="javascript:void(0);" title="Wishlist" rel="nofollow"><span class="icon-wrap"><i class="nasa-icon wishlist-icon icon-nasa-like"></i><span class="nasa-wishlist-count nasa-mini-number wishlist-number nasa-product-empty">0</span></span><span class="icon-text hidden-tag">Wishlist</span></a>
</li>
</ul>
```

<figure><img src="/files/SNhxJwlrIKNF0C651wz0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/TTeDG1wTvInrs8VDX2Qs" alt=""><figcaption></figcaption></figure>


# General

When you import sample data success, you can create pages with:

### Build page with the <mark style="color:red;">Elementor</mark> plugin

{% content-ref url="/pages/-MVju2Eekq6IZQx9tNrP" %}
[Elementor Elements](/elementor/elementor-elements)
{% endcontent-ref %}

### Build page with the <mark style="color:blue;">WPBakery</mark> plugin

{% content-ref url="/pages/-MVjusM6MKnZQzp2GBUJ" %}
[WPBakery Elements](/wpbakery-page-builder/wpbakery-elements)
{% endcontent-ref %}


# Shop Layout

<mark style="color:red;">**Elessi**</mark> theme supports all the default <mark style="color:blue;">**WooCommerce**</mark> features for the Shop page. \
You can find the available settings for the Shop page in the **Appearance → Theme Options → Archive Products Page**


# Shop Filter

Add filters to your catalog to make it easy for your customers to explore your products.

### <mark style="color:blue;">1. Setting up filters</mark> <a href="#setting-up-filters" id="setting-up-filters"></a>

![](/files/XMYlXMnm8MnOT5N24WbJ)

#### **Filter widgets** <a href="#filter-widgets" id="filter-widgets"></a>

Simply, navigate to **Appearance** **→** **Widgets** and drag your filter widgets to the **Shop Sidebar** position.

![Custom the Shop Sidebar](/files/zUQnZOzvrTEzW9hAI9YO)

#### **The available filters are:**

#### <mark style="color:green;">**Nasa Product Attribute Filter**</mark>.

&#x20;(One widget per attribute to filter. Add attributes to your shop page to make it work)

![](/files/R5u5HupumfvHbC5m1Gsu)

#### <mark style="color:green;">**Nasa Product Categories**</mark>

![](/files/WcBrmkMmAAeo1gcrmB0R)

#### <mark style="color:green;">**Nasa Product Price Filter (list)**</mark>

![](/files/l2jRC7LuOmsgHzVmzAeY)

#### <mark style="color:green;">**Nasa Product Filter Status**</mark>

![](/files/fOyWKGa2DCmivolgGVxk)

### <mark style="color:blue;">2. Filter position</mark> <a href="#filter-position" id="filter-position"></a>

[<mark style="color:red;">**Click here to know How to set up this feature ...**</mark>](/shop-page/shop-layout/sidebar)

### <mark style="color:blue;">**3. Variations Swatches**</mark>

**First**, add your color attributes in **Products → Attributes** and assign that color attributes to your products.

Go to **Appearance → Widgets** and add the **Nasa Product Attribute Filter**

Select the **Attribute** and Display Type. In Attributes List and Button display each **color** with its name. Select shows only the color.

![](/files/gF1fiVnxc2dy6ykUdyri)

### <mark style="color:red;">RESULT</mark>

![](/files/9fRF32BRZ7qIyhvGHKW0)


# Sidebar

![Top Bar Layout 1](/files/-MWnfPlDm2UeX_fvMmkG)

![Classic](/files/W8uDd6rDe1JpzCLhkOdZ)

![Left Sidebar Off-Canvas](/files/-MWnhJ4-9BoOAALr1ddQ)

Simply go to **Appearance** **→ Theme Options → Archive Products** **Page**

![](/files/XNAeM02OW1h8UvDeq8BO)


# Product Hover Styles

#### <mark style="color:red;">**Click here and hover to any product to show results:**</mark>

{% embed url="<https://elessi.nasatheme.com/product-category/fashions?effect-product=hover-top-to-bottom>" %}

Simply go to **Theme Options** **→ Product Global Options**

![](/files/odSMD4f86aRcp1Opyl0I)


# Product Card Styles

![DEMO Style 3](/files/HwFoYp7bDKix7uqomzi7)

Simply go to **Theme Options** **→** **Product Global Options**

![](/files/6d2xf5itJ9gnqAQaNdZR)


# Pagination Layout

![Ajax Load More](/files/-MWnc0N_gPQRcYpzlbfI)

![Infinite Scroll](/files/-MWnY7s4D121CQQS75k5)

Simply, go to **Theme Options → Archive Products** **Page**

![](/files/kvyStEd73VIDgm8CiGPX)


# Breadcrumb

![](/files/cTD9eYRDXc1MuQAax8tC)

## **1. Set Breadcrumb for all pages**

Go to **Theme Options** → **Breadcrumb**&#x20;

<figure><img src="/files/kx3jGHamReiGR35ZVGPm" alt=""><figcaption></figcaption></figure>

## **2. Override Breadcrumb for each Category**

In addition, you can override the breadcrumb each Category - applied for **Root Product Categories** (Parent=0)

Go to **Dashboard** → **Products**  → **Categories** → **Edit** **Categories**

![](/files/8vwQYNay8EffYIW5uctv)

#### <mark style="color:red;">RESULT</mark>

![](/files/STO8NVqJtRItzSmq7EM2)

## 3. **Override Breadcrumb for each Page**

**Step 1:** Go to **Dashboard**  → **Pages** → **Edit the page** that you want to override

<figure><img src="/files/BzG8BN3H0zSXHYtp3uS5" alt=""><figcaption></figcaption></figure>

**Step 2:** Click the Advance Options button at the bottom

<figure><img src="/files/WQCV3dTid1eNMCX7PSVa" alt=""><figcaption></figcaption></figure>

**Step 3:** Scroll down to the Breadcrumb section check this option and choose the breadcrumb options for only page like your purpose

<figure><img src="/files/M5ZAwJMuHHvhTGG8jVZG" alt=""><figcaption></figcaption></figure>

**Step 4:** Save the page and try again


# Filter by Levels - Product Group

Group Product - use for Auto Parts, Accesscories demo

### 1. With the Shop Page

![](/files/CMJ8IvWvMBVosbA7jy8m)

#### Simply, to use **Filter Group** on the archive product page, please follow these steps: &#x20;

<mark style="color:blue;">**Step 1**</mark> - Go to **Theme Options** **→** **Product Group**

![](/files/zuNQiOPkUbN6wPrEHtq1)

<mark style="color:blue;">**Step 2**</mark> - Please create groups' taxonomies here:

![](/files/JtQTDChfsqFQiBTQ4dmY)

### 2. With the Archive Products Page

![](/files/t605It0HulSfeYT7BPuy)

#### **You can set override GROUP PRODUCTS for&#x20;**<mark style="color:green;">**Root Product Categories**</mark>**&#x20;(Parent=0) here:**

![](/files/-Mkvnbbgv9aQuH_KWDGm)


# Catalog Mode - Disable Add To Cart

![](/files/i3vMHuIARECRfps9Zdvf)

Simply, go to **Theme Options → Products Global** **Options** then turn on **Catalog Mode - Disable Add To Cart Feature**

![](/files/82uqv5Pgi8PsKv4w2yEX)


# WooCommerce

<mark style="color:red;">**Elessi**</mark>**&#x20;is compatible with the&#x20;**<mark style="color:blue;">**WooCommerce**</mark>**&#x20;plugin and theme documentation includes only basic information to get started. Below you can find links that have additional information about using&#x20;**<mark style="color:blue;">**WooCommerce**</mark>**.**


# Template

* With pages use shortcodes **\[woocommerce\_cart], \[woocommerce\_checkout],**\
  **\[woocommerce\_my\_account].**

#### To change this, please follow the steps below:&#x20;

![1](/files/-Mkvpbu-8Rtu3UzU_60k)

![2](/files/oRKFv6GWtLHviJ8uOhNq)


# Checkout Layouts

#### **There are 2 Checkout styles. You can switch them in the&#x20;**<mark style="color:blue;">**Theme Options**</mark>

![Modern Checkout](/files/IeCyDi2LjTKURI4o42pP)

Simply go to **Theme Options → Product Global Options**

![](/files/XEUCCOAVYQsavC7IJvCv)


# Woocommerce Settings

### **Below is a selection of resources from the official&#x20;**<mark style="color:blue;">**WooCommerce**</mark>**&#x20;documentation that might be helpful:**

* [<mark style="color:blue;">**Installing and Uninstalling**</mark>](https://docs.woocommerce.com/document/installing-uninstalling-woocommerce/) **→ Woocommerce plugin installation page**
* [<mark style="color:blue;">**General Settings**</mark>](https://docs.woocommerce.com/document/configuring-woocommerce-settings/) **→ Configuring WooCommerce page**
* [<mark style="color:blue;">**Products Settings**</mark>](https://docs.woocommerce.com/document/configuring-woocommerce-settings/#section-3) **→ Setting Product Woocommerce page**
* [<mark style="color:blue;">**Tax Settings**</mark>](https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/) **→ Set up Taxes for product Woocommerce**
* [<mark style="color:blue;">**Shipping Settings**</mark>](https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/shipping/) **→ Shipping Setting page**
* [<mark style="color:blue;">**Checkout Settings**</mark>](https://docs.woocommerce.com/document/configuring-woocommerce-settings/#section-11) **→ Checkout Setting page**
* [<mark style="color:blue;">**Account Settings**</mark>](https://docs.woocommerce.com/document/configuring-woocommerce-settings/#section-17) **→ Account setting page**
* [<mark style="color:blue;">**Product Categories, Tags & Attributes**</mark>](https://docs.woocommerce.com/document/managing-product-taxonomies/) **→ Managing type Product Categories page**
* [<mark style="color:blue;">**Coupons**</mark>](https://docs.woocommerce.com/document/coupon-management/) **→ Coupon Management page**


# Adding Products

### **Below is a selection of resources from the official** [<mark style="color:blue;">**WooCommerce documentation**</mark>](https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/) **to help you get started with adding products in WooCommerce:**

* [<mark style="color:blue;">**Adding a Simple product**</mark>](https://docs.woocommerce.com/document/managing-products/#section-5) **→ Add a simple product page**
* [<mark style="color:blue;">**Adding a Grouped product**</mark>](https://docs.woocommerce.com/document/managing-products/#section-11) **→ Add a group product page**
* [<mark style="color:blue;">**Adding types product**</mark>](https://docs.woocommerce.com/document/managing-products/#section-14) **→ Adding and Managing Products page**
* [<mark style="color:blue;">**Adding a Variable product**</mark>](https://docs.woocommerce.com/document/variable-product/) **→ Add and managing variable product**


# Mini Cart - Options

#### Mini Cart - Layout

The theme provides 2 layouts (Light and Dark for the Mini Cart)

<figure><img src="/files/CfWNBkNddvvGS8JmwSQi" alt=""><figcaption></figcaption></figure>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/k7xo9gBSdvbvfUhWEkuT" alt=""><figcaption></figcaption></figure>


# You may be interested in ... - Mini Cart

Enable Display "Cross-Sells" in mini cart

<div align="left"><figure><img src="/files/BtGOjduhnDwg2IuUIKhv" alt=""><figcaption></figcaption></figure></div>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/dWGQwY8kqJlqqAiKjy5E" alt=""><figcaption></figcaption></figure>

#### How to set up Cross-Sells for products?

You can view the WooCommerce's documentation about this:

{% embed url="<https://woo.com/document/related-products-up-sells-and-cross-sells/>" %}

{% hint style="warning" %} <mark style="color:red;">Note: This feature does not apply to mobiles or devices with small screens</mark>
{% endhint %}


# Change variation - Mini Cart

Allows editing variation in the Mini Cart

<figure><img src="/files/eQ74NtYbcYHLJN9Xzofh" alt=""><figcaption></figcaption></figure>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/wJY4FJUtw3ubrDJhpDrl" alt=""><figcaption></figcaption></figure>


# Quantity input - Mini Cart

Allows you to edit the number of products in mini cart

<div align="left"><figure><img src="/files/WCUpmvlDLkNeFbOCSJht" alt=""><figcaption></figcaption></figure></div>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/x2tpWxeHOxB72XrmL07q" alt=""><figcaption></figcaption></figure>


# Subtotal Items - Mini Cart

<div align="left"><figure><img src="/files/KLkI4ehIp3YcPybu2HNg" alt=""><figcaption></figcaption></figure></div>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/5agsh0cwXQ7dab681yq4" alt=""><figcaption></figcaption></figure>


# Note, Shipping, Coupon - Mini Cart

<div align="left"><figure><img src="/files/SjcWIcH03BhiYFrdRGJB" alt=""><figcaption></figcaption></figure></div>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/rEAFzEBd0lIWB9Tv3pCJ" alt=""><figcaption></figcaption></figure>

#### Public Coupons - Mini Cart

In addition, you want to publish some discount codes available in your discount code store

<figure><img src="/files/OeVw0hryAT1yjGoEFV7i" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="/files/wmAUSQ9TVGt6cBugmyiD" alt=""><figcaption></figcaption></figure></div>

Go to **Theme Options → Product Global Options**

<figure><img src="/files/L3FvqMWe27EBGXbAkaZz" alt=""><figcaption></figcaption></figure>

Note: Please input the coupon code you want to publish in the Mini Cart Sidebar (one per line).


# Product Sidebar

This tutorial that can help you setup the Sidebar of Single Product Page

#### **Simply, you can customize sidebar for the single product page here:**

(From **Appearance → Widgets**)

![](/files/XsECrtuCxuN8BFKEnYU6)


# Sidebar Classic

![Left Sidebar Classic](/files/1AMEZexZQieGSmCp9qxh)

Simply go to **Theme Options → Single Product Page**

![](/files/LaRGt8SqnlOrsG9Uynrn)


# Off – Canvas Sidebar

![](/files/jc79isY68EtBywSm1q4s)

Simply, go to **Theme Options → Single Product Page**

![](/files/gyaUy9Qz2BKtu9ahh4IY)


# Single Product Images

This tutorial can help you change the product images layout in the Single Product Page


# Classic

![](/files/5UXZGefGaGvGIB3brd6P)

Simply go to **Theme Options** **→ Single Product Page**

![](/files/3uVu9JxEQn4IwTViC1Nk)


# Gallery Grid - Sticky Info

![](/files/ymw4WdBE81Vj48OU2CnD)

Simply, go to **Theme Options** **→ Single Product Page**

![](/files/zO80bGJLT5birhszBsP5)


# Gallery Grid 2

![](/files/qza4F4R99bv4fxLpuNTD)

\
Simply, go to **Theme Options** **→ Single Product Page**

![](/files/vxAVogJaNXiC9g6GZasf)


# Slider - Full Width

![Slider Full Width](/files/Z30NHLaOUuGiWMXzZbWx)

![Slider Full Width 2](/files/0V3wvfrmFNlWjvT9f9np)

\
Simply, go to **Theme Options** **→ Single Product Page**

![](/files/kCEU6ksZXTzbuLHW15vx)


# Purchase Focus

![](/files/btoi0XCU4ipUrKjI25d7)

Simply, go to **Theme Options** **→ Single Product Page**

![](/files/1cxy4ZkD9FgfKokGF0Uv)


# Background Light

![Background Light 1](/files/T1ruGiFH5aZojAleECqI)

![Background Light 2](/files/NKuQ7ijXiLAqaj0nhZjh)

&#x20;Simply, go to **Theme Options** **→ Single Product Page**

![](/files/UqN8DEkoUyXFzGVz3lQB)


# Product Features

General information on How to create different types of products


# Variation Swatches

A variable product is a product that has more than one option in attributes, for example, color, size, and material. Instruction on how to create an attribute is [<mark style="color:blue;">**here**</mark>](https://docs.woocommerce.com/document/managing-product-taxonomies/) as soon as the necessary attributes are available, a variable product can be created, instructions on how to create a variable product is [<mark style="color:blue;">**here**</mark> ](https://docs.woocommerce.com/document/variable-product/)

By default, variable product attributes are presented as a dropdown in <mark style="color:blue;">**WooCommerce**</mark>. <mark style="color:red;">**Elessi**</mark> theme suggests the option to present the attributes as swatches. Swatches are available in **label**, **color**, or **image** format. Swatches can be configured for global attributes only.

To set a **Color Swatch** type or an **Image Swatch** type of product, your product must be a Variable Product and has corresponding attributes. If those attributes have not been created yet, please follow these steps to know how to add a new attribute.&#x20;

**First** - Be sure that your site has enabled these options:\
(From **Theme Options** **→** **Variation Swatches**)

![](/files/-MlNud06NLdQhrbhdTTg)

### <mark style="color:blue;">1. Colors Attributes</mark>

#### **Swatches in the color format:**

![](/files/3NXOYLYBuK6YZ1Xoyvmb)

<mark style="color:blue;">**Step 1**</mark> - Go to **Products → Attributes***.* In the **Add new attribute** area, fill in the form to create a new color attribute:

![](/files/E7F45ddUfGwnOZLAjrXK)

#### **Swatches are enabled**

To add a new color, fill in the form **Add new Color** name of the color, then select its shown color from **Color Chooser** as below. Finally, remember to click **Add new Color** button:\
Select a product you want and edit it. \
Then go to its Product Data and change it to **Variable Product**.

![](/files/JxhdVehbpvFH4up1fTnX)

<mark style="color:blue;">**Step 2**</mark> - Go to **Attributes** and add color and size attributes to the product with these settings.\
You will then get a result that like this:

![2.1](/files/dKvC03McWCBF0AgtUu4D)

![2.2](/files/tS56NlVAhKhLzvXQ58FF)

<mark style="color:blue;">**Step 3**</mark> - Go to **Variations** and add variation. \
Set a regular price each variation.

![](/files/jVsgr7S1Mu49Yrey5JS6)

### <mark style="color:blue;">2. Image Swatches</mark>

#### **Swatches as an image from product variations:**

![DEMO 1](/files/ngLjgnKMOVUM1cCCmAzg)

![DEMO 2](/files/IAI8QVBsghPfGqvGKGds)

<mark style="color:blue;">**Step 1**</mark> - Go to **Products** **→** **Attributes** **→** **Color** then change the swatch type into Custom Image.&#x20;

![](/files/zOVvL1zPTsZjgZdqjh9y)

#### **Swatches are enabled**

Swatches are enabled: go to **Attribute → Configure Items → Edit → Upload/Add image**. \
Then, you must provide an image for each Variation.

![](/files/SaA27BOAzWm0eX4ZrRSa)

<mark style="color:blue;">**Step 2**</mark> - Save all the changed settings, update your product and to do its Product page to check your product. \
Remember to choose the size first then choose the type color (image).

![](/files/q4OEa6eYV5uODTr97zR5)

<mark style="color:blue;">**Step 3**</mark> - Set a regular price and fill your price in each Variation. \
Also, change its feature image for each color.

![](/files/msdOZzMVmus680JCYVWq)

### <mark style="color:blue;">3. Label Swatches</mark>

#### **Swatches as a Label (Size) from product variations:**

<figure><img src="/files/YEtJlCWArKGVwZSb2zzb" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step 1**</mark> - Go to **Products** **→** **Attributes** **→** **Size** then change the swatch type into Custom **Label**.&#x20;

<figure><img src="/files/Uyh4RwJcm57FlmptW1hd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9hPfHUTdPrqj0RycSZQo" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step 2**</mark> - Save all the changed settings, update your product, and do its Product page to check your product. <br>

<figure><img src="/files/1YHx5npS0aLdtV639PVf" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**Step 3**</mark> - Set a regular price and fill your price in each Variation.&#x20;

<figure><img src="/files/VTb8aDcDKwUdjrsVfA00" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**Guide Clip**</mark>

{% embed url="<https://youtu.be/KC6tT_i3wTY>" %}


# Variation Swatches Styles

#### **How to settings the Color and Label Attribute Style for a single product?**

![](/files/QDckvEyu1paDYAgaDa1b)

### <mark style="color:red;">DEMO</mark>

{% embed url="<https://elessi.nasatheme.com/variation-styles/>" %}

#### **Simply, to set up this feature:**

<mark style="color:blue;">**Step 1**</mark> - Click [<mark style="color:blue;">**here**</mark>](/single-product/product-type/color-image-swatches)

<mark style="color:blue;">**Step 2**</mark> - Go to **Theme Options** **→** **Variation Swatches**

![](/files/HHYfiZUfM0C76aq7kSBo)


# Style 1

![](/files/BRa5N77fz5RiJjRQSGg9)

{% embed url="<https://elessi.nasatheme.com/product/floral-embroidery/?label-attr=small-square-2>" %}

Simply, to set up go to **Theme Options → Variation Swatches**

![](/files/1vLu6qfQDPQenOCjS3R5)


# Style 2

![](/files/nfpv0blzYxo6DZyyQUo1)

{% embed url="<https://elessi.nasatheme.com/product/iphone-11-pro/>" %}

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/Fy1P8OGrMARJWMLcgyp7)


# Style 3

![](/files/Ai2uTw1nH55U9RCAYite)

{% embed url="<https://elessi.nasatheme.com/product/gathered-sleeve/>" %}

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/0tl09UQJDTaQGoU8ppF7)


# Style 4

![](/files/MXE6vSDks1Y9pzOnSwq0)

{% embed url="<https://elessi.nasatheme.com/product/gathered-sleeve/?layout=new&image-layout=single&image-style=slide&color-attr=radio&label-attr=radio>" %}

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/2iZz8Ip8w1Pb1uqNYVWf)


# Style 5

![](/files/Dmxr3AXNqYNG9UvMv4rC)

{% embed url="<https://elessi.nasatheme.com/product/iphone-xs-max-silicone-case/>" %}

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/LCmDWKhituDofIf5qwfT)


# Style 6

![](/files/7kQHrcRRHA9iRoQNaQ1q)

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/BXdygoOSJlb1uogdSV3F)


# Style 7

![](/files/tkjB88NNN3M4QsHo2mQX)

{% embed url="<https://elessi.nasatheme.com/product/gathered-sleeve/?color-attr=small-square&label-attr=small-square-1&image-layout=double&image-style=slide>" %}

Simply, to set up go to **Appearance → Theme Options → Variation Swatches**

![](/files/nmmG0XYc1c7b9Mx327g3)


# Style 8

![](/files/Sb1SX9hmnCWh7trQjsJu)

{% embed url="<https://elessi.nasatheme.com/product/hoodie-slogan/>" %}

![](/files/-M_KQ5Qlf_SACv8SWcng)


# Style 9

<div align="left"><figure><img src="/files/tHVwaAsHLfapLfGnNA76" alt=""><figcaption></figcaption></figure></div>

{% embed url="<https://elessi.nasatheme.com/product/kaws/>" %}

Please go to **Theme Options → Variation Swatches**

<figure><img src="/files/TxY8OejQ7gd69NMgoO4n" alt=""><figcaption></figcaption></figure>


# Encourage purchases

A conversion optimized theme for your store is important in that it can multiply your success without you having to spend more time and money on traffic acquisition.

It's easy to include Single Product FOMOs features *(Fear of Missing out)* on each product as a **Sold Number in period time, Online Visitor counter, Estimated Delivery time, etc...** to persuade customer's to buy. This uses virtual data to increase the feeling of scarcity and speed up a potential purchase.

You can set up the virtual data parameter as you like in the **Theme Options**.

Simply, navigate to **Appearance** **→** **Theme Options** **→** **Promote Sales**

{% content-ref url="/pages/-Mgj-iFcYkEMXbeHLFl-" %}
[Fake Sold, Virtual Sold](/single-product/product-type/encourage-purchases/fake-sold-virtual-sold)
{% endcontent-ref %}

{% content-ref url="/pages/-MgnOFcznkrTNOL9\_FOn" %}
[Bulk Discount - Buy more save more](/single-product/product-type/encourage-purchases/bulk-discount-product)
{% endcontent-ref %}

{% content-ref url="/pages/-MhlYs2E-zG0\_fgaolNa" %}
[Virtual Online Visitor](/single-product/product-type/encourage-purchases/virtual-online-visitor)
{% endcontent-ref %}

{% content-ref url="/pages/-MhlZ6CZ2YL6h6NtAx0S" %}
[Estimated Delivery Time](/single-product/product-type/encourage-purchases/estimated-delivery-time)
{% endcontent-ref %}

{% content-ref url="/pages/3xjjlVYraF5rO4LLCKJn" %}
[Fake Purchase](/single-product/product-type/encourage-purchases/fake-purchase)
{% endcontent-ref %}


# Fake Sold, Virtual Sold

This feature will display the fake sold number in the period of time on the Single Product

![](/files/atUJOZVXhLwAA0ORncbB)

Simply, go to **Theme Options → Promote Sales**

![](/files/GrDrH2kI0wVXzDMq8H2E)




---

[Next Page](/llms-full.txt/1)