How To Create an eCommerce Website with WordPress

How To Create an eCommerce Website with WordPress

I’m all about helping you build the BEST and MOST PROFESSIONAL website possible.

I won’t teach you how to build a cheap crappy website (like everyone else)
I won’t just keep making tutorials after tutorial and not teach you how to build a business
I will only recommend to you what I know will work
This tutorial will teach you how to create an online store (eCommerce website) and will be using the top selling ecommerce theme available (Flatsome)

I’m all about saving money and helping you create a site that makes money from Day 1. You can pay someone thousands of dollars to create you the same site, or you can follow this tutorial.

I say the above in all seriousness. Someone just emailed me saying they used one of my free tutorials and charged someone $1,200 to build the site and they have no technical background. Sad but it happens. Don’t get taken advantage of!

Pre-requisites

None really.
Just an hour or so and the ability to follow the tutorial 🙂
What You Don’t Need

You do not need to have a technical background
You do not need to know how to code or program
What You Will Need

A Domain (web address for your ecommerce website)
Hosting Service (the engine that powers your online store)
The Flatsome Theme by UX Themes

The following steps are always the same for my tutorials, so they might look familiar to some of you.

Step 1: Register a domain and get hosting service with hostgator

A domain is your web address (what you type in to get to your site). This is a MUST.

You need hosting in order to run your website and store all the data (content, images, video). Every website needs hosting, so make sure you get hosting otherwise we can’t build out your website. This is a MUST.

Go to Hostgator -> Click Get Started Now -> Choose a Plan -> Click Sign up now (doesn’t matter which)

I recommend Hostgator because it’s cheap and easy plus great customer service – I really like them! (but you can choose any service you want!)
Type in a domain you want to register and push enter to see if it is available. If you found one that is – move onto the following steps! 🙂

Use the discount code: nyctech30 to save 30%

(its an affiliate link so hostgator also pays me a commission for helping you)

Cheap
Good customer service
Easy to install everything you need to make your website
Decide what plan is best for you (if you only will have 1 website – choose hatchling plan, if you think you’ll have more than 1 website – choose baby plan)
Fill in all the info (I suggest you choose a 12 month billing cycle)
Unclick all additional services (they are unnecessary and extra money)
Enter “nyctech30” for a 30% off coupon code (our very own special coupon code!)
Agree to the terms and conditions and “Check Out”
Step 2: Go to your email inbox

You will receive a hostgator email in your inbox with all your login and account details

Use that information to do Step 3

Step 3: Log into website cpanel

Pull up your new account email from Hostgator
Click on the link that says “Your Control Panel”
Login with the username and password from your email
Now the fun starts!

Step 4: Install wordpress

Now we need to install the platform we’re going to use to make it. The platform is called WordPress – it’s a content management system and super popular with a large community of users.

Now that’re you’re logged in to your cpanel
Scroll down to Software/Services section of the main page
Click on the icon that says “QuickInstall”
Click on WordPress on the left side menu
Click Continue
Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
Click “Install now!”
Sweet! Now we have wordpress installed! You can go to your domain address and see that we have just uploaded a website to your site (we’ll fix this whole thing and make it pretty – don’t worry!)

Step 5: Log into wordpress

You might have to wait 5-15 minutes before you can click to log into your new site. Take a break if you need.

There are two ways to log onto your site

You can click on the link provided on the hostgator page after the quick install and use the username and password
You can go to your email and open the new email you get with details about logging into your site (same info as above)
To customize and add content to your site, you will always log into the site with the following address: http://www.YourSite.com/wp-admin

So go ahead and log on!

Step 6: Get The Flatsome Theme

I don’t like making you spend money but for this tutorial its necessary. All the free themes are ugly and unprofessional and it would take me too long to recreate something from scratch for you.

Follow this link to ThemeForest to the theme homepage (affiliate link)
Click Buy Now (this is the only thing we need to purchase)
Fill out your account information
Follow the instructions to download the ZIP file that contains your new premium theme
You still end up saving hundreds if not thousands of dollars by purchasing this theme and customizing it yourself. It’s a great investment.

Step 7: Install Flatsome theme for our Ecommerce Site

Sweet. If you made it past Step 6, I can honestly say you made an awesome decision. I know not everyone wants to spend money but I don’t feel comfortable showing you how to build an ugly website. Only the best!

Now it’s time to install the the theme that you just purchased.

Go to WordPress website page (www.yoursite.com/wp-admin) – this is your Dashboard
On the left side, find the Appearance link – hover over it and click “Themes”
Near the top you’ll see a button that says “Add New” – click on that
Then click the button that says “Upload Theme”
Click the button that says “Choose file” right in the center
Go to your download folder (or wherever the Flatsome theme is saved) and choose that file and click upload and “Install Now”
You’ll be brought to another page – click “Activate”
Now you should be back on the Dashboard

Step 8: Install Plugins

Now we need to install the super popular ecommerce plugin that supports almost all the online stores own the web.

The Flatsome theme has a bundle of pre-packaged themes so we can install them all at once.

WooCommerce – WordPress eCommerce plugin (Required)
Ninja Forms – Used for contact form and newsletter signup (Optional)
Regenerate Thumbnails – Use to resize product images to recommended sizes. (Optional)
Taxonomy Metadata – Used to create custom fields in settings for Product categories. (Optional)
WooSidebars – Create unlimted sidebars for pages and footers (Optional)
YITH WooCommerce Ajax Search – Adds live search functionality to search box(Optional)
YITH WooCommerce Wishlist – Adds wish list functionalty to category grid and product pages(Optional)
flatsome_required_3

Go to your dashboard > plugins
Check the box above all your plugins so it selects everything
Where it says “Bulk Actions” click that drop down and click Install
Click Apply
Now check the box above all the plugins again and this time click “ACTIVATE” in the drop down menu and click Apply

Step 9: Install WooCommerce Pages

Now we just have to click a button so we have our Default pages like Shop, Cart, and Checkout

Go to your Dashboard
On the left hand site hover over Appearance > Click on Themes
Right on this page you will see a banner that says “Install WooCommerce Pages” – click on that
Now go to Pages on the left hand side and click “All Pages”
Just to see a bunch of default pages are up (if you see pages like Cart, My Account, Checkout…you’re good to go!)
Change Image Sizes

This theme uses image sizes other than WooCommerce normal sizes. Go to WooCommerce > Settings > Products >Display and change sizes to these:

Note: You dont have to use the same heights. But its recommended to use the same widths

Step 10: Save and Upload Images

At this time, you will need to use your own images (since our tutorial images really don’t do you any good!)

Step 11: Regenerate thumbnails

After image sizes are set, you’ll need to resize all images. We can do this automaticly with the plugin: “Regenerate Thumbnails”.

Go to Tools > Regen. Thumbnails
Click Regenerate All Thumbnails
You’ll need to install “Regenerate Thumbnails” if you cant find it under Tools.

Tip: You should probably regenerate your thumbnails after you upload them on your pages/post so this step may not be necessary until you upload some products and publish some blog posts.

Step 12: Choose Layout Settings

Go to DASHBOARD > APPEARANCE > THEME OPTIONS
We will go through all of the important options right now
Global Setttings

If you want to Show a Message instead of your website while you build it -> Select Maintenance Mode
Logo and Icons (we will do this in a separate section)

Layout

Choose the layout you want in the first section (we are using the first layout – left with no borders)
Make sure you scroll down and click save
Header

No changes necessary
You can add some text to “Top Bar Right” if you want
We may do some additional work here in Step 25
Footer

You can modify the text in the “Footer Botton Left Content” area
We will do some additional work here in Step 25
Fonts

Select what type of font you want for your website. We will be using LAGO
Style and Colors

Go ahead and choose what colors you want for your website here.
Watching the video will help you understand the differences between the primary and secondary colors better
Product Page

We’ll work on this section in Step #15
Category Page

We’ll work on this section in Step #17
Cart and Checkout

No changes necessary
Catalog Mode

No changes needed
Blog

We’ll work on this section in Step #
Featured Items

No changes needed
Backup and Import

No changes needed
Step 13: Create custom website logo

Now we’re going to create a custom logo – how cool is that?

The first thing you need to do is go to this website: Logomakr
On the upper left corner, there is a search bar.
Type in whatever type of image you want your logo to be
Then find an image that you like
Then go to the right upper corner and change the size
Make sure your logo fits within that white space
Click on the T on the left hand side if you want to add text to your logo
Make sure all the text also fits within the white space
You can change the colors of your logo by highlighting the image or the text and clicking in the color chart on the lower right corner
Once you’re happy with your logo, go to the upper right corner and click on the disk
A new page will pop up. Right click and download the logo
Then go to your download folder. Double click the logo and export it to PNG.
The logo should now be saved as a PNG image
Step 14: Create Homepage and Blog Page

We are going to create our homepage early on in this tutorial so we can add to it as we go through the steps. This way you can see the progress of your site from beginning to end.

Go to your DASHBOARD
On the right hand side you will see Pages > Hover over that and click Add New
Create a new page and title it “Homepage”
In the Page Attributes (right side section) -> Select Full Width
Click publish
Now let’s create a blog page if you plan to have a blog for your website. These steps will be similar to creating a homepage.

Go to your DASHBOARD
On the right hand side you will see Pages > Hover over that and click Add New
Create a new page and title it “Blog”
Click publish
For now we will not add anything to these pages, but we need to set this page as our homepage and blog page so do the following:

Go back to your DASHBOARD > Settings > Reading
At the top of the Reading page you will see “Front page displays” > click on the button for “A static page”
Select Homepage for your front page
Select Blog for your posts page (change the number of blog posts you show per page if you wish)
Scroll down to the bottom and click SAVE
Step 15: Create HOMEPAGE Blocks

For this ecommerce website theme (online store website) we will be using “Block IDs” to create our site.
Blocks will be different sections of your website.
We’ll create the main image section, buttons, featured products, categories, etc. You’ll be able to create any and all blocks for your ecommerce site after this tutorial.
Step 15-a: Create Slider BLOCK

To create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

If you want a large image at top of your page and want additional images to rotate – this is the slider section.

Remember, everything we do requires BLOCKS. So make sure you’re on the block page (left menu, block, add new).

Title your block ID: Homepage Slider

Make sure you’re on the Visual Tab
Click the Shortcodes drop down
Go to UX Slider > Simple Slider
Now you will see a line that says “Insert slides here (UX Banner or Sections)”

Delete that line and insert some UX Banners by going back to the shortcode tab and clicking UX Banner
Change the height to 700px
Choose your slider image to use
Change annimation to Flip in X
Text Color = Dark/Light
Text Layout = center (or whatever alignment you want)
Choose whichever text content you want (with or without buttons)
Then click OK
Change the text_width to 70%
Now you can modify the text
IF YOU chosen text to have buttons -> go down to the buttons area “[button text]” and edit the text and paste in URLs between the link = “(section)” so the button brings you to another page (we will be creating these pages in a little bit)
Tip: Here are button shortcodes – note that PRIMARY goes with the color of your site http://flatsome.uxthemes.com/shortcodes/shortcode-buttons/ (I modify my button colors on the video tutorial – please watch to see how to do this)

Now repeat these steps if you want multiple images and links in your slider

Then click PUBLISH

You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
Paste in the short code and click publish. You should now see the slider on your homepage.
Step 15-b: Create Banner Row

This is for the section for the three small /medium sized images for different sections of your site

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

We are going to create 3 buttons but if you want you can create more.

Title your new BLOCK ID: Banner row – 3 column zoom effect

Make sure you’re on the TEXT Tab since you’re pasting in code in the yellow box below
Paste in this code
[row]

[col span=1/3]
[ux_banner link=”(add link to page)” bg=”http://imageurl” hover=”zoom” height=”160px”]
<h2 class=”uppercase”>WHY?</h2>


[/ux_banner]
[/col]

[col span=1/3]
[ux_banner link=”(add link to page)” bg=”http://imageurl&#8221; hover=”zoom” height=”160px”]
<h2 class=”uppercase”>MEET THE TEAM</h2>


[/ux_banner]
[/col]

[col span=1/3]
[ux_banner link=”(add link to page)” bg=”http://imageurl&#8221; hover=”zoom” height=”160px”]
<h2 class=”uppercase”>SHOP</h2>


[/ux_banner]
[/col]

[/row]
Now you can stay on the TEXT tab or go to the visual tab.

Now we have to add a background image to these banners. If you are using the images or your own images:
Go to your DASHBOARD > Media > Library
Click on the image you want to use for each button
Highlight the URL
Go back to your Banner Block page – paste in the URL between the “” in the bg= section
We just have to add page links to the link= sections (we will add these later after we create pages)

Then click PUBLISH

You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
I like to add some space between each section so if you want:
ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
If you want to add a short description sentence like the tutorial before your featured products section
Add TEXT: Go to the FORMAT tab above the content area and click on “Paragraph – Lead, Centered”
Paste in the short code and click publish. You should now see the slider on your homepage.
If you want a different featured box you can go here to find the code you want: http://flatsome.uxthemes.com/shortcodes/shortcode-ux-banner-grid/

Step 15-c: Create Featured Products

Let’s make a section to show off our best products.

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

Save the title of the block as Featured Products
Go to the TEXT tab
Now just paste in this code
[title text=”Featured Products” style=”center”]
[ux_featured_products]
Now click PUBLISH

You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
I like to add some space between each section so if you want:
ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
Then paste in the short code and click publish. You should now see the slider on your homepage.
Step 15-d: Create Blog Section

Now we just have to create our latest blog post section.

We need to create a new block ID, so click Add New if you are still on the BLOCK page or Go create your slider block go to DASHBOARD > BLOCKS > ADD BLOCKS

Save the title of the block as Latest from blog
First we need a title so go to your shortcodes > Elements > Titles/Dividers > Title – Center
You will see this code: [title text=”This is a centered title” style=”center”]
Change “This is a centered title” to Latest from our blog
Go to the TEXT tab and paste in the following code below
[blog_posts posts=”3″ type=”grid” columns=”3″ image_height=”200px” show_date=”true”]
Click PUBLISH

You will see on the right side of the edit page a box that says “Shortcode: [block id =…]”
Open up the Homepage that you created (Dashboard > Pages > All Pages > Click on Homepage)
I like to add some space between each section so if you want:
ADD SOME SPACE: Go to the shortcodes tab > elements > title/dividers > Gap 30x
Paste in the short code and click publish. You should now see the slider on your homepage.
Step 16: Set Product Page Options

First let’s make sure our product page formatting is correct.

Go to DASHBOARD > APPEARANCE > THEME OPTIONS
Click on Product Page
Make sure left side is selected for Product Page Layout (so we can show different categories here)
Tabs is selected for Product Info Style
And check the box for Show Mini-cart drop down
Now to to your widgets page and let’s put something in the left sidebar

Dashboard > Appearance > Widgets
You should see a Product Sidebar box on the right side of the page
From the left side find the “WooCommerce Product Categories” widget and drag it into the Product Sidebar
Click save
Step 17: Add Products

This is where you’ll be adding all the products you’ll be selling on your website. This is probably the most important and time consuming part of building out your ecommerce website.

Go to DASHBOARD > APPEARANCE > PRODUCTS > ADD NEW

Add a title and description in the main content section (the description you put in will be in the additional information section)
Add Product Data information (this is where you’ll put in the price and SKU and everything else)
Click on the Advance tab and check to enable reviews (if you want)
Add a short description in the “Product Short Description” section (this will be next to the main image)
Add comments if you have any to add
Add or select categories on the right (on the right side)
Add product tags on the right (on the right side)
Add or select categories on the right (on the right side)
Add Featured Image for the main image
Add images into the Product Gallery section for additional images to be viewed
Above the PUBLISH button you will
Click Publish
** If you want any of these products to show up on your “Featured Products” section on your homepage:

Click on the link next to Catalog Visibility above the Publish button
Select Featured Product
Push Publish or Update
Repeat these steps as necessary to add additional products

Extra: Additional Columns for Description Section

You can have more than one volume for your description section if you don’t just want paragraph format (lists for example)

Just go to Shortcode > Row/Colums > select how many columns you want
Modify text and what not 🙂
Extra: Variable Products

If you have different sizes or different price points, you can add variables to your products with rather than just have one size/price

In the Product Data section -> select Variable Product
Go to the Attributes section -> Click the blue button that says Add for custom product attribute
Create a name for your attribute (Size, Weight, etc.) -> then in the values section, add your attributes. Instead of using a comma use a | to separate the attributes (it will automatically add a comma to your list of attributes if you have the “Visible on product page” selected
Click on “Used for variations” if you want to allow a customer to select different variables (most likely)
Click save attributes when done
Now go to the Variations tab -> Click the button that says “Link All Variations” OR click on GO next to add attributions and continue to do this to add your different values
Modify and add different prices and other options 🙂
Step 18: Set Categories Options

We need to set up the lay out for our categories page since we are showing categories on our “Shop/Product” page

Go to DASHBOARD > APPEARANCE > THEME OPTIONS
Click on Category Page
Choose the shop sidebar layout you want (I use the left sidebar option)
Disable Cart Option
Choose 4 products per row – Desktop (this looks better to me)
Choose 2 products per row – Mobile
12 products per page (or whatever number you want)
Click save changes
If you selected a sidebar option layout like I do then you need to drag in a some widget(s) into your side bar.

Dashboard > Appearance > Widgets
You should see a Shop Sidebar box on the right side of the page
From the left side find the “WooCommerce Product Categories” widget and drag it into the Shop Sidebar
Click save
Step 19: Create “Shop” Page

This page will show whatever items we want to show.

First make a new page and title it Products.

To do this go to Dashboard > Pages > Add New > Title Page as “Products”
Go to the Page Attribute section (on your right) and select Default Template (no title)
Then paste this code in to the content section:
[title text=”” style=”center”]
[products ids=”##” columns=”6″]
[title text=”” style=”center”]
[products ids=”##” columns=”6″]
[title text=”” style=”center”]
[products ids=”##” columns=”6″]
Title the three sections by writing in a title between the quotes for “Title Text”
Go to our Products page and get ID #’s to put into the “Product id” sections
You can change the number of items you want to show per row in the column section.
Click Publish when you’re done.
Step 20: Format Blog Page

First let’s make sure our blog page formatting is correct.

Go to DASHBOARD > APPEARANCE > THEME OPTIONS
Click on Blog
Choose whatever settings you want or you can use the following (which I use in the tutorial)
Blog List Layout – Right sidebar
Blog List Style – Normal
Blog Single Post Layout – Right sidebar
Blog Single Post Header Style – Default
Check the boxes for Show Author box and Enable Share Icons
Step 21: Create Blog Posts

You don’t have to do this section right now if you don’t have any articles you want to publish. But since I want to show you what your website will look like after you do publish some blog posts, I will show you how to create 3 blog posts.

Go to your DASHBOARD > POSTS > Click Add New
Title your blog post whatever you want
Type in whatever content you want and change the text formatting if you would like
Once you’re done you can add in a category for the blog post if you would like
Add a image in the Featured Image section on the lower right if you want a thumbnail to show up on the homepage and blog post page
This is how you create blog posts 🙂

Step 22: Create About Page

We need to create a new page for the About Page.

Go to DASHBOARD > PAGES > ADD New
Change the page template to Default Template (no title)
Title the page
Now we are going to do some formatting for this page. You can do whatever formatting you want or you can copy what we are creating in this tutorial.

First we want to make a slider banner and paste our title and social media buttons in there. So I want you to do the following:
On the upper right corner you will see a button that says SCREEN OPTIONS. Click on that and expand it.
Check the EXCERPT box
Scroll down below your content area and paste in this code:
[ux_banner bg=”http://imageurl&#8221; height=”300px” animation=”flipInX”]
<h1>Our Story</h1>


[share]
[/ux_banner]
Change the “Our Story” title to whatever you want.

Now go back up to your content area –

Go to the Format tab above the content section > Select Paragraph – Lead, Centered
Type in a short summary of your business (maybe just one sentence)
Now add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
How go ahead and write a blurb about your company and style the font however you want
Then we will add a team bio after our about section

Depending on how many team members you have – you’ll want to create a certain number of columns. In our example we will have 4 team member bios.

Add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
Go to the Shortcode tab > Rows/Columns > Select the number of columns you want (1/4 in this example) > then in column content select Team Members
Then click OK
Now you can Edit the name and add social media pages links
For the image – go to your Media > Library tab and either find the team members photo or upload it and then click on the image and click and save the URL on the right side
Paste the image URL between the quotes in this section of the short code: img=”http://imageurl”
Then add bio information for the team member in the Team Member Description section
Now we are going to add a VALUES section

Add a title for the next section -> Go to the Shortcode tab > Elements > Title/Dividers > Title – Center
This is the short code you should get: [title text=”” style=”center”]” — add a title after the title text section in the quotes
Go to the Shortcode tab > Rows/Columns > Select the number of columns you want (1/2 in this example)
Then in the INSERT CONTENT HERE area – just paste in the code below and then edit the content including adding a title for your value, an image URL for your ICON (go to Media > Library > get URL) and then in the “feature box text” add a description of the value
[featured_box title=”Featured box title” img=”http://iconurl&#8221; pos=”center”]
Featured box text
[/featured_box]
For our tutorial page we will have 4 values. To have another row – do the steps again in the value section.

Once you’re done push Publish 🙂

Step 23: Create Contact Us Page

For our contact us page, we’ll put our address, an email form and a map to show your location.

Go to DASHBOARD > PAGES > ADD New
Change the page template to Default Template (no title)
Title the page
Now let’s get the shortcode for our map first –

Go to the Shortcode tab > ELEMENTS > MAP
You can find your longitude and latitude for your map using this link: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
Then insert your latitude and longitude in the sections of the shortcode
Put in your address or other content in the “Enter map content” area
Now cut and paste all tho content in the EXCERPT section below the content box (similar to the About page)
Now we need two columns to put in our address and have a contact form.

Make sure all your MAP shortcode is deleted from the main content area
Go to your shortcode tab >Rows/Columns > Choose 1/2 1/2 for your columns
Click OK
In the first column we will be putting in our address. In the second column we will create a contact us form.

First column

This column is pretty straight forward. Just put in your address and hours and what not and edit the font.

Second Column

Here we will be using the Ninja form plugin that comes with the Flatsome theme

All we have to do is go to the Dashboard > Find the FORMS tab (click on Forms)
You should have a default form set up but if not -> click ADD NEW and create a form and publish it
On the FORMS page you will see a shortcode for your form that looks like this: [ninja_forms id=1]
Copy the short code and paste it into your column area on your ABOUT PAGE where it says “Insert content here..”
Click PUBLISH when you’re done and we are good to go 🙂

You can view the messages you receive from the Ninja form by going to DASHBOARD > FORMS > SUBMISSIONS

Step 24: Create FAQ Page

Create a new page – DASHBOARD > PAGES > ADD NEW

Title the page FAQ
You can add some content if you would like before we have the FAQ section
Now to got the Shortcodes button > ELEMENTS > TABS/ACCORDIANS > ACCORDIAN
In this section between the quotes: [accordion-item title=”Accordion Item 1 Title”] – add your question
Where it says “Accordion Item 1 Content Goes Here” – add your answer
Do this over and over again until you get all of your FAQs listed
Then just make sure the last line of code is: [/accordion]
After you’re done, click PUBLISH
Step 25: Create Shipping & Returns Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

Title the page Shipping & Returns
You can add some content if you would like
Push Publish and we’re done 🙂
Step 26: Create Terms & Conditions Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

Title the page Terms & Conditions
You can add some content if you would like
Push Publish and we’re done 🙂
Step 27: Create Privacy Policy Page

Now create a new page – DASHBOARD > PAGES > ADD NEW

Title the page Privacy Policy
You can add some content if you would like
Push Publish and we’re done 🙂
Step 28: Create Wish List Page

First create a page and insert the shortcode [yith_wcwl_wishlist]. Using the “My account” template is recommended. Select this page in Wp-admin > YIT Plugins > Wishlist.

Go to Wp-admin > YIT Plugins > Wishlist
Change “Position” to “Use shortcode”
Enable “Show “Add to Cart” button”
Enable “Show Unit price”
Disable “Use buttons”
Enable “Use theme style”
Step 29: Header Menu

Go to Dashboard > Appearance > Menus
Select Main Menu in the drop down menu section at the top
Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items
Click Save
Step 30: Navigation Menu (Top and Footer)

I do these two menus separately since I have different things included in each

Go to Dashboard > Appearance > Menus
Select Top Nav and Footer Nav in the drop down menu section at the top
Drag / Modify / Edit what you want to show in the menu from the left pages or create new menu items
Click Save
We can go back to our Theme Options (Appearance > Theme Options > Header / Footer) and modify things there if we’d like.

[follow twitter=”http://&#8221; facebook=”http://&#8221; email=”email@post.com” pinterest=”http://&#8221; rss=”http://&#8221; instagram=”http://&#8221; googleplus=”http://&#8221; linkedin=”http://&#8221; youtube=”http://&#8221; flickr=”http://”%5D
Step 31: Activate My Account Login

Go to DASHBOARD > WooCommerce > Click on the Accounts tab
Check to enable registration on My Account page
First create a new page (Dashboard > Pages > Add New)

Title the page as “My Account”
Add this code to your content section: [woocommerce_my_account]
Click Publish
Step 32: WooCommerce Settings

We need to create a few pages so our visitors can make purchases.

Make a page and title it My Cart or Cart (DASHBOARD > PAGES > ADD NEW)
Paste in this shortcode: [woocommerce_cart]
Change the page template to Page Checkout
Click Publish
Make a page and title it Checkout (DASHBOARD > PAGES > ADD NEW)
Paste in this shortcode: [woocommerce_checkout]
Change the page template to Page Checkout
Click Publish
Make a page and title it Terms and Conditions (DASHBOARD > PAGES > ADD NEW)
Click Publish
Now let’s go make these pages the default pages for viewing the cart and checking out.

Go to DASHBOARD > WOOCOMMERCE > SETTINGS
Click on the Checkout tab at the top
Scroll down to Checkout Pages
Select the correct pages for Cart Page, Checkout Page, and Terms Page (we just made those pages above)
Now we need to set up our billing system with woocommerce. For this tutorial we will use paypal but you can select any billing service offered within Woocommerce.

On the same page that we should still be on scroll down and select PAYPAL
Click SAVE CHANGES
Then click on SETTINGS next to the PayPal Button
Now just enter your PayPal information
And Click Save Changes on this page 🙂
Optional Step : Create Footer 1 and Footer 2

There are two footer sections. One on top of each other. We will not be using any of these in the tutorial but if you want to – you can follow these instructions to add widgets to one of your footers.

Go to your Dashboard > Appearance > Widgets

On the right side of the page you will see two boxes – Footer 1 and Footer 2

Footer 1 = upper footer

Footer 2 = lower footer

Add Widgets to Footer 1

About section: Drag text box into Footer 1

Title your text box “About”
Post in whatever you want to say about your website/company
Paste in this shortcode:
[follow twitter=”http://&#8221; facebook=”http://&#8221; email=”email@post.com” pinterest=”http://&#8221; rss=”http://&#8221; instagram=”http://&#8221; googleplus=”http://&#8221; linkedin=”http://&#8221; youtube=”http://&#8221; flickr=”http://”%5D
Add the correct URLs and addresses for the correct buttons
Drag in the Flatsome Recent Post widget and title it Recent Posts
Drag in the WooCommerce Product Tags and title it Product Tags
Drag in the Blog Subscriptions (Jetpack) widget and modify the content as you please (this will send an email each time a blog post is published)
You can check the list of subscribers by going to your DASHBOARD > JETPACK > SITE STATS > and scroll down to subscriptions. This list can be exported.
Make sure you click save on each widget

Extras:

How to add newsletter signup to top bar

The newsletter link shown on demo page is just a normal menu item combined with [lightbox] shortcode. Here is how to make it:

Go to Appearance > Menus
Select Top Bar menu in the drop down menu section at the top
Add a custom link. URL should be #newsletter-signup
Add “icon-envelop” to CSS Classes. (Enable CSS classes in Screen Option)
Now you have setup the menu. Now lets setup the lightbox:

Go to Theme Option > Header and add this to “HTML after footer”:

[lightbox id=”newsletter-signup” padding=”0px” width=”600px”]
[ux_banner bg=”http://bgurl&#8221; height=”400px” text_color=”dark” text_align=”left” text_pos=”left center” text_width=”50%” text_bg=”” parallax_text=”0″ parallax=”0″ effect=””]
<h3>Signup for our Newsletter!</h3>


[ninja_forms_display_form id=1]
[/ux_banner]
[/lightbox]
Get your ninja forms shortcode from wp-admin > Forms

UPLOAD Logo & Other Icons

Go to DASHBOARD > APPEARANCE > THEME OPTIONS > LOGO AND ICONS
Here you can upload any icons you want including your logo
Make sure you scroll down and click save
To create a custom logo you can make one at Logo Makr for free

Edit Font

You can change the type of font you use by going to your theme options.

Go to DASHBOARD > APPEARANCE > THEME OPTIONS > FONTS
Make sure you scroll to the bottom and click SAVE
Edit Style and Colors

Go to DASHBOARD > APPEARANCE > THEME OPTIONS > STYLE AND COLORS
The only color that really matters is the Primary Color so choose wisely 🙂 it will affect your borders, buttons, and navigation
Make sure you scroll and and click save
Add Favicon

Go to DASHBOARD > APPEARANCE > THEME OPTIONS > LOGO AND ICONS
Click on Footer
The first box should be labeled “FOOTER BOTTOM LEFT CONTENT (COPYRIGHT TEXT)” you can edit the text here.
Make sure you scroll down and click save
Edit Copyright Text

Go to DASHBOARD > APPEARANCE > THEME OPTIONS > FOOTER
Click on Footer
The first box should be labeled “FOOTER BOTTOM LEFT CONTENT (COPYRIGHT TEXT)” you can edit the text here.
Make sure you scroll to the bottom and click SAVE
Adding Background Colors / Images

Go to Dashboard > Appearance > Theme Options
You will see three tabs on: Layout, Header, Footer
In each of those there will be a section to modify colors and add a background image if you would like
Edit Permalinks

If you want the www. in front of your URL, do this:

Go to DASHBOARD > SETTINGS > GENERAL
Then type in www. on WordPress and Site URL
If you want your product and blog links to show up differently, follow these steps:

Go to DASHBOARD > SETTINGS > PERMALINKS
Then choose how you want your links to look
Change Your Tagline

To change your tagline for your site or the name of your site –

Go to DASHBOARD > SETTINGS > GENERAL
Modify Site Title and Tagline
Add Email Optin Pop-up

Incase you want to collect emails or offer some sort of weekly discount – here is how you can integrate MailChimp and a pop up box to your site when a visitor scrolls down.

Download and install the plugin – Social Triggered Boxes
Activate the plugin
You will see on the side bar menu on your dashboard – Social Triggered Boxes
Go to Add New
Let’s first modify the colors and when the pop up appears
Go to Box Appearance and choose your background color for the box and the text and anything else you want
Go to Box Options and select when you want the optin box to appear
Now scroll back up to the content section and go to the TEXT tab and paste in the code below (you will need to modify the sections highlighted in RED)
<p style=”text-align: center;”>SIGN UP FOR…TEXT</p>
<p style=”text-align: center;”>Subscribe to our mailing list</p>

</div>
</form></div>
<!–End mc_embed_signup–>
You can get your MailChimp and go to your LIST
Once you are on your LIST page – go to sign up forms
Click on Embedded forms
You will see a section that starts with FORM ACTION (take what is inside the quotes)
Paste in above
Click save and you’re done!

For more info on mailchimp you can watch this video I put together.

Congratulations!

You’re Done! Please make sure you subscribe to the NYC TECH CLUB YouTube Channel as I will be uploaded shorter videos on how to customize and edit your ecommerce website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s