3. Page:3
Contents
Section 1: Introduction................................................................................................................. 5
Welcome to the Course!........................................................................................................... 5
What are we Going to Cover in This Course?.......................................................................... 6
Why Should You Choose Storefront? ...................................................................................... 7
Meet Your Instructor!................................................................................................................ 8
The 5 Factors You Should Consider Before You Setup Your Store....................................... 10
The Creative Brief Worksheet ................................................................................................ 12
Conclusion to Section 1.......................................................................................................... 13
Section 2: Install WordPress and the Storefront Theme............................................................ 14
cPanel WordPress Install ....................................................................................................... 14
WordPress Configuration ....................................................................................................... 16
Install Storefront..................................................................................................................... 19
Install WooCommerce............................................................................................................ 25
Conclusion to Section 2.......................................................................................................... 30
Section 3: The Storefront........................................................................................................... 31
Configure the Menu Locations ............................................................................................... 38
Primary Menu......................................................................................................................... 38
Secondary Menu.................................................................................................................... 41
Create the Homepage............................................................................................................ 45
Homepage Control Plugin ...................................................................................................... 49
The Customizer...................................................................................................................... 56
4. Page:4
Add a Logo............................................................................................................................. 62
Import WooCommerce Dummy Data ..................................................................................... 72
Widgets .................................................................................................................................. 93
Products............................................................................................................................... 107
Conclusion to Section 3........................................................................................................ 113
Section 4 - The Storefront Child Theme .................................................................................. 115
Create a Child Theme .......................................................................................................... 115
Conclusion to Section 4........................................................................................................ 128
Section 5: Page Builder........................................................................................................... 129
Review the Page Builder Plugins ......................................................................................... 129
Install the Site Origin Page Builder Plugin............................................................................ 131
Install a Responsive Slider................................................................................................... 140
Change the Header Background Color ................................................................................ 153
Customize the Header ......................................................................................................... 157
Set up a Blog........................................................................................................................ 166
Run the Updater................................................................................................................... 176
Demo Site ............................................................................................................................ 177
Conclusion to Section 5 and the Course .............................................................................. 178
eCommerce Resources & Links .............................................................................................. 180
5. Page:5
Section 1: Introduction
Welcome to the Course!
This course is an introduction to the WordPress Storefront theme by WooThemesTM
.
At the end of this course you will be able to run your own eCommerce store with
WooCommerceTM
on a customized WordPress site.
Storefront by WooThemes is a new FREE WooCommerce theme and I will guide you in this
course to get you up and running with minimal effort.
6. Page:6
What are we Going to Cover in This Course?
This is an introductory course for new WordPress users seeking to quickly launch an
eCommerce store. Throughout the course I will cover the techniques used by experienced
WordPress users, and walk you through a step-by-step process for creating your own
customized store, and I’ll even include a Storefront child theme.
Because our goal is to get you setup as quickly as possible, we’ll breeze through installing the
required software, recreate the storefront demo, populate your site with the WooCommerce
data, create a slider, a blog, and you’ll learn how to install a child theme. At the end of the
course you will be able to run your own eCommerce store on a customized WordPress site, with
enough confidence to start selling products.
This course is designed for enthusiastic WordPress users who want to take their skills to the
next level. You are new to WordPress, who’s comfortable with computers but want to know
more. You have a desire to setup an online store, and an entrepreneurial spirit.
Thank you for joining my course and I hope you’ll enjoy your introduction to WordPress
eCommerce.
7. Page:7
Why Should You Choose Storefront?
Storefront is a free WordPress theme integrated with WooCommerce. Storefront was
developed by WooThemes the makers of WooCommerce.
Perhaps you have some items to sell and you would like to get your feet wet by setting up your
own online store. The default Storefront design is clean and simple. It’s an excellent starting
point from which to customize your store to match your brand, whether that's using the
WordPress customizer or a custom plugin / child theme.
1. With Storefront you can quickly setup an online store. WooTheme’s Storefront
theme will be the perfect way to start your online eCommerce venture.
2. Storefront is a flexible and simple solution. Maybe you have a bricks and mortar store
and you haven’t found the right software. Storefront is a simple solution to help you get
started.
3. Storefront can be an excellent alternative. Perhaps you have an outdated or
antiquated online store and you would like to upgrade to something new and easy to use.
Storefront can be an excellent alternative to get you fitted with the latest WordPress
theme and functionality.
4. Perhaps you want to sell eCommerce WordPress solutions to your clients. Maybe
you are a graphics or web designer and you want to start selling eCommerce WordPress
solutions to your clients. With Storefront you can create a child theme as I show you in
this course and make your CSS customizations. Or you can utilize the built in WordPress
customizer to make your design change.
8. Page:8
Meet Your Instructor!
Welcome to my course. I would like to tell you a bit about my background in graphic design and
website development.
I work as a freelance graphics, web and WordPress designer. Over the past 15 years I have
developed and managed websites for small businesses to large corporations. I have designed
and developed WordPress sites for clients for the past four years.
I received my Bachelor of Arts from York University in the mid-1980s. I ventured into graphic
design, computer graphics and studied Pre-Press Computer Graphics for Macintosh at the
Durham Business & Computer College in Toronto. I also took courses in basic computer
programming at Centennial College.
During the 1990s I freelanced as a graphics designer for a print brokerage firm. I designed
brochures, flyers, ad campaigns and advertising materials during this time. I enrolled in courses
to improve my design skills at the International Academy of Design’s Advertising & Design
Program. In 1998 I became a member of the accredited Association of Registered Graphic
Designers of Ontario.
9. Page:9
When I first started designing with the computer, there was this little known company called
Adobe - not so little any more - where my early technical skills included Photoshop, Illustrator,
Fireworks, Contribute and Dreamweaver.
Back then, QuarkXpress was the dominant print and design layout program and now we have
InDesign. In the late 1990s I migrated into web design because working with digital graphics
was a natural progressive move into online work for me.
When Netscape and Yahoo seemed like the next best thing since sliced bread, I taught myself
HTML and web design. During the 1990s, I had more clients interested in websites than
brochures and much to my chagrin some requested flash intros. I created my very first website
for a non-profit organization without the flash intro.
Before content managements systems proliferated the internet, I used PERL and CGI scripts
to create online forms and databases. Before Facebook and YouTube, I collaborated with
design agencies in corporate branding and designing client websites. The client would hand
me a paper mockup of what the site should look like, literally on a restaurant napkin. Sometimes
I recreated the design in Photoshop or I quickly mocked up the concept online.
During the late 1990s I diligently worked for small to large corporations maintaining their
websites and for a few years I specialized in the call centre industry.
Eventually new computer languages and technologies appeared with a vengeance while
eCommerce sites grew exponentially. Now everyone wanted a shopping cart and PayPal was a
new type of payment application that enabled you to pay online. Then it just seemed like it
happened overnight, blogs came on the scene.
In the past few years, I have created blogs, forums, Membership based sites, automotive
inventory sites and eCommerce sites. My technical usage includes HTML, CSS, Perl, ASP,
MySQL, and MSSQL and now PHP is quite popular thanks to WordPress and other content
management systems.
Before the proliferation of WordPress, I attended software seminars to acquire licenses to
market shopping carts to my clients. I worked with shopping carts that were based on CGI and
ASP, such as the VPASP shopping cart and the Actinic eCommerce software.
Today I’m introducing you to WooCommerce and Storefront. I’ll demonstrate to you how to
setup your own eCommerce website.
Thank you for joining my course and I hope you’ll enjoy your introduction to WordPress
eCommerce.
10. Page:10
The 5 Factors You Should Consider Before You
Setup Your Store
Before you get started with your eCommerce site, there are 5 factors you should consider prior
to setting up your Storefront software.
1. Project Goals
Before you commence any project determine your project goals for the website. Complete the
Creative Brief Worksheet included in the course to use as a guide for your project. You can
download the creative brief worksheet in the last lecture of this section to help you get started.
What exactly is it that you are going to sell with your store? What products will you sell? The
obvious is you should have something to sell. Before you do anything you should set up a plan
as to what it is you want this eCommerce software to do for you. You will also determine your
target audience profile and your communication strategy. This is a good place to start planning
the structure of your website.
2. Hosting and Domain Name
If you don’t already have a hosting account spend some time to Google and review hosting
companies who are compatible with WordPress and your specific needs. This course is
recorded on a hosted account with Hostgator. I purchased my domain through GoDaddy. I have
no affiliation with Hostgator or GoDaddy. You will need a host account and a domain name to
follow along in this course.
3. Financial Goals
Perhaps you require a small business merchant account which you could setup with your bank.
It might be easier to setup an Internet merchant account using an intermediary. There will be
fees associated with these companies. You may also require a method to process your
transactions such as a payment gateway. Merchant accounts can have payment gateways but
11. Page:11
you may want to review other options such as PayPal, Google Checkout and Amazon
Payments.
4. Shopping Cart
Since this course is based on WordPress you have chosen this option to setup your online store
using WooThemes latest eCommerce theme: Storefront. The new Storefront theme is
completely compatible with WooCommerce since they developed it. Storefront is a new theme
that is free to download. WooCommerce is also free to download. They provide you with
everything you require to get your products online.
5. SSL and Security
Depending upon what type of gateway you choose, you should consider purchasing a SSL or
Secure Socket Layer certificate. You can most likely purchase your SSL through your hosting
provider. In most cases, you will be processing payments off site if using PayPal, etc. Adding an
SSL certificate is optional but it’s definitely an added plus to let your visitors be aware that you
have an SSL protected site.
One of the most important factors to consider for your new website is security. I suggest you
install a security plugin for your WordPress site before you commence selling products. I’m not
affiliated with any of the iTheme plugins but if you’re uncertain which products to try, the
iThemes security plugin has a free version you can install and try. I also use iThemes
Backupbuddy plugin in conjunction with the security plugin to ensure the site is always backed
up.
12. Page:12
The Creative Brief Worksheet
The Creative Brief Worksheet will help you define the purpose and goals of your project, who is
the target audience and what content to include. It’s important that you have a clear plan for
your website. Once you have determined your goals, content and strategy, you can refer to the
brief as your guide from time to time to remind yourself to stay on track.
Download the creative brief worksheet from the last lecture of Section 1 to help you get started.
13. Page:13
Conclusion to Section 1
Congratulations! You’ve made it to the end of the first section of this course.
In this section I introduced you to the Storefront theme and WordPress. I reviewed the topics
we’ll cover in the course, as well as the requirements. At the end of this course you will be able
to run your own eCommerce store on a customized WordPress site. I also touched on why
and who this course is for, and how Storefront is an excellent online store for you.
I introduced you to who I am: my credentials, my experience as a graphics, web and WordPress
designer, my work with eCommerce applications, and my experience building WordPress sites.
I reviewed how you should assess your eCommerce needs and requirements. There are 5
factors you should consider before you start your eCommerce site.
1. Define your project goals
2. Choose a hosting and domain name
3. Determine your financial goals
4. Review your shopping cart
5. Consider your SSL and security
I also included a download for The Creative Brief Worksheet to help you define the purpose
and goals of your project, who is the target audience and what content to include. It’s important
that you have a clear plan for your website. Once you have determined your goals, content and
strategy, you can refer to the brief as your guide from time to time to remind yourself to stay on
track.
In the next section, we'll dive right in and install WordPress, the Storefront theme, and
WooCommerce.
14. Page:14
Section 2: Install WordPress and the
Storefront Theme
cPanel WordPress Install
In this lecture, I demonstrate a WordPress quick install from your hosting account’s cPanel.
Please note if you have a different hosting account, your panel might not appear exactly as
shown in the video lecture. You can refer to your hosting company’s documentation or support
to access your cPanel. If you don’t know what you have feel free to post a question in the
discussion forum.
Login to your cPanel and install WordPress.
Find your Quick Install link if you have something similar. Click on Quickinstall – software
and services tab – WordPress – Leave blank for now to install to the root of the account.
It setups the database and configuration files for you.
16. Page:16
WordPress Configuration
Now is a good time to familiarize yourself with the WordPress dashboard and the various tools
at your disposal. I’ll show how to prepare your site before we proceed to download the
Storefront software.
1. Go to Settings > General. We’ll make some changes on this page. Here you can modify
your store site title and change the tagline.
I’ll change my tag line to: “High quality Mercury drain plugs for your boat.” You can
change the tagline to suit your website description.
Change the time zone to suit your region.
And save changes.
17. Page:17
Navigate to Settings > Permalinks
I will select Post name for my permalinks. For my site I don’t require the date and post
name. If it suits your needs keep it as is. I prefer to simply show the post name.
And Save Changes.
After my quick install, I noticed that my host company Hostgator included a few plugins
automatically. If you did an auto install it’s possible your host may have also included a few
extra plugins. In my install I immediately noticed a few new plugins that would not be
automatically included. There’s Jetpack, a Marketplace plugin and the WP Super Cache plugin.
I see the benefit in having the WP Super Cache plugin. As for the Marketplace plugin I’ll just
ignore it for now. If there’s something useful there I will explore it in a new lecture.
18. Page:18
Let’s take a look at the WP Super Cache plugin. This plugin has a multitude of options to
choose from.
If you would like to learn more about this plugin, I’ve included a link in the resources
section for you.
Since search engines now consider site speed to be an important factor in search engine
rankings, this type of plugin can improve your site load speed.
https://wordpress.org/plugins/wp-super-cache/
19. Page:19
Install Storefront
You can download the Storefront theme from the WooTheme’s website and install it.
http://www.woothemes.com/storefront/
I’ll show you how to install the theme from within WordPress by using the Add New Themes
option in the Appearance sub-menu.
1. Log in to the WordPress Administration Panel.
2. Select the Appearance panel, then Themes.
3. Select Add New.
20. Page:20
4. Use the Search and type Storefront.
5. Click on the Install Now link to upload the Theme to your blog.
22. Page:22
8. If you click on the new activated theme’s visit site link you’ll see how the site appears at
this moment. Don’t panic. We haven’t configured the site yet.
9. Next click on the welcome screen link of the ‘Get started with Storefront’ link.
23. Page:23
10.This is a guide to help you configure the theme. I’ll go through all the steps with you.
Let’s take a look at the WooTheme’s online demo version of the Storefront theme located on
their website:
http://demo2.woothemes.com/storefront/
This is what the online store looks like when it’s completed. You will create something
simillar to this onine demo version.
24. Page:24
I’ll show you how to add products to the store and it’ll look similar to the online demo when
we’re done.
The next step is to install WooCommerce.
• Storefront Links:
o http://www.woothemes.com/storefront/
• Storefront is also available at WordPress.org’s theme’s directory listings:
o https://wordpress.org/themes/storefront
• Storefront Documentation:
o http://docs.woothemes.com/documentation/themes/storefront/
25. Page:25
Install WooCommerce
We’ll Install the WooCommerce plugin and activate it.
If you haven’t already done so navigate to Appearance > Storefront.
Click on the Install WooCommerce button.
Click on the Activate plugin link.
26. Page:26
After you activate the plugin you’ll see the Install WooCommerce Pages button.
If you’re little curious and you just can’t wait to see what happened after you installed the
WooCommerce plugin go ahead and take a quick peek at the front end of your website. It
should look similar to my screen. There’s a Search for products section and the cart
items will be visible now.
27. Page:27
Let’s finish with the WooCommerce install. If you scroll down the screen you’ll see that
the WooCommerce plugin has been installed.
Click the Install WooCommerce Pages button.
You should now see the Welcome to WooCommerce screen.
28. Page:28
Let’s go take a look at the front end of your website to see what just happened. A series
of new pages were added to your website.
Let’s click on the shop link. You’ll see this message: No products were found matching
your selection. We’ll get to that. For now I would like you to look at the new pages
created by WooCommerce. Familiarize yourself with the new front end and the back end.
29. Page:29
If you click on the Sample page, there’s nothing new there. That came with your theme
install. We’ll clean this site up shortly.
Let’s take a look at My Account. All of these pages can be edited by you. For now we'll
quickly review what was just installed.
30. Page:30
Conclusion to Section 2
Section 2 is done.
You’re moving along quite nicely.
Here’s what we covered in the WordPress and Storefront installation section.
• In this section you installed a WordPress theme on your hosting account's cPanel.
• Please note if you have a different hosting account, your panel might not appear exactly
as shown.
• I demonstrated how to perform a quick install on a hosted account.
• Now is a good time to familiarize yourself with the WordPress dashboard if you haven't
already done so.
• I showed you how to prepare your site before we proceeded to install the Storefront
theme.
• You also installed the new Storefront theme and the WooCommerce plugin.
• You activated the WooCommerce plugin.
That's it for Section 2! In the next section, we'll cover all the steps to setup your online store.
31. Page:31
Section 3: The Storefront
By now you will have installed the Storefront theme. If you haven’t already done so please refer
back to the lecture to install the Storefront theme.
To access the Storefront welcome page navigate to Appearance > Storefront.
32. Page:32
It’s a guide to the theme setup we’re following.
As you scroll down you’ll notice there are some enhancements available. These are
optional extensions that can be purchased.
33. Page:33
Let’s navigate to Pages and review some of the new pages created after you’ve installed
the Storefront theme and the WooCommerce plugin.
For example, let’s click on the Cart Page.
34. Page:34
What you’ll see is a shortcode called [woocommerce_cart].
Click on the View Page button.
35. Page:35
You’ll see how this page appears on the front end.
This shortcode is returning the message that “Your cart is currently empty.” If you had
some products and purchased some items it would appear on this page. Keep in mind
that these shortcodes are just short bits of code that cut down on repeating HTML and
can be anywhere in your site.
36. Page:36
If you look at another page created by the WooCommerce plugin, the My Account page,
you’ll see a shortcode called [woocommerce_my_account].
Now if you were to view that page, you’ll see the current generic ‘My Account’ text.
37. Page:37
WooCommerce has some extensive documentation on Shortcodes:
http://docs.woothemes.com/document/woocommerce-shortcodes/
Installing storefront
Installation Configuration documents:
http://docs.woothemes.com/document/installation-configuration/
38. Page:38
Configure the Menu Locations
Before we populate the store, let’s configure our store menu settings.
When activating Storefront for the first time, you won’t see anything in the secondary navigation
when viewing the front end of your web site.
We’ll configure the menu locations to create a Primary, and a Secondary menu. I will show you
how to add menu items.
Primary Menu
Go to Appearance > Menus. We’ll now create the menus for your store.
39. Page:39
Click on the Create a new menu button or click in the Menu name field and type Primary.
Click on Create Menu
.
40. Page:40
Add menu items from the left under the pages section.
We’ll click to add the Shop and then click to add the main menu for now.
41. Page:41
When you’ve added the new menu item, click on save.
Secondary Menu
Create a secondary menu by clicking on create a new menu.
42. Page:42
Click on My Account, then Add to Menu to move it to the Secondary menu.
When done, click on Save Menu.
43. Page:43
We have to navigate to Manage Locations and assign the new menus we created.
Let’s look at our site now.
You’ll see Shop is the only menu item just like we set it up for the Primary menu. The
Account link is now positioned in the Secondary menu. We’ll make more modifications to
this menu structure in a later lecture.
44. Page:44
If you’re interested you can read the WordPress codex to learn more about creating and
assigning menus to theme locations.
http://codex.wordpress.org/WordPress_Menu_User_Guide
45. Page:45
Create the Homepage
Storefront has two templated pages included, the Full Width template and the Homepage
template.
We’ll setup the Storefront homepage template that will display a selection of products from your
store.
Navigate to Pages > Add New.
Create a new page and assign the "Homepage" template to it.
We’ll call it Homepage.
Click on Publish.
Now if you want to take a look at the published Homepage, click on View Page to see
what you created. There’s a few headings but it’s any empty page. Plus we still have to
assign this page under the Reading settings in order to make it visible on the homepage
of our website.
46. Page:46
Navigate to Settings > Reading.
You will then set that as a static homepage in the Reading Settings.
Click on a static page.
48. Page:48
Now if we navigate to our website’s homepage you’ll see your new homepage is there.
Currently the homepage is pretty empty. We’ll add some products in a later lecture.
49. Page:49
Homepage Control Plugin
The Homepage Control panel is an optional free plugin. I’ll download and install the Homepage
Control plugin to show you how it works and what you can do with it. Once setup you can toggle
and re-order the homepage components using the plugin. Preview the home page and assign it
to the Primary menu. You will see why the homepage is empty. In the next lecture we’ll populate
the store with products.
I’ll install the plugin from the add plugins section.
Go to Plugins > Add New > In the Search Plugins field type Homepage Control Panel.
50. Page:50
Click on Install Now for the Homepage Control plugin by WooThemes and activate it.
As it states it’s a simple drag and drop solution for arranging the order products are
displayed on a page.
Once setup you can toggle and re-order the homepage components using the plugin.
51. Page:51
Preview the home page and assign it to the Primary menu. Shortly we’ll populate the
store with products.
Let’s navigate to Appearance > Menus.
Select the Homepage and click on Add to Menu. Ensure Primary menu is selected.
52. Page:52
Click on Save Menu after you’ve added Homepage to the Primary menu structure.
You can also change the name from Homepage to Home if you prefer to do so. You can
toggle the arrow up or down next to the word Page and under Navigation Label you will
be able to change the name of your menu item to whatever you like.
53. Page:53
To find the new Homepage control plugin go to Appearance > Homepage.
This is what the Homepage components look like.
54. Page:54
Whatever items you have selected in the homepage control panel will also appear on the
front end of your homepage.
You can drag and drop the components from the back end to switch the order.
55. Page:55
If you move the Storefront On Sale Products to the top, this is how it will appear.
Remember when you create a page for the Homepage, you will have to assign the
"Homepage" template to it. After you create your new page, go to Page Attributes =>
Template and set to Homepage.
56. Page:56
Please Note: If you find your homepage doesn't have the same layout as shown in my
lecture, ensure that you have assigned the Homepage template to your new page.
The Customizer
You can adjust the Storefront’s appearance with the WordPress customizer.
Let’s review the customizer settings.
Go to Appearance>Customize.
57. Page:57
This is how the customizer will appear.
You can make adjustments in real time.
58. Page:58
As I’m typing the changes to my title it appears in the front end of my website. When
done, hit Save & Publish.
Background: You can change the background color and image from here.
59. Page:59
Header: You can change the text color, link colors and the header background colors.
Footer: You can change the text color, link colors and the footer background colors.
60. Page:60
Typography: Change the color of links and certain elements, the text color, and the
heading color.
Buttons: Modify the background, text colors for the buttons.
61. Page:61
Layout: Change the sidebar position from left to right.
Navigation: Change the menu.
Header Image: If you like you can upload an image to the header that will appear in the
header background.
Here’s the link for the Storefront Customizer Settings:
http://docs.woothemes.com/document/customizer-settings/
62. Page:62
Add a Logo
Let’s add a logo to the website.
There are two methods to add a logo to your site. The first method you can activate Jetpack.
The second method which is a little more advanced requires you to add the logo to your child
theme functions.php file. The simplest way to add a logo to the theme is to activate Jetpack to
enable a custom logo option in the customizer. You’ll install jetpack. Activate Jetpack to enable
a custom logo option in the customizer. If you would prefer not to activate Jetpack and you are a
more advanced WordPress user, I have included a link on how to add a custom logo in the
resources section for this lecture.
I will describe below how to activate Jetpack to add your own logo.
Activate Jetpack.
If you don’t have Jetpack installed navigate to Plugins > Add New. You’ll see Jetpack by
WordPress.com.
63. Page:63
Click on the install and activate it. Mine is already installed.
You’ll see a message Your Jetpack is almost ready!
Click on the Connect to WordPress.com or click on Connect to Get Started.
64. Page:64
If you’ve just connected to WordPress.com, you’ll arrive at the screen below.
I don’t have an account so I clicked on Need an account link.
65. Page:65
I created an account and clicked on the Sign up button.
You’ll see the message to check your email.
67. Page:67
Once activated you’ll see the message below.
If you see the Activate Now button, you do not have to click on it to activate it for now.
68. Page:68
Go to Appearance > Customize > Site Title & Tagline section of the customizer. This will
replace the text title / tagline with the logo image I upload.
You will see the word Logo added next to the Site Title and Tagline.
We are going to expand the tab and add a logo.
69. Page:69
The Media uploader will appear. If you do have a logo, you can now upload it from your
machine.
Your logo will load and be available in your media library. Click on the Set as logo blue
button. My logo is 235 x 36 pixels.
70. Page:70
Click on the Save and Publish button. Refresh your page if you don’t see your new logo.
If you like you can go back to your Jetpack section and deactivate the plugins.
71. Page:71
You can bulk select everything and deactivate it.
It’s also possible to get an account without having to use their blog service. Just make sure that
when you go to http://www.WordPress.com to get your account, you specify that you only want
a user name and not a blog.
The link below also explains how to add a logo to Storefront.
http://docs.woothemes.com/document/storefront-faq/
If you’re an advanced user this link explains how to add a logo to your child theme without using
Jetpack.
http://docs.woothemes.com/document/add-a-custom-logo/
72. Page:72
Import WooCommerce Dummy Data
You will use the WordPress importer to locate and import data. I will demonstrate how to install
the dummy data. The dummy data for WooCommerce is located in a file called
dummy_data.xml which is located in the WooCommerce plugin directory.
I’ll show you how to change the product and catalog image sizes. I will show you why and how
to regenerate your thumbnails.
The dummy data we’ll be importing into our site is included with WooCommerce. We will also be
installing the WordPress importer.
Locating the WooCommerce Dummy Data
The dummy data for WooCommerce is located in a file called dummy_data.xml which is
located in the WooCommerce plugin directory.
So now we have to find this data. Since we have installed everything live on the server
there’s a couple of ways we can get this data.
73. Page:73
This can be located in the WordPress installation via your cPanel.
You can use an FTP program to download a copy to your machine from your server.
74. Page:74
You can download the plugin from the WooThemes website.
The first method I’ll show you is to FTP to your website’s server files.
With the WooCommerce plugin installed on your site, login to your website’s FTP account and
navigate to the folder that contains the dummy-data.xml file. I’ll show you how to do that with the
free FTP program that I use. Once logged into your server’s directory you’ll have to find the wp-
contents folder:
/wp-content/plugins/woocommerce/dummy-data/dummy-data.xml
When you find the file then you download the dummy-data.xml file to your computer
(remember where it downloads to).
If you would like to download files using an FTP program and you don’t have one installed, go to
https://filezilla-project.org.
75. Page:75
Download the Filezilla Client.
Once installed, open the ftp application.
Go to File > Site Manager and click on the create a New Site button.
76. Page:76
Name your new site.
You’ll need your FTP Host name, Username, and password.
If you don’t know what that is, please contact your hosting company to obtain the
information.
Once you’ve created your site information click on the Connect button to log on to your
server.
77. Page:77
On the left side are your computer files and on the right side you’ll see your server files.
You’ll need to navigate to the folder where you’ve installed your WordPress site.
78. Page:78
Navigate to where WooCommerce is installed go to ‘wp-content/plugins/woocommerce’
and locate the dummy-data folder to find the dummy_data.xml file.
We are going to drag and drop the dummy_data.xml file from the server to your
computer.
Find a folder and remember where you’ve dragged the file.
79. Page:79
Another way to get the dummy data is to download the WooCommerce plugin.
Download the WooCommerce plugin to your computer.
http://www.woothemes.com/woocommerce
Unzip it, and the file will be in /woocommerce/dummy-data/dummy-data.xml.
You could also go to the plugins repository and download the plugin from there.
Go to the Wordpress.org site and download the woocommerce plugin at.
https://wordpress.org/plugins/woocommerce.
Save it to your machine.
Unzip the file and you’ll have a copy of the dummy_data file on your machine.
And another way to get the data is to Navigate to your cPanel and download it from there.
80. Page:80
1. From your cPanel go to Files and then File Manager.
2. Now we can see all the files from the server.
3. Navigate to where WooCommerce is installed
4. Go to ‘wp-content/plugins/woocommerce’ and locate the dummy-data folder to find the
dummy_data.xml file.
81. Page:81
5. Select the dummy_data.xml file and download it.
6. Now use the WordPress importer to locate and import the WooCommerce dummy data.
7. From the WordPress admin area go to Tools -> Import.
82. Page:82
8. Click on the WordPress link.
9. If you do not have the WordPress importer installed you will be prompted to install the
importer, install it and proceed.
10.Activate the plugin and run importer.
83. Page:83
11.Find the dummy data file you downloaded to your computer. Then click on the Upload file
and import button.
12.Assign yourself as the user and select import attachments.
84. Page:84
13.Check the download and import file attachments checkbox. The latter will download all
the images to your local server for use on the products.
14.Click Submit, sometimes it takes a while to install, and your dummy data will now be
installed, and you now have a working copy of WooCommerce with data loaded.
When finished, a message will appear All done. Have fun!
Dummy data link:
http://docs.woothemes.com/document/importing-woocommerce-dummy-data/
1. Go to the front end of your store to see how the installed dummy data appears.
85. Page:85
2. You may notice that some items may be missing and some will be there.
3. If your store is missing images we can add them in.
86. Page:86
4. Navigate to products > categories in your back end.
5. You can see all of your categories in this section. There’s clothing, Music and Posters
which is exactly what you see on your home page from the front end.
6. Now we need to add an image to the clothing category.
87. Page:87
7. Click on Clothing then edit.
8. You can see that the thumbnail is empty.
9. Click on the Upload/Add image button.
88. Page:88
10.You’re library will now be full of the dummy data images you downloaded.
11.Select an item of clothing and click on the blue Use Image button in the lower right hand
corner.
12.You’ll see a preview of the image. Click on the Update button.
89. Page:89
Keep in mind when you create your own store, you can delete these categories and create your
own. If you would like to complete this lesson you can continue to add in the remaining category
images.
1. If you go to your front end and refresh the browser, you’ll see the missing category
images are now there.
2. You can also change the size of your images on your site.
90. Page:90
3. Go to WooCommerce > Settings > Products. Scroll down to the Catalog images section.
4. We’ll increase the size to 300 x 300 pixels. Hit save changes and navigate to the front
end.
5. If you look carefully at the images you’ll notice that they are blurry. In order to fix this
you’ll have to regenerate the thumbnails. There’s a plugin for that called the regenerate
thumbnails.
91. Page:91
6. Go to Plugins > Add New. Do a search for regenerate thumbnails. Click install now and
activate the plugin.
7. Navigate to Tools > Regenerate thumbnails.
92. Page:92
8. Click on the Regenerate All Thumbnails button.
9. When it’s done, go to the front end of your site and refresh your browser. The images will
look crisp.
93. Page:93
Widgets
Let’s review the Widgets area.
1. With Storefront you have 6 widgets regions. The Header widget region is highlighted.
2. This is the Sidebar
94. Page:94
3. Below is the Footer x 4 (You can have up to 4 columns). Currently there isn’t anything in
the footer area except for the copyright notice.
4. To access your widgets go to Appearance > Widgets
95. Page:95
5. For the header widget it will appear before the main site content and beneath the header.
6. You can drag and drop a text widget into the Header widget.
96. Page:96
7. Add some text to the Text widget and hit save.
8. Go to the front end, refresh your browser and you’ll see where the Header widget goes.
97. Page:97
9. To remove the text widget you can delete it or drag it away from the Header widget.
10. Sidebar widgets are to the left and right. You can see what’s contained in the Sidebar
widgets.
98. Page:98
11. Go to the front end and you’ll see where these widgets appear.
12. The 4 footer widget regions are arranged into equal width columns dependent on how
many regions are active. For example if you have widgets in the Footer 1 region and
widgets in the Footer 2 region, they will be organized into two equal width columns while
Footer 3 and 4 simply won’t display at all. Let’s add some content to our widgets.
Currently the four footer widgets are empty.
99. Page:99
13. We’ll add content to Footer 1 and Footer 2.
14. Drag the Recent Comments widget into Footer 1 and add a title, hit save.
15. Drag the WooCommerce Top Rated Products widget into Footer 2.
100. Page:100
16. Change it to 3 products and hit save.
17. Look at the front end of the store and you’ll see that the footer has these two widgets we
just added.
18. You can add more widgets to Footer 3 and Footer 4. For now I’ll leave it as it is.
101. Page:101
Change the footer background color.
1. I’ll change the background colour to the footer area. To do that we’ll go to the customizer.
2. Go to Appearance > customize.
102. Page:102
3. The background color will now be #006477 a teal colour. Hit save and publish.
4. This is how it looks on the front end.
5. We now have to make changes to the font colors.
103. Page:103
6. Change the heading colors to white.
7. We’ll change the text colour to light blue: #8aa6ad.
104. Page:104
8. We’ll change the link colour to a lighter blue: #caebf7. Hit save and publish when done.
Review Sidebar Widgets.
1. Let’s go to Appearance > Widgets > Sidebar
2. Currently there are 6 widgets in the Sidebar.
3. Let’s remove the Meta widget.
4. Navigate to your front end and go to a page with a sidebar.
5. When you view the Sample page you’ll notice that the Meta box is gone.
6. Since we don’t have any blog posts, I’m also going to remove the Categories widget.
105. Page:105
7. Go back to Appearance > Widgets > Sidebar. Remove Categories from the Sidebar list.
8. What I would like to add is the cart widget to the sidebar.
9. Let’s grab the WooCommerce Cart widget and drag it to the Sidebar. Hit Save.
106. Page:106
10.Now the Cart widget is located in the sidebar.
If you require more flexibility to change your widgets, you can download the woosidebars plugin.
https://wordpress.org/plugins/woosidebars/
107. Page:107
Products
Let’s review the products from the back end.
1. You can see all the products that are currently populated in the store.
2. This structure gives you the foundation to populate the store with your own products. It’s
a good starting point to see how a final store will appear and now you can start creating
your categories and products.
Think of the dummy data as a convenient way to help you populate your store. I find it much
easier to work with a store that already has content rather than an empty store. Once you study
the structure and understand the product setup it will be easier for you to re-populate the store
with your own products.
You will be able to add in your own products anytime. Simply delete the existing dummy data
when you no longer need it.
109. Page:109
3. Click on View Products in the menu to see it.
4. This is how it appears in the front end.
110. Page:110
5. Add/modify the title, description, short description, select product category, add image
product gallery and set featured image, and you can add more products to the gallery.
In the front end you’ll notice the Feature Products section is empty.
1. Let’s add some products here.
2. To make a featured product: Go to Products > Products.
111. Page:111
3. Toggle on the star of the products that you would like to feature.
4. I’ll feature a few products.
5. As highlighted below, I selected a few stars to enable the feature option.
112. Page:112
6. Go to the front end, refresh your browser and see the featured products you added.
113. Page:113
Conclusion to Section 3
Great! Section 3 is done. This section you just completed is the real heart of this course –
setting up the Storefront.
Here’s what we covered in the Storefront section.
By now you will have installed the Storefront theme. If you haven’t already done so please
refer back to the lecture to install the Storefront theme in the previous section.
• I showed you how to access the Storefront sections and the shopping cart.
• I reviewed the installed Storefront pages and the shortcodes.
• We also touched upon the WooCommerce options panel.
Configure the Menu Locations
Before we populated the store, we configured our store menu settings.
• You configured the menu locations to create a Primary, and a Secondary menu.
• I showed you how to add menu items.
The Homepage
• I showed you how to setup the Storefront homepage that displays a selection of products
from your store.
• You created a new page and assigned the "Homepage" template to it.
• You then set that as a static homepage in the Reading settings.
• Since the homepage was empty as we added some products.
The Homepage Control panel is an optional free plugin.
I downloaded and installed the Homepage Control plugin to show you how it works and what
you could do with it. Once setup you can toggle and re-order the homepage components using
114. Page:114
the plugin. I previewed the home page and assigned it to the Primary menu. At this time the
homepage was still empty as we prepared to populate the store with products.
The Customizer
Next you learned how to adjust the Storefront’s appearance with the WordPress customizer. I
reviewed the customizer settings available for the Storefront.
Add a Logo
I showed you how to install Jetpack. You activated Jetpack to enable a custom logo option in
the customizer. The simplest way to add a logo to the theme is to activate Jetpack. If for some
reason you prefer not to activate Jetpack and you are a more advanced WordPress user, I
included a link on how to add a custom logo in the resources section of the Add a Logo lecture.
Import Data
You then used the WordPress importer to locate and import data. I demonstrated how to
install the dummy data. The dummy data for WooCommerce was located in a file called
dummy_data.xml which was located in the WooCommerce plugin directory.
You could also go to the plugins repository and download the plugin to your machine. I showed
you how to change the product and catalog image sizes. I also showed you why and how to
regenerate your thumbnails.
Widgets
In this widgets lecture I reviewed the Storefront widgets area. You learned how you can add
content to the header, sidebar and the footer. With Storefront you have 6 widget regions.
Header, Sidebar, Footer x 4. I showed you how to change the background colour to the footer
area.
Products
Finally I reviewed the Storefront products. You learned how this structure gives you the
foundation to populate the store with your own products. It’s a good starting point to see
how a final store will appear and now you can start creating your categories and products.
Think of the dummy data as a convenient way to help you populate your store. You will find it
much easier to work with a store that already has content rather than an empty one. Once you
study the structure and understand the product setup it will be easier for you to re-populate the
store with your own products. You will be able to add in your own products anytime. Simply
delete the existing dummy data when you no longer need it.
115. Page:115
Section 4 - The Storefront Child Theme
Create a Child Theme
You will learn how to create a child theme. (This is a bonus lecture. This section is optional. The
child theme is available to download and install in the resources section). If you will be
customizing your site with CSS then I suggest you use a child theme.
1. You’ll create a theme directory for your WordPress install.
2. I’ll create it on my computer first. The new directory will be called storefront-child.
116. Page:116
3. When done we’ll have to upload the child theme files to our server.
4. I created 3 files which are placed inside the storefront-child folder: functions.php,
screenshot.png, and style.css. You can create the files in Notepad or Notepad++. The
screenshot.png file is just a screenshot of the store page.
5. Create a style.css file with information about your child theme.
6. For the style.css file you must include the “Theme Name" as shown below.
/*
Theme Name: Storefront Child Theme
Theme URI: http://woothemes.com/storefront
Author: WooThemes
Author URI: http://woothemes.com
Template: storefront
Description: Storefront starter child theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
*/
117. Page:117
7. Also include the “Template.”
8. In order to load the parent file’s stylesheet we will need to enqueue it. Don’t worry about
the PHP for now. If you would like to learn more about child themes, I’ve included links in
the resources section.
9. Create a functions.php file.
119. Page:119
11.Here’s the code in your functions file to remove the footer credit.
12.If you navigate to the front end and scroll down to the footer. This is what will be removed
from the code above.
120. Page:120
13.The code below will display the information from your site.
14.When linking to assets using the mentioned functions you should note that the
get_template_ family of functions will always point to the directory of the parent theme.
121. Page:121
15.The get_stylesheet_ family of functions, for example, which is not displayed below in the
code, will always point to the child theme’s directory.
16.You can add a screenshot.png file.
17.If you haven’t already done so download and install Filezilla at: https://filezilla-
project.org/.
18.There are two ways to install the new child theme. You can upload the entire folder to
your themes directory using FTP or you can Zip the child theme and install it from your
WordPress back end.
122. Page:122
19.Zip the files files if you are going to install it from your back end. You can right click on
the storefront-child folder to zip the file.
20.Or you can upload the newly created child theme folder to the server in the same folder
as your theme’s files.
21.You can see where I uploaded the folder for the child theme in the themes directory.
123. Page:123
22.Navigate to the store back end. If you haven’t uploaded your child theme you can click on
the Add New and upload the zipped file.
23.Go to Appearance > Themes to find the child theme we just uploaded.
24.Activate the theme.
124. Page:124
25.After activating the child theme, you’ll notice changes we made in the customizer have
now disappeared.
26.Also note the menus have changed.
125. Page:125
27.The footer has changed.
28.To continue with the course, I will re-activate the Storefront theme.
29.I just want to quickly show you how you can upload a new theme. I deleted the child
theme we had previously created. Now I’ll show you how to upload the zipped file we
created for the child theme.
30.Go to Appearance > Themes > Add New.
31.Find the zipped file.
127. Page:127
34.The child theme is active.
35.You can leave your child theme as is and continue making your changes.
You can download the child theme files in the resources section for this lecture.
If you would like to learn more about Functions, Actions, Hooks and Filters you can review it
here. https://developer.wordpress.org/reference/
128. Page:128
Conclusion to Section 4
Wonderful! Section 4 is done. This section you just completed will set you on the path to
customizing your theme – working with the Storefront child theme.
Here’s what we covered in the Storefront Child Theme.
This section is an optional bonus section for the advanced user. I demonstrated to you how to
create your own child theme. You could also download the child theme files for Storefront
created in this lecture. I also showed you how to download and install an FTP program.
1. In the theme directory I created a folder for the new child theme.
2. I called it storefront-child.
3. I created a stylesheet with information about the child theme.
4. You must include, “Theme Name" and “Template.
5. I pulled the styles from the parent theme.
129. Page:129
Section 5: Page Builder
Review the Page Builder Plugins
Page builders make it easy to make responsive layouts.
There are a few available page builder plugins compatible with the Storefront theme. You have
a choice of Page Builder plugins such as Site Origin, Visual Composer and VelocityPage.
Let’s do a quick review of the Site Origin Page Builder Plugin which can be downloaded here:
https://wordpress.org/plugins/siteorigin-panels/.
Page Builder by Site Origin is one of the most popular page creation plugins for WordPress.
According to the plugin author. It makes it easy to create responsive column based content,
using the widgets you know with a simple drag and drop page builder.
I tested the Site Origin’s page builder with the Storefront theme and it appears to work without
any issues. This plugin is free. This is the plugin that I will show you how to install.
This is optional. You do not have to install a page builder plugin if you don’t want to use one. I
will briefly review the other page builder plugins available.
Visual Composer Plugin
http://vc.wpbakery.com
130. Page:130
The Visual Composer Plugin is not free.
I have used this plugin with other WordPress sites. However, for the purposes of this course I’ll
use the Site Origin plugin. If you’re interested in the Visual Composer plugin take a look at their
website. It includes many features to help you with Frontend editing, layout control and editing
elements inline whereby you can see the changes instantly.
Velocity Page Plugin
http://velocitypage.com
The Velocity Page Plugin is not free.
I have not used this plugin. This plugin tells you to say goodbye to the WordPress admin panel.
The purpose of these plugins is to make page editing easier for you.
It may not be necessary to make major design edits to the Storefront site but if you want a
visual builder to help you make design and layout changes then one of these plugins will help
you do just that.
131. Page:131
Install the Site Origin Page Builder Plugin
Download and install a page builder plugin.
Let’s try the site origin page builder.
1. Go to Plugins > Add New
2. In the search type page builder.
132. Page:132
3. Click to Install and activate the plugin.
4. Let’s navigate to our sample page to try out the Page Builder. If you don’t have a sample
page you can create one to test the new page builder.
5. Go Pages > All Pages > Sample Page.
6. Click on the Page Builder button.
133. Page:133
7. Let’s see how it looks with the Live Editor.
8. When using the Page Builder for the first time you might receive the message below. If
you receive the message: “You need to install Black Studio TinyMCE to use the widget
WP_Widget_Black_Studio_TinyMCE. It's a free plugin available off the official
WordPress plugin directory.” Let’s go ahead and install it. Activate the new plugin.
134. Page:134
9. Go to Live Editor in your sample page. Now we can edit the page. Make some edits and
click on update when you’re done editing.
10.Let’s add a row to the page. Click on the Add Row button.
135. Page:135
11.This row has 3 columns.
12.Now we can add a widget. Click on the Add Widget button to add a widget.
136. Page:136
13.I’ll click on the Text widget.
14.I placed the text widget I selected into the first column.
137. Page:137
15. Proceed to add more widgets to the remaining columns.
16.Click on the Live Editor button. You’ll see where you’ve added the new widgets. The first
column is empty because we didn’t add any text to this new widget.
138. Page:138
17.Click on the text widget to add text to it.
18.After adding some text to the Text widget it will now appear in the first column of the
second row I created.
139. Page:139
19.You can easily delete the entire row if you do not want it there anymore. When done click
on update.
Page Builder by SiteOrigin
https://wordpress.org/plugins/siteorigin-panels/
Review the installation documentation.
https://siteorigin.com/page-builder/documentation/
140. Page:140
Install a Responsive Slider
We’ll install a free WordPress slider plugin. WooThemes also has their own slider and a parallax
plugin. The paid slider from WooThemes is called WooSlider:
http://www.woothemes.com/products/wooslider/.
The Storefront Parallax Hero can be viewed and purchased here:
http://www.woothemes.com/products/storefront-parallax-hero/.
Please note, for the purposes of this course, I will install the Slider WD WordPress plugin which
is free.
We’ll install the slider on the homepage only. Since we want the slider to appear on the
homepage, we will not use the Header widget to add in the slider. If we were to drag and drop
the slider into the Header widget then the slider would appear on every page.
1. Download and install a responsive slider.
2. Go to Plugins > Add New
142. Page:142
5. Go to the Slider WD and edit some settings.
6. We’ll add the slider to the home page. We can select the Add Slider WD shortcode and
insert it into our page.
143. Page:143
7. Since we just installed the slider plugin, we haven’t created any slides so for now we’ll
use the Default slider option.
8. After you insert the slider click on the Update button.
144. Page:144
9. Navigate to the homepage to view the slider.
10.We’ll make some changes to the slider. Go back and click on the edit slider link.
146. Page:146
13.Hit save, go to your home page and click to refresh the page.
14.If you don’t see the slider remember to go to Appearance > Homepage and select the
Storefront Homepage Content.
15.The slider there is now full width and the Homepage title is just above the slider.
147. Page:147
You’ll notice the Homepage heading just above the slider and below the header. I’d like to
remove that.
One of the free tools you can use to edit your CSS is Chrome’s Inspect Element or you can
install an add-on called Firebug for the Firefox browser. If you’re not using Chrome then I
suggest you use the Firebug add-on for Firefox.
Although I primarily use Firefox I’m going to switch over to Chrome to show you how easy it is to
make some CSS changes.
This is optional you don’t have to do any changes if you don’t want.
1. There’s a little bit too much space in between the slider and the header.
2. Using Google Chrome, we’ll right click around the area where we would like to make
some CSS edits.
148. Page:148
3. The inspect element tool will help you find the code that we will add to the CSS slider to
remove this white bar.
4. Add this CSS code to the slider:
.header-widget-region {
display: none;
}
149. Page:149
5. We’ll go to the slider’s CSS section to insert this code. Click on the Edit link next to the
default slider.
6. Click on the Settings tab.
150. Page:150
7. Then click on the CSS link.
8. If you are using a child theme you could place your CSS edits into the style.css file we
created in the Child Theme lecture.
9. This slider has a section to place your CSS edits.
10.We’ll place the CSS code in here if you don’t have a child theme setup. Hit save.
151. Page:151
11.Go to the front end and refresh your browser. The space will be gone.
12.Go back to use the Chrome inspector to find the CSS code to remove the Homepage
section.
13.If you right click on the Homepage section you’ll see which class can be hidden.
152. Page:152
14.Add this code to the slider CSS section.
header.entry-header {
display: none;
}
15.We’ll add the code in the CSS editor of the slider.
16.Now the homepage header title has been removed.
153. Page:153
Change the Header Background Color
We’ll change the background color of the header from dark to light.
1. Go to Customizer > Header.
2. I’ll change the header to white by clicking on the Background Color.
3. Since my logo is white, I’ll replace it with a darker color.
154. Page:154
4. I’ll also change the link color to black.
5. I can see the links and I will upload a new logo.
155. Page:155
6. I’ll change my logo from the customizer.
7. When I click on the Change logo button, it will take me to the Media Library.
156. Page:156
8. After I select my new logo from the library it’ll appear inside the customizer.
9. Click on Save and Publish when you’re done.
10.After I refresh my browser, I’ll see the new header.
157. Page:157
Customize the Header
In this lecture we’ll customize the header with a call to action.
1. We will place a call to action just above the store products and below the navigation.
2. We can place a bar with text to break up the white space.
158. Page:158
3. If you take a look at the WooThemes demo Storefront you’ll see that they have the black
bar with some text.
4. I’ll demonstrate how to copy the html code from the demo site to be used in your own
site. I’ll use Firebug from Firefox. If you don’t have Firebug installed you can do a search
on google to install it for your browser.
5. Hover over the element and right click on it to open up the Inspector Element.
159. Page:159
6. This is the code we’ll use for the website.
7. Here’s what the HTML code looks like.
<div class="textwidget">
<div style="text-align: center; background: #000; color: #fff; padding: .53em; font-
weight: bold;">
<span style="margin: 0 1em;">Check out our new Jackets!</span>
<span style="margin: 0 1em;">Get 25% off your first order!</span>
<span style="margin: 0 1em;">Free shipping on all orders over $100!</span>
</div>
</div>
8. I’ll place this HTML code inside the header widget.
9. Go to Appearance > Widgets.
160. Page:160
10.We’ll drag and drop the text widget into the Header widget.
11.The HTML code will be placed in the text box and click on save.
161. Page:161
12.When you refresh your browser you’ll see the new bar.
13.If you go to the home page you’ll see that it’s not there.
162. Page:162
14.If you do a quick check with Firebug or Chrome, you ‘ll see that the header is hidden.
15.We’ll have to remove the CSS that was set to display none from the previous lecture.
16.Go back to the slider CSS editor.
164. Page:164
19.If you see a big gap that can easily be fixed.
20.We are going to edit the margin to remove the space.
165. Page:165
21.You’ll see the code that we’ll place in our CSS slider editor.
22.This is the revised code to remove the margin spacing.
Header-widget-region {
Margin-bottom: 0px;
}
23. Hit save and go to the front page.
24.Now you’ll see that the space has been reduced.
166. Page:166
Set up a Blog
You will learn how to set up a blog posts page.
1. Go to: Pages > Add New to create your blog page template.
2. Title the Page, example: Blog or News.
167. Page:167
3. Select ‘Default Template from the Page Attributes > Template dropdown option.
4. Publish your new Blog Page Template.
168. Page:168
5. Now go to: Posts > Add New to add a few posts.
6. Enter a title and description.
169. Page:169
7. We’ll add a featured image to the post.
8. Select an image from your media library. Click on the set featured image button.
170. Page:170
9. Publish your post.
10.We have to setup the settings page and add the new blog section to our website menu.
11.Under Settings go to Reading.
171. Page:171
12.Go to Front page displays and under Posts page select: blog or news whatever you
named the new blog page will be listed here.
13.This is the page where all your posts for your blog listings or your news listings will
appear.
173. Page:173
17.You can rename the menu if you like.
18.Inside the navigation label, I’ll change mine to news and save it.
174. Page:174
19.Now go to the front end of your website and see if it worked.
20.The announcement with the featured image is on the News posts page.
21.If you see the Hello World, feel free to delete it.
176. Page:176
Run the Updater
If you see a message in your dashboard to run the updater, go ahead and click on it.
If you see this message then I strongly recommend you back up your database.
177. Page:177
You might also receive a message like this.
Go to Plugins > Add New and search for a backup plugin and install it before you proceed to
update your site.
Demo Site
If you would like to take a look at our demo site visit this link: http://mercdrainplug.com/
178. Page:178
Conclusion to Section 5 and the Course
Congratulations!
You did it!
You completed all the tasks to get your online store up and running.
Here’s what we covered in section 5.
You installed a page builder.
• You made layout changes to your pages with a page builder.
• You created a slider and a blog for your online store.
• Page builders make it easy to make responsive layouts.
There are a few available page builder plugins compatible with the Storefront theme.
I quickly reviewed the page builder plugin choices available such as:
• Site Origin,
• Visual Composer and,
• VelocityPage.
We did a quick review of the Site Origin Page Builder Plugin. Page Builder by Site Origin is
one of the most popular page creation plugins for WordPress. According to the plugin author it
makes it easy to create responsive column based content, using the widgets you know with a
simple drag and drop page builder. This plugin is optional. You do not have to install a page
builder plugin if you don’t want to use one.
It may not be necessary to make major design edits to the Storefront site but if you want a
visual builder to help you make design and layout changes then one of these plugins will help
you do just that.
I demonstrated how to install a responsive slider.
179. Page:179
• You learned how to make CSS edits with the aid of your browser using one of the free
tools such as Chrome’s Inspect Element.
• You can install an add-on called Firebug for the Firefox browser.
• I customized the header with a call to action bar.
I also demonstrated how to change the background color for the header.
I also set up a blog posts page. Remember, if you want to have a page to display your blog
posts too, you will have to create another page (you can leave the content blank) and set that
as the Posts Page in the same settings section.
Thank you for joining my course.
Any comments or feedback to my course is greatly appreciated.
180. Page:180
eCommerce Resources & Links
• 10 Tips For Running a Successful WooCommerce Site:
o http://business.tutsplus.com/tutorials/10-tips-for-running-a-successful-
woocommerce-site--cms-21453
• An Introduction To WooCommerce:
o http://code.tutsplus.com/series/an-introduction-to-woocommerce--cms-755
• A Look at WooCommerce Products Settings:
o http://code.tutsplus.com/articles/a-look-at-woocommerce-products-settings--cms-
22038
• A Look at More WooCommerce Product Settings:
o http://code.tutsplus.com/articles/a-look-at-more-woocommerce-product-settings--
cms-22067
• The Beginners Guide to WooCommerce Taxes
o http://code.tutsplus.com/articles/the-beginners-guide-to-woocommerce-taxes--
cms-22060
• Getting Started with WooCommerce:
o http://code.tutsplus.com/series/getting-started-with-woocommerce--cms-685
• WooCommerce: General and Product Settings:
o http://code.tutsplus.com/tutorials/woocommerce-general-and-product-settings--
cms-21472
181. Page:181
• WooCommerce: Checkout, Shipping and Accounts Settings:
o http://code.tutsplus.com/tutorials/woocommerce-checkout-shipping-and-accounts-
settings--cms-21496
• WooCommerce: Adding Physical Products to Your Store:
o http://code.tutsplus.com/tutorials/woocommerce-adding-physical-products-to-your-
store--cms-21516
• Configuring Product Settings in WooCommerce:
o http://code.tutsplus.com/tutorials/configuring-product-settings-in-woocommerce--
cms-21529
• WooCommerce: Adding Virtual Products to Your Store
o http://code.tutsplus.com/tutorials/woocommerce-adding-virtual-products-to-your-
store--cms-21517
• Why you need to start using a staging environment:
o http://torquemag.io/need-start-using-staging-environment/
• The Ultimate, Epic Guide to Create a Successful Online Business in 2015
o http://ecommerce-platforms.com/ecommerce-selling-advice/ultimate-epic-guide-
successful-online-shop
• SEO for Ecommerce: A Comprehensive Guide
o http://www.slideshare.net/audette/seo-for-ecommerce-a-comprehensive-guide/
• How to update your theme
o http://docs.woothemes.com/document/how-to-update-your-theme/
182. Page:182
• Child Theme
o http://codex.wordpress.org/Child_Themes
• How to Create a WordPress Child Theme
o http://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
• Infographic: The ultimate guide to creating a successful online business
o http://www.webdesignerdepot.com/2015/02/infographic-the-ultimate-guide-to-
creating-a-successful-online-business/
