E-Commerce Tutorial(Step by Step)

Note: To Create Store Front Page you have to select page attribute – “Shop FrontPage” and Select header style from – Customize->Site Header Panel->Site Header & Site Icon Section->Site Header Align->Woocommerce Header-1 or Woocommerce Header-2.

Installation:

WooCommerce plugin Installation

  • Download the WooCommerce plugin
    • Download the plugin
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Upload
    • Select the downloaded plugin
    • Install
    • Activate
  • Search for the WooCommerce plugin from within your website
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Search Plugins
    • Search for “WooCommerce”
    • Install
    • Activate

To create a store follow the documentation link: https://docs.woocommerce.com/document/woocommerce-setup-wizard/ Click here

YITH WooCommerce Wishlist plugin Installation

  • Download the YITH WooCommerce Wishlist plugin
    • Download the plugin
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Upload
    • Select the downloaded plugin
    • Install
    • Activate
  • Search for the YITH WooCommerce Wishlist plugin from within your website
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Search Plugins
    • Search for “ YITH WooCommerce Wishlist ”
    • Install
    • Activate

YITH WooCommerce Quick View plugin Installation

  • Download the YITH WooCommerce Quick View plugin
    • Download the plugin
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Upload
    • Select the downloaded plugin
    • Install
    • Activate
  • Search for the YITH WooCommerce Quick View plugin from within your website
    • Go to your website
    • Go to: Dashboard > Plugins > Add New > Search Plugins
    • Search for “ YITH WooCommerce Quick View ”
    • Install
    • Activate

How to create store front(video)

How to create another type header with slider header media.

How to create store front(Text and Image)

We are going design demo – https://egap1.themenextlevel.com/

To Create Store Front Page you have to select page attribute – “Shop FrontPage” and Select header style from – Customize->Site Header Panel->Site Header & Site Icon Section->Site Header Align->Woocommerce Header-1 or Woocommerce Header-2.

Topbar(General)

Topbar Text

Topbar Social

Site Header

Header for Woocommerce

Site title

Header Media

Overlay settings
Primary Menu
WooFrontPage Panel
Sections of WooFrontPage

Banner

Banner-1
Banner-2

Promotional Item

Product Slider

Please see the Header media slider documentation. Link: https://the-gap-docs.themenextlevel.com/header-media-slider/

Slider

Creating Product

Creating New Product
New Product settings

Product category box

All Widgets

Widget area1: Insert only “The Gap Product List” widgets
Widget area2: Insert only “The Gap Product List” widgets
The Gap Product List – Select “Enable slider”

Front Page Template Column1-4

Location – top of product brand

Product Brand

Product Brand
Footer Widget – Payment using social list widget

How to create another type header with slider header media