How to Make an Ecommerce Website With WordPress – Online Store – 2016!

This tutorial will teach you how to make a wordpress website using the premium theme, Shopkeeper Theme, which is one of the BEST ecommerce themes for WordPress.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

What You Need

We will be recommending Hostgator for your hosting service here. You can also use hostgator to get your domain. If you want to use another service like GoDaddy to get your domain – follow this link for step by step instructions.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Why Hostgator?

Hostgator Discount

Please use the following discount code with your hostgator purchase – nyctech30– this is an up to 50% off coupon code (highest available)

Now that we got all of that out of the way. Let’s get started creating your new wordpress website!

Step 1: Get Domain and Hosting

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)

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 up to 50%

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

  1. 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)
  2. Fill in all the info (I suggest you choose a 12 month billing cycle)
  3. Unclick all additional services (they are unnecessary and extra money)
  4. Enter “nyctech30” for up to 50% off coupon code (our very own special coupon code!)
  5. Agree to the terms and conditions and “Check Out”

Step 2: Go to 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 Cpanel

  1. Pull up your new account email from Hostgator
  2. Click on the link that says “Your Control Panel”
  3. 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.

  1. Now that’re you’re logged in to your cpanel
  2. Scroll down to Software/Services section of the main page
  3. Click on the icon that says “QuickInstall”
  4. Click on WordPress on the left side menu
  5. Click Continue
  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  7. 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 Website

You may 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

  1. You can click on the link provided on the hostgator page after the quick install and use the username and password
  2. 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: www.YourSite.com/wp-admin

So go ahead and log on!

Step 6: Get The Shopkeeper Theme

I don’t like making you spend money but for this tutorial its necessary. Almost all of the free theme tutorials you see are ugly and unprofessional and I hate how people try to make you believe they’re good enough (because they aren’t!)

This is seriously only a few dollars when you think about how much you are going to save in the long run and how much more professional your website will look compared to everyone else’s.

  1. Follow this link to ThemeForest to the Shopkeeper theme homepage (affiliate link)
  2. Click Buy Now (this is the only thing we need to purchase)
  3. Fill out your account information
  4. 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 Shopkeeper theme for our Professional Website

Excellent!!!! If you made it past Step 6, let me say, I am proud of you. You made a very, very wise decision that will pay off in the long run. 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.

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

Now you should be back on the Dashboard

We can check to see what our website looks like now by going to the upper left corner and clicking on your websites name.

Alright now we need to go and install some plugins. So go back to your dashboard by hovering over your name on the upper left and clicking on dashboard

Step 8: Install Recommended Plugins

The plugins that we will be installing are the recommended plugins for this theme.

  1. On the left hand side find “Shopkeeper” and hover over it and click on “Plugins”
  2. Click the install and activate buttons for these plugins
  3. Once it is done, you can go to the Plugins tab on the left hand side and you should see the plugins listed (and it should say active)

Just as an FYI if you need to know the name of the themes:

Step 9: Download and unzip all of the demo content (images, logo)

**It IS BEST TO USE YOUR OWN IMAGES THAT ARE HIGH QUALITY** Demo images are just for learning purposes and have the correct sizes.

Click here to download a zip file of all the images used on the demo site in this wordpress tutorial.

Images should only be used to know the correct sizes for your online store and for web building purposes. I recommend you get your own images to sell some really cool stuff and make lots of money with your ecommerce website with wordpress.

Credit for these demo images belong to Daniel Viero 

Step 10: Upload demo content (images, logo)

We will also upload all of these images now but I will walk you through how to do this step by step also if you want as we make this wordpress website.

  1. Go to your Dashboard > Media > Add New
  2. Click Select Files
  3. Click and add all the images (individually or all together)

Step 11: Create Homepage and Blog Page

The first thing we want to do is create two pages so we can set them up in our settings.

Make Our Homepage

Make Our Blog Post Page

We are going to select some settings for our wordpress website before we actually create the layout for our pages, so for now, we just need to publish these two pages.

Step 12: Set WordPress Homepage and Blog Page

Step 13: Modify Your WordPress Website Permalinks

  1. Go to your dashboard
  2. Settings > Click on Permalinks
  3. Choose the permalink structure you want (the demo site uses Post name)
  4. Click Save

Step 14: Add Tagline & WWW. to your website address

Now one more thing for us to do as we create our online store (not super important but something you should consider)

  1. Go to your dashboard if you’re not on it > hover over settings > click on General
  2. Change your Site title if you want
  3. Change your Tagline if you want (short summary or quote for your online store)
  4. Edit your wordpress and site address (be super careful with this)!! just put in the www. if you want it on your URL
  5. Click Save changes

Step 15: Choose Layout Settings

The next thing we are going to do is choose some of the customizations we want for our site. I’ll walk you through what we select for the demo site but you can always choose whatever you want, or come back to this section later and make any modifications.

  1. Go to your dashboard
  2. Find the Shopkeeper tab
  3. Hover over Shopkeeper and click on Theme Options

Here you will see a bunch of setting tabs. We’ll go through them together.

Favicon

Header

  1. Choose what layout you want for your logo and menu
  2. Choose your header font color and size
  3. Select your header background color

Header Elements

  1. I leave everything as the default here (includes having a wish list, shopping cart, and search icon in the header)
  2. Feel free to enable and disable whatever you want or upload your own icons for the wish list, shopping cart, and search icon

Logo

Header Transparency

Top Bar

Sticky Header

Footer

© <a href='https://nyctechclub.com/'>NYC TECH CLUB</a>

You can copy and paste the above text. All you need to do is change the website name and the text between the > and < and the year (if you want)

Blog

Shop

Product Page

Styling

This is where you’ll choose your wordpress website colors – so this is one of the more important tabs. For the demo ecommerce website we use the following color codes:

Typography

In this tab, we can choose which font we want for our online store. See below for the fonts chosen for the demo ecommerce website (all you need to do is paste in this info into the right sections) –

Social Media

Custom Code

Import/Export

Make sure you click Save Changes after you’ve selected all your custom options

If you want to change your site name and tagline you can do that by doing the following:

  1. Go to your dashboard > appearance > customize
  2. Click on the Site identity tab
  3. And make your changes there in the two text boxes
  4. You can also add your favicon where it says Site Icon (but we will also do this in the next step where we create our logo)

Step 16: Create Logo and Favicon

Now let’s create a custom logo for our website. If you have one, great! If you want to hire a designer to make one, that’s awesome too! But if you want to make it yourself to save some money, I’m going to show you how.

If you need to create your own logo – follow the directions below (if you have a logo, scroll down to the how to upload section)

  1. The first thing you need to do is go to this website: Logomakr
  2. On the upper left corner, there is a search bar.
  3. Type in whatever type of image you want your logo to be
  4. Then find an image that you like
  5. Then go to the right upper corner and change the size to roughly “50 x 50”
  6. Make sure your logo fits within that white space
  7. Click on the T on the left hand side if you want to add text to your logo
  8. Make sure all the text also fits within the white space
  9. 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
  10. Once you’re happy with your logo, go to the upper right corner and click on the disk
  11. A new page will pop up. Right click and download the logo
  12. Then go to your download folder. Double click the logo and export it to PNG.
  13. The logo should now be saved as a PNG image

Helpful hints: I change my logo to White so it looks good on the slider image. I also save a black copy of the same logo for the favicon

Now that we have our logo – let’s upload it!

  1. Go back to your Dashboard > Shopkeeper > Theme Options > General
  2. To upload your favicon, click on the upload button tab and just click to upload your image
  3. To upload your logo to go the Header tab and click on Logo
  4. Now you can upload your logo and a transparent logo if you have one (for a dark header background)
  5. You can also change the size of your logo height
  6. Make sure you click Save!

You can go to your homepage now and see all the changes if you want. Otherwise, let’s move on to the next step 😀

Step 17: Create Slider

The first thing we’re going to do is create our slider. This is done through the revolution slider plugin we installed.

I have multiple video tutorials on how to use the slider revolution. If you need additional help, make sure you check them out!

  1. Go to slider revolution dashboard > click add new
  2. Go through settings and select the options you want > click save when done
  3. Go to the Slide Editor and go to the main background section and select background image and upload an image
  4. Add different layers for texts and buttons
  5. If adding buttons that you want to have users click somewhere > select the layer and click on Action above to add the URL
  6. To change the animations > click on the layer then animations and select in the drop down menu, the animations you want
  7. To change the speed or time of the animation, go to the bottom of the page (underneath the slider image) and modify each layers speed and time there
  8. Click save when done

Repeat steps above for additional slider images.

We will insert the slider on the homepage in a few. Once you save everything, we can just move on to the next step.

Step 18: Customize the Homepage

Now the fun begins. First we’re going to create our homepage and then create pages to link it all together.

  1. Go back to your homepage by going to Dashboard > Pages > All Pages > Click on Homepage (edit homepage)
  2. This is where we are going to use the page builder to build our our sections
  3. Click on the blue button that says “Backend Editor” -> this is where we are going to pick and choose what we want to include on our wordpress homepage layout

If you have a slider, then let’s put it in first (see the step above this if you need to create a slider)

  1. Push the + button and add a row
  2. Inside this row, push the + button again and add a “Revolution Slider”
  3. Then we can choose the slider we want to show (this is only important if you create more than one slider to choose from)
  4. Click save changes

Now let’s create our next section 

  1. We want to create a new row by clicking the + button and adding a new row
  2. We want to include some spacing between the rows so push the + button and add an “Empty space”. In the pop up – change the height to 50px
  3. Click save changes
  4. Now push the + button and add a text block
  5. Add in some content. In the demo site, we change the font size to H4 to make it bolder and bigger 🙂

Add our three image buttons

I like to have this section to break up the slider and the homepage with products. It’s up to you if you want this or not but it gives visitors a chance to find their way around your wordpress ecommerce website.

  1. Add a new row by clicking the + button and adding a row
  2. click the pencil to edit the row settings -> a pop up should appear and you want to go down to the bottom of the pop up to “Row Type” and select boxed in the drop down menu
  3. Now push the + button to add another row (yes a row, inside a row)
  4. We are going to keep the inner row as Full width so we do not need to change the row type
  5. Now go to the custom tab on the left side of the inner row and select 3 columns
  6. In each column, push the + button and add a banner (this is the image button)
  7. For each banner, you can add a title, a subtitle, a URL link (we will update this later after we create our other pages), and a background image by clicking the + button in the background section
  8. For each of the banners, set the height to 220px (make sure you type in the “px” that is important) and 1px for separator padding
  9. Click save changes for each row

Make sure you do steps 7-9 for each column 

  1. Now let’s add a separately placed empty space
  2. Below the last row, click the bigger + button and add an empty space
  3. We can make the height 20px (or anything else you want)…32px is the default
  4. Click save changes

Now let’s add our Featured Products section 🙂 

We will add our products later, so after we add this section, it may look blank. But it will quickly fill up once we add products that we select as featured products.

  1. Add a new row -> click the + button and add a row
    • Click the pencil to edit this row. We want to scroll down to the bottom to Row Types and select Boxed in the drop down menu
    • Click save changes
  2. Now add a text block so we can put in our title and subtitle
    • For the title – the font is set as H1
    • The subtext is set as paragraph font
  3. Now add another row inside the row -> click the + button and add a row
  4. Inside the new row, push the + button and add the Featured Products widget
    • For number of products = 15
    • For number of columns = 5
    • Click save changes

The last thing we need to do is add a banner row

  1. Add a new row -> click the + button and add a row
    • Click the pencil to edit this row. We want to add a background color for this row. Just click on the Design Options tab and go to background and choose the background color that you want. In this tutorial we use the color code: #000000
    • Click save changes
  2. Now we want to add an inner row so click the + button and add another row
    • Click the pencil to edit this row. We want to scroll down to the bottom to Row Types and select Boxed in the drop down menu
    • Click save changes
  3. Now add a text box inside this row by clicking the + button and then selecting a text block
    • Inside this text box, the demo site adds the text “Want to see more of what we have? SHOP NOW!”
    • The first sentence is white font because of the dark background color
    • The Shop Now text is a URL to the shopping page.
      • To set the text to the URL just highlight the text and click the link button at the top of the content area and choose the page you want to link the text to or type in the URL
      • For the shopping page it will be www.yourwebsite.com/shop
  4. Click Save changes when you’re done

Now just push and publish/update the page and we are all done with the homepage! Sweet!!

Step 19: Create Shop Page

The shopping page is already created by Woocommerce. All we’re going to do is edit the page slightly.

If you need to modify the shopping page settings, do the following:

  1. Go to your dashboard
  2. Go to Pages on the left side and click All Pages
  3. Find the Shop page and click on that to edit
  4. Push Save Changes when finished

We want to set this Shopping page in the Woocommerce settings

  1. On the left hand side of your dashboard > hover over woocommerce > click on settings
  2. Click on the Product tab
  3. Near the top you should see a link that is titled “Display” > click on display
  4. In the drop down menu for the “Shop Page” >  select the page you just created

Stay on this page. We are going to set our display settings for the shopping and categories pages now (in the drop downs below):

Now we are done with the shopping page and all that and we can start adding products 😀

Step 20: Add Widgets to Shopping Page

Now you should have a bunch of products for sale on your ecommerce website. So if we go to the shopping page, it should look pretty good.

Step 21: Add Single 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

** If you want any of these products to show up on your “Featured Products” section on your homepage:

  1. Click on the link next to Catalog Visibility above the Publish button
  2. Select Featured Product
  3. Push Publish or Update

Repeat these steps as necessary to add additional products

Step 22: 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

  1. In the Product Data section -> select Variable Product > add general information
  2. Go to the Attributes section -> Click the blue button that says Attributes
  3. Click Create Custom Attribute
  4. 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
  5. Click on “Used for variations” if you want to allow a customer to select different variables (most likely)
  6. Click save attributes when done
  7. Now go to the Variations tab -> In the drop down select Create Variations from All Attributes > click GO 
  8. Modify and add different prices and other options 🙂

If you have attributes that you plan to use over and over again, you can add it once by using this shortcut!!

  1. Go to your wordpress dashboard > hover over products > click on attributes
  2. Add new name for your variable (attribute)
  3. Make the slug the same name (all lowercase)
  4. Just select type TEXT in the drop down
  5. Click the Add Attribute button

Now what you want to do is click on the attribute if you are not redirected to that page and add the individual variables

  1. Just add a name and slug name
  2. And click add new

And now you know how to save time 🙂

Extra: You can also add different types of products – not just single and variable products. There are downloadable and affiliate products you can also create!

Step 23: Create Custom Category Pages

If you do not want to create featured images or small category descriptions for your category pages, you can skip this section for your ecommerce website for wordpress.

Go to your wordpress dashboard > hover over products > click on categories

  1. Here you can create a new category or if you have one already created, you can hover over it and click edit
  2. Go ahead and name your category
  3. Put the slug as the same name as the category (with all lowercase letters)
  4. Just add a description
  5. Upload a header image
  6. Push add new category or update category

Step 24: Create About Page

We’re going to create an About page to let your visitors know a little bit about you (or your company). This page is optional.

  1. Create a new page -> go to your dashboard > pages > add new
  2. Title your new page Contact
  3. Uncheck the box on the right that says Show Title (we are going to add our own title…but you don’t have to)
  4. Change the page attributes template to Full Width
  5. Make sure the backend editor button is selected

Now let’s add our custom title

  1. In the row, click the + button and add a text block
  2. In the text block, the title I’m typing in is “Our Story”…after that, I’ll highlight it and change it to H1 in the drop down and click save

Add another row to type our about section

  1. You should know how to do this by now, but if you don’t -> click the + and add a row (we’ll keep it full width)
  2. Now we want to add an inner row -> click the + button and add another row
  3. We want to change the row type for the inner row to Boxed Type, so click the pencil on the inner row and in the general tab > scroll down to Row Type and select Boxed in the drop down
  4. Click save changes when done
  5. Now we want to add a Text block inside this row -> click the + button and add a text block
  6. Type whatever you want and customize the look (I center everything)
  7. Click save changes for the text block

Now let’s add our next section 🙂

  1. Click the + and add a row (we’ll keep it full width)
  2. Now we want to add a separator (that’s a border line – just for look) -> click the + button and add a separator
  3. I make some changes the the separator by clicking on the pencil to edit (color – grey, alignment – center, style – border, element width – 80%)
  4. Click the + button to add Extra space -> change the px to 50px
  5. Now click the + button to add a Text block and add our title “Team” (if you want to add your team here)
  6. To add our employ section, we want to create an inner row -> Click the + and add a row
  7. Change the inner row to boxed (click the pencil on the inner row and in the general tab > scroll down to Row Type and select Boxed in the drop down)
  8. Now we want to change the number of columns from 1 large one to 3
  9. In each of the columns, click the + button to add a single image -> upload the employee images to each.
  10. In the “Image size”…type in the size of the image you want (the demo site uses thumbnail)
  11. Make sure you go to the image alignment drop down and change that to center
  12. Then push save changes 🙂
  13. Now we want to add a text box where we can add details about each employee
  14. Make sure you save your changes
  15. Do steps 10-14 for all of your other columns for employee images

Add some additional information 

The demo site has another section with some icons to give the visitor a better idea of what your company/you are all about. If you want to include this section in your wordpress website then follow along 🙂

  1. Click the + and add a row (we’ll keep it full width)
  2. Now we want to add a separator (that’s a border line – just for look) -> click the + button and add a separator
  3. I make some changes the the separator by clicking on the pencil to edit (color – grey, alignment – center, style – border, element width – 80%)
  4. Click the + button to add Extra space -> change the px to 50px
  5. To add our icon section, we want to create an inner row -> Click the + and add a row
  6. Change the inner row to boxed (click the pencil on the inner row and in the general tab > scroll down to Row Type and select Boxed in the drop down)
  7. Now we want to change the number of columns from 1 large one to 3
  8. In each of the columns, click the + button to add an icon box
  9. Click the pencil icon inside the icon box so you can choose an icon
  10. Add a text box for the icon box by scrolling down below the icons
  11. You can add a link if you want
  12. Push save changes when you are done
  13. Repeat these steps for each column

If you want the look of the demo – paste in this HTML in the TEXT tab and edit the text and nothing else 🙂

<h4 style="text-align: center;"><strong>BRANDING</strong></h4>
<p style="text-align: center;"><span style="color: #808080;">Squid synth carles, forage tousled terry richardson intelligentsia vice. Polaroid scenestering portland vice.</span></p>

Create some space between the next block

  1. Push + to add a row
  2. Push + to add empty space – we can leave this at 32px
  3. Click save changes

Design Our Contact Us section 

Now lets add the last thing to our about page – which is the contact us section (with a button)

  1. Click the + button to add a new row (we can leave this as full width)
  2. Now let’s click the pencil to add a background color to this row (color code: #DD4040)
  3. Go to the Design Options tab > choose your background color > in the drop down where it says “Theme Defaults” choose covered
  4. Click Save Changes
  5. Now let’s add a text box and type in “Interested in Working Together?” – highlight the text and change the font color to white, and in the font drop down change it to H2
  6. Click save changes when done
  7. Now let’s add a button so push the + button and add a button
  8. For the button -> type in “Get In Touch!” for the text, change the style to Flat, the shape to Square, choose your button color, align it center, add an icon if you want
  9. Push save when done
  10. Now just push the + button and add another empty space and leave it at 32px and click save changes

Now we can publish the page or update it and we’re done with this page 🙂

Step 25: Create FAQ Page

Personally, I think having an FAQ (frequently asked questions) page is important for any online store or ecommerce website – so I’m going to make one for the demo site. You can follow along if you want!

The first thing we need to do is create a new page.

  1. Create a new page -> go to your dashboard > pages > add new
  2. Title your new page FAQ
  3. Uncheck the box on the right that says Show Title (we are going to add our own title…but you don’t have to)
  4. Change the page attributes template to Full Width
  5. Make sure the backend editor button is selected

Create Custom Title for FAQ

Now let’s add the first of three FAQ topics

  1. Click the + to add a new row
  2. Click the pencil to edit the row -> we want to go down to Row Types and choose Boxed
  3. Click Save changes when done
  4. Push the + to add a text box so we can put a title for this section. In the demo site we title this one “Shipping Information” and make the font bold (the demo site makes the text H4)
  5. Push save when you’re done
  6. Now add an inner row (push the + button and add a new row) -> we are going to leave the inner row type Full Width
  7. Go to the custom tab on the inner row and change it to 2 columns
  8. Click the + button on each column and add text boxes where we can add our question and answer
  9. Once you’re done adding questions, create a row with a separator (all you have to do is push the + button and add a separator)
  10. In the separator you want to push the pencil and change the row type to boxed and then go to the design options tab and add 35px to the top padding and 35px to the bottom padding
  11. Make sure you click save

To add additional questions to the same topic follow steps 6-7 in the same section

To add additional topics go through steps 1-7 above again in the “Add the first of three FAQ topics”

Let’s add another get in touch with us section

  1. Click the + button to add a new row (we can leave this as full width)
  2. Now let’s click the pencil to add a background color to this row (color code: #DD4040)
  3. Go to the Design Options tab > choose your background color > in the drop down where it says “Theme Defaults” choose covered
  4. Click Save Changes
  5. Now let’s add a text box and type in “Have more Questions?” – highlight the text and change the font color to white, and in the font drop down change it to H2
  6. Click save changes when done
  7. Now let’s add a button so push the + button and add a button
  8. For the button -> type in “Get In Touch!” for the text, change the style to Flat, the shape to Square, choose your button color, align it center, add an icon if you want
  9. Push save when done
  10. Now just push the + button and add another empty space and leave it at 32px and click save changes

Now we can publish the page or update it and we’re done with this page 🙂

Step 26: Create Contact Us Page

It’s a good idea to have a contact page on your wordpress website so your visitors/customers know how to get in touch with you. Even if you are just building an online store or ecommerce website 🙂

  1. Create a new page -> go to your dashboard > pages > add new
  2. Title your new page Contact
  3. Uncheck the box on the right that says Show Title (we are going to add our own title…but you don’t have to)
  4. Change the page attributes template to Full Width
  5. Make sure the backend editor button is selected

Add your contact information section

Now we want to add a map

  1. Add a new row
  2. In the row settings (click the pencil) – make sure the “row type” in the general tab is full width
  3. Now just push the + to add a google map
  4. You can find your longitude and latitude for your map using this link: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
  5. Click Save when done

Just make sure you update / publish the page and you’re all set!

Step 27: Create Terms & Conditions Page

Everyone ecommerce website needs a terms and conditions page. So let’s create one for our online store 🙂

Create a new page – DASHBOARD > PAGES > ADD NEW

  1. Title the page Terms and Conditions
  2. Change the page template to full width
  3. To add a custom title > push + and add a new row
  4. Click the pencil to edit the row -> we want to add 262px to the top padding so the title falls below the header menu
  5. Now we want to add a text box > push the + button and add text box. We want to add our custom title here. For the demo site we will put “Privacy Policy”
  6. Add a separator underneath the text box > + button > separator. Change the color and make the border width 3px and the element width 20%
  7. As a friendly reminder, always remember to click save
  8. Now add another row so we can put in some content for our privacy policy (or any other page you have that you want to write content for) -> push + and add a new row
  9. Change the inner row’s row type to boxed by clicking on the pencil to edit the row and scrolling down to the row type and selecting boxed
  10. Add a text box inside the inner row by clicking the + button and adding a text box
  11. You can whatever content you like in the new text box
    • The demo site has a sub-title and then text set as H4
  12. Put a separator after your first section -> click the + button and add a separator
    • Change the color if you want; the border width is 1px and the element width is 100%
  13. Repeat steps 10-12 for as many terms and conditions as you want for your online store
  14. Once you’re done, let’s add another empty space just for spacing issues. You can add this to the same row or below. Just push the + button and add an empty space -> we can leave it at 32px
  15. Push Publish and we’re done 🙂

Go to Woocommerce > Settings > Checkout

Step 28: Create Privacy Policy Page

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

  1. Title the page Privacy Policy
  2. Change the page template to full width
  3. To add a custom title > push + and add a new row
  4. Click the pencil to edit the row -> we want to add 262px to the top padding so the title falls below the header menu
  5. Now we want to add a text box > push the + button and add text box. We want to add our custom title here. For the demo site we will put “Privacy Policy”
  6. Add a separator underneath the text box > + button > separator. Change the color and make the border width 3px and the element width 20%
  7. As a friendly reminder, always remember to click save
  8. Now add another row so we can put in some content for our privacy policy (or any other page you have that you want to write content for) -> push + and add a new row
  9. Change the inner row’s row type to boxed by clicking on the pencil to edit the row and scrolling down to the row type and selecting boxed
  10. You can whatever content you like in the new text box
  11. Once you’re done, let’s add another empty space just for spacing issues. You can add this to the same row or below. Just push the + button and add an empty space -> we can leave it at 32px
  12. Push Publish and we’re done 🙂

Step 29: Make Sure You Have All Pages

Cart Page

First create a new page (Dashboard > Pages > Add New)

  1. Title the page as “Cart”
  2. Paste in this “[woocommerce_cart]” in the content section
  3. Click Publish

Go to Woocommerce > Settings > Checkout

Checkout Page

First create a new page (Dashboard > Pages > Add New)

  1. Title the page as “Checkout”
  2. Paste in this “[woocommerce_checkout]” in the content section
  3. Click Publish

Go to Woocommerce > Settings > Checkout

My Account Page

First create a new page (Dashboard > Pages > Add New)

  1. Title the page as “My Account”
  2. Paste in this “[woocommerce_my_account]” in the content section
  3. Click Publish

Now let’s set the page and activate our ability to allow guests to login

  1. Go to DASHBOARD > WooCommerce > Click on the Accounts tab
  2. In the “My Account Page” drop down menu, choose the accounts page you just created
  3. Check to enable registration on My Account page
  4. Click Save when done 🙂

Wishlist 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.

  1. Go to Wp-admin > YITH Plugins > Wishlist
  2. Change “Position” to “Use shortcode”
  3. Enable “Show “Add to Cart” button”
  4. Enable “Show Unit price”
  5. Click Save

Now you have your wish list page 🙂

Step 30-A: 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 a few blog posts.

  1. Go to your DASHBOARD > POSTS > Click Add New
  2. Title your blog post whatever you want
  3. Type in whatever content you want and change the text formatting if you would like
  4. Once you’re done you can add in a category for the blog post if you would like
  5. 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 30-B: Format Single Blog Post Page with Widgets

This section is NOT covered in the video tutorial on how to create an ecommerce website with wordpress

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

If you want to have a sidebar you will need to add widgets to your blog posts. Do the following:

  1. Go to your wordpress Dashboard > Appearance > Widgets
  2. Drag whatever widgets you want into the sidebar area
  3. Make sure you click save on each widget you drag in

Step 31: Add Header and Footer Menu to WordPress website

To add or modify your header and footer menu, do the following:

  1. Go to appearance > menus
  2. Click the link that says Create a New Menu
  3. Title the menu and click create / save
  4. Now select the pages you want to show up on the menu or create custom links and click the button “add to menu”
  5. Then you can rearrange the menu items or change the labels by clicking the down arrow on the menu items
  6. At the bottom choose your wordpress theme location (select the header, for the header menu, and the footer, for the footer menu)
  7. Click save menu

Do the steps above for the header and for the footer 

You do not need to have the same items for the header and footer. Just look at the demo site as an example.

Step 32: Link Everything together

Here is a list of the “things” you need to link on your online store

  1. Slider buttons
  2. Buttons below the slider on the homepage
  3. Call to action link on homepage
  4. About page call to action
  5. FAQ call to action

Step 33: WooCommerce Settings

Now we are going to set the settings for our ecommerce website

Go through all the tabs

First, let’s go make some pages the default pages for viewing the cart and checking out.

  1. Go to DASHBOARD > WOOCOMMERCE > SETTINGS
  2. Click on the Checkout tab at the top
  3. Scroll down to Checkout Pages
  4. 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.

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

Add-on options

And you’re done!!

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.

EXTRA: Resize Product Images (sizing) – OPTIONAL

If you installed the theme on an existing site, you need to make sure the product image sizes in WooCommerce will fit your newly installed theme.

In this same section that you are currently in ( =WooCommerce > Settings > Products >Display) -> Scroll down to the “Product Image Sizes” section and update those values to the following

To see the changes after you update the image sizes, you need to re-generate the images WordPress is using.

  1. You can find the option to do it by navigating to Tools > Regen. Thumbnails.
  2. If you cannot find it you’ll need to install the Regenerate Thumbnails plugin.