In this lesson will make a WordPress eCommerce website using the WooCommerce plugin and the Storefront theme. This Lesson assumes that you have completed Lessons 8-10 in our WordPress Training Program.

If you are already confident working in WordPress and simply need to learn how to make an e-commerce website, you can probably jump right in. There is an earlier lesson, Lesson 7, that will teach you how to set up a WordPress WooCommerce product. To create this website you need to have access to creating a new WordPress website. If you don’t have a website domain, you could spin up a WordPress website with Local By Flywheel.

The website text and images are provided in this Google Doc:

Website Content

First, we will focus on setting up the website. Then, we will add the products and set up a fake payment method. At that point you will have a functional e-commerce website. Last but not least we will create a custom home page and a Contact page. 

Setting up an E-Commerce Website with WooCommerce

Step 1. Install WordPress

Let’s start out by installing WordPress to your website hosting via Softaculous in cPanel. Install the website to a folder on your domain. Be sure to install it to a folder, or you will overwrite your primary website.  

As before, we sure use YOUR email address in setting up the website. Do not use the default email address, or you won’t receive the website emails. 

Step 2. Install the StoreFront theme

• After logging into your website, navigate to the admin dashboard (on the backend of your website. 
• Go to Appearance->Themes->Add New. 
• Search for the theme named “StoreFront“. It looks like this:

• Install it and activate it. This is the theme we will be using for this website. 

Step 3: Upload Photos to Media Library

Download the product photos to your computer, and then upload them to the Media Library. The Media Library is in the Dashboard. 

Download Website Images: https://webdevstudents.com/extreme-vacations-photos.zip

Step 4: Install the WooCommerce Plugin and Run the Wizard

• Delete all of the existing plugins
• Navigate to Plugins->Add New. 
• Search for the WooCommerce plugin. 
• Install it and Activate it. 

Once you install the plugin, follow the wizard’s instructions to set up the store. Use your judgment on the various settings. The more options you select the more complex the website, so it is generally better to not accept all of the options. 

Under NO circumstances purchase anything. We are using all free tools in this lesson.  Keep in mind that WordPress developers need to make a living, and so you will see efforts to upsell you on services. Learn to ignore these. Later, when you are benefitting from the services financially, that would be the time to consider making donations or purchases of premium services. Often the purchase of premium services comes with service from the developers. 

Use your judgment with all of the questions the wizard will ask you. It will ask you for a store address, and you can either use a school address or your home address. No one will see the address you put in.  

No need to sign up for JetPack. Do not sign up for the additional Business Services. 

Step 5. Add the first product

The wizard will show you how to add your first product. If you are following all of the Lessons in this WordPress Training Program, you have already done this in Lesson 7. Lesson 7 has instructions that are more detailed.

Choose “Add Manually”. The first product is: Safari to the Masai Mara Reserve in Kenya. Be sure you add all of these fields:

• Featured Image: Use the search to find the images with “kenya” in the name.
• Gallery Images
• Long Description (at the top of the Edit Product page). Include the map in the long description.
• Short Description (at the bottom of the Edit Product page)
• Price and Sale Price
• Check the Virtual Product box

We will add the rest of the products later.

Step 6: Other plugins

Delete all of the plugins except for the WooCommerce plugin  and install these two:

1. reSmush.it Image Optimizer: The purpose of this plugin is to automatically optimize your images when you upload them. This is critical to make your website images load quickly. Here is a link to where you can download the plugin: https://wordpress.org/plugins/resmushit-image-optimizer/

2. Ninja Forms: Use this plugin for the contact form on your website. You can find this one from the Add Plugin page by searching.

Step 7. Create a Custom Home page

Navigate to the home page. In Customize->Home Page Settings, create a page called “Home” and set the home page to it. 

We will come back and design the home page in the third week. For now, publish and close Customizer, and click Edit Page. Add the Products (Beta) block. It will pull in the product you already added, and as you add more products they will appear on the home page. 

Step 8: Create a menu in Customizer with the following pages:

• Home
• Shop*
• Cart*
• Checkout*
• Contact (we’ll add the actual contact form in week 3)

Create a new menu. Make it the Primary Menu. Name it Main Menu

*The Shop, Cart, and Checkout pages were created for you when you went through the WooCommerce Wizard. If you don’t see them, then you need to run the WooCommerce Wizard again. Do not make them yourself. 

Adding the Rest of the Products

Now that we have a fully functional e-commerce website, we are ready to add the rest of the products.

Step 1: Add Products

It will be easier to Customize and create your homepage once you have products added. Scroll to the end of this document to find the product information. 

For each product you should add the following fields, at a minimum:

• Featured Image
• Gallery Images
• Long Description (at the top of the Edit Product page). Include the map in the long description.
• Short Description (at the bottom of the Edit Product page)
• Price and Sale Price
• Check the Virtual Product box

How do you add a map to the description? 

The default for WooCommerce products is the old WordPress Editor, the TinyMCE editor. Simply switch over to the Text mode from the Visual Mode, and you can add HTML. You can see the Visual and Text tabs in the screenshot below. 

Remember that you can get the code for an embedded map from maps.google.com. Enter your location, then find the Share button, then the Embed button. 

Some themes may use the Block Editor instead of the old text editor. If your theme is using the Block Editor, then you can just add a map with the Google Map block.

Step 2: Set up Check Payments

E-commerce websites need to have a way to accept payments. Since this isn’t a real website, we won’t set up credit card payments. Instead, we will set up simulated check payments. 

From the dashboard, go to WooCommerce->Settings.  Choose the Payments tab. 

Turn off all forms of payment except for Check Payments. 

In the check payments, change the description to: “This website was created to learn WooCommerce. No actual vacations are available.” 

You now have a functional e-commerce website that can take orders! 

If you were making a real eCommerce website, this is where you would install credit card payments. (I recommend Stripe or Square for my clients as these are easy to set up. WooCommerce also has a payments method which I haven’t used yet. )

Step 3: Run a Test Order

Since the website is set up for “Check Payments”, you can safely place an order. This may seem a bit scary, because it looks like you are actually placing an order for a product that is thousands of dollars. Don’t worry…the only person that will see your order is you. 

1. Go to one of the product pages you created. 
2. Add your product to the cart. 
3. Go to the cart, then go to the checkout page. WooCommerce created these pages for you when you ran the WooCommerce wizard. 
4. Place the order be sure to use a real email address on the order. 
5. Check your email. You should have two emails from WooCommerce….one to you as a customer and one to you as the store manager. 

When you create an order, WooCommerce will send you an email as the store manager and also email you as a customer. The emails sent out by WooCommerce can be customized in WooCommerce ->Settings->Emails.

Sometimes there can be a delay before you receive the emails, and sometimes the emails will go to spam. That is because the email is sent from a server rather than from a person. One way to help emails to get through to your customers in a real e-commerce website is to use an email address with the same domain as the website. 

If you don’t receive the store manager email, then go to Users and see what email you used for your login. If you used an email that you don’t have access to, then make a new User account for yourself. 

When I am grading your lab for the week, I will be running a test order to make sure your e-commerce website works. 

The technique we are using with check payments is a great way to test out a new e-commerce website, especially if your client wants to customize the emails that are sent out. 

Design Your Website

Now that the products are created and the website is functional, it is time to design and finish your website.

Step 1: Create and Install your logo

When I teach my college students, I require that they make their own logo for this website. If you don’t want to do that you can use the words, “Extreme Vacations” as a text logo.

Be sure to create a logo that is landscape in shape. Most WordPress themes, including the StoreFront theme,  expect a rectangular logo that is landscape.

It is fairly easy to make a logo…this is how I teach my students to do it.  

As you can see with the Web Dev Students logo, the logo itself is rectangular and landscape. However, the image as a standalone will work perfectly as an icon/favicon.  That is why many logos are made with an image with text next to it. A rectangular logo is needed for signage and the website, and a square icon is needed for icons, avatars on social media, and the website favicon. 

After you make the logo, you install the logo in Customize->Site Identity in the StoreFront theme. (Other themes may have other places to insert the logo, but it will almost certainly be somewhere in “Customize”.)

Step 2: Create your icon/favicon

Create your favicon for WordPress.  The favicon must be square and exactly 512 x 512 pixels. Install the favicon in Customize->Site Identity. If you would like to skip this step, you can continue on to Step 3.

The favicon is displayed in the browser bar at 32×32 pixels. The reason why the icon/favicon is 512 x 512 pixels is because the websites can also display as icons on smartphones and tablets. 

You can use Mac Preview, Paint 3D on Windows, or with Google Slides to make an image to a specified size.  (If you have other software, better yet! Most web developers would likely do this editing in Illustrator or Photoshop.) We learned how to do this in CSCI1450, but we can also work on it in class if you need help. 

Step 3: Customize

Go through ALL of the customize settings to design your website

• Change the website colors to match your logo
• WooCommerce -> Store Notice->Add some text so that it is clear that vacations can’t be purchased

Step 4: Design your home page

Use the Block Editor (Edit Page) to design your home page.

 A home page is a good place for a hero image. You will likely want to crop one of the images to get enough information above the fold.  You can use the Cover block to create a hero image. 

There is some text for the home page in the Website Content section at the end of this document. 

Use several block types for the home page so you can become familiar with the options. For example, here are some commonly used WP Blocks you should get to know:

• Headings
• Paragraph
• Cover
• Photo
• WooCommerce 
• Photo Gallery
• List (either a ul or ol)
• Quote
• Button
• Separator (this is an <hr> but called a separator)
• Spacer 

Another good block to try on the home page of an e-commerce store is the Hand-picked Product Block. 

The photo gallery is easy to use.  A more complex block is the Columns block. You can make columns similar to Bootstrap columns in the Block Editor. 

Step 5: Add a Contact Form

Add a Contact page with the Ninja Forms plugin.

There is a WordPress Block for Ninja Forms. The instructions on how to use the plugin are in Lesson 10. 

Add at least one field to the form. A good field to add for this website is something like: “Which Extreme Vacation are you interested in?”

---

You now have created an e-commerce website! There are more lessons in the Advanced Part of this WordPress Training Program. If you are interested in learning HTML and CSS, check out our HTML/CSS Training Program!