How to Create An eCommerce Website [2018] | WooCommerce Tutorial


In this video, we’ll show you how to create
an eCommerce website for 2018. In fact we’ll create this exact website
here, and i’ll show you how to customize it to suit your business or brand. You can view the live demo of the site we’ll
create a o-h-k-l-y-n.com/go/neto-demo. (there’s a direct link in the description below). When thinking about putting together an eCommerce
store, the two platforms you should be considering are WordPress or Shopify, we’ve written
an article, and put together a video that compares the two, that you can access on the
OHKLYN site. In this video, we’ll show you step by step
how to create an eCommerce website using WordPress. So if you’re keen to create your own eCommerce
site, but unsure of where to start and wanna do it the right way. Then you’re in the right place. In this WordPress WooCommerce Tutorial:
you’ll learn the fundamentals, that will allow you to create the exact type of online
store you want, and avoid the common mistakes beginners make,
you’ll also get access to discounts on hosting, and WordPress themes (the links are in the
description below and on the OHKLYN website, We’ll also leverage demo content, to help
get you up and running quickly. So, if that sounds good, then stay tuned. We’ve created a step by step article that
accompanies this video that you can access on the OHKLYN website at OHKLYN o-h-k-l-y-n.com
(we’ll add a direct link in the description below). There, we’ll include the written steps,
as well as any links mentioned in this video. So I would recommend opening it up in a new
tab so you can follow along. We’re going to create this exact website
here, and along the way I’ll show you how to customize every aspect, from colors, to
products, categories and layouts to suit your business, blog, or brand objectives. Regardless of whether you’re selling physical
products, services, software, or linking to affiliate partners, we’ll cover off on all
product types, to make sure it meets your needs. We realize that a one-size fits all approach
is never a smart option, and as such we’re going to go through the fundamentals of how
to create an eCommerce site, and give you the tools, and thinking you’ll need to be
successful. We’ll go through the site we’re going
to create together in more detail shortly. However, feel free to follow the link in the
description below and check it out for yourself. The theme we’ll use in this tutorial is
one of the best around, and very easy to customize, as it allows us to use a number of drag and
drop page builders like the Divi page builder, Elementor page builder, and the SiteOrgin
page builder, so if you’re familiar with any of those, creating the site you want will
be a breeze, and if not, I’ll show you how to do it. If for whatever reason, you don’t like the
design of the demo theme we’re using, or you’re set on certain type of design, that’s
fine. What we’re gonna cover in this video is
the process of setting up an eCommece store, which will allow you to use any theme you
like. For a list of the best WordPress themes for
eCommerce (which includes the theme we’ll use today), check out our best WordPress eCommerce
themes article on the OHKLYN blog, and sign up to our newsletter for exclusive discounts. You’ll literally be able to use any theme
on this list. This is what we meant, when we said we’ll
focus on the fundamentals. We’ll walk you through:
the process of planning out the structure , or wireframing your pages, products, and
categories, how to reference the theme documentation,
to guide you through the theme specific elements of your eCommerce website, and
things like, integrating your preferred payment methods If you find an alternate theme you wanna roll
with, that’s cool, follow along with this tutorial, and substitute in, the theme you
want to use. Having built 100’s of WordPress websites
and blogs for clients ranging from $1,500 to 10’s of thousands of dollars – I can
walk you through best practices and help you avoid some of the common errors that beginners
inevitably make. The steps we’ll cover in this video are:
Preparation – We believe the most important thing to creating a successful eCommerce website
is to begin with the end in mind. If you’ve got a clear picture on what your
sites gonna look like, how products will be structured, and how you’ll use additional
pages like your blog to assist in driving traffic to your site, or an FAQ page and other
information pages to improve the user experience and communication flow, you’re bound to
get a better result. We’ll then go through the process of
Registering your domain and setting up hosting for your ecommerce website. As well as installing WordPress on your domain. We’ll provide two hosting options with discount
links in the description below, as well as on the OHKLYN website. The first is a shared hosting option with
bluehost (which is around $4-10 per month depending on the hosting term, and comes with
a free domain name – if you haven’t already registered one). If you want to accept credit card payments
directly on your site, and not redirect to PayPal, you’ll need to get an SSL certificate
as well. The other option is with WP Engine, which
is a managed hosting option. They look after things site back ups, provide
a free SSL certificate, and will improve the page load speed of your site (this is a bit
more expensive at $20-30 per month) but with our link, you get access to a significant
discount. Once you’ve secured your domain and hosting,
we’ll go through the process of installing WordPress – if you go with the WP Engine option,
they take care of this for you. You’ll just need to point the A record for
your domain at your WP Engine account (which we’ll cover off shortly). We’ll then go through an
Overview of the eCommerce website we’re going to create, and cover of some of the
eCommerce fundamentals like product types, and product data, so that you’re familiar
with this when we upload and manage products in the back end of your new site. We’ll then go through an
Overview of the WordPress fundamentals, like amending the global settings, and creating
pages, posts, and categories to make sure you’re comfortable with the platform. We have a separate section later related to
products, and a detailed WooCommerce tutorial, to make sure you feel confident. We’ll then move on to
Choosing and uploading your WordPress theme Installing the required plugins (WooCommerce
specifically, as it’s the plugin we add to WordPress to give us eCommerce functionality). We’ll then go through a detailed
WooCommerce tutorial This will include Adding and managing products
Adjusting the WooCommerce settings to suit your business, brand, or blog. And we’ll cover off on
Fulfillment & managing sales, to make sure you know what needs to happen once orders
come in. Lastly, we’ll
Customize your website to reflect the design and layout you want. This will include
General branding, layout, and the theme customization settings
The theme we use in this tutorial comes with demo content that you have the option to import,
which will recreate all the pages, products and layouts on the demo site (the only difference
being it will use image placeholders instead of the actual images – for licensing reasons). If you choose to use this, we will show you
how to update the layouts to suit your online store, as well as how to delete products,
pages, categories, and create new ones to suit you. We’ve provided a breakdown of the agenda
in the description box below, with timestamps to make it easy for you to pause, and navigate
your way through this tutorial. If you ever need to go back or jump forward,
just review the description below. So, let’s get to it. In this tutorial we’re gonna go through
and customize everything about this site, from the logo and other branding assets, to
products, pages, and design features like colors and layouts. So what you’ll need to have prepared is
your logo (if you plan on using one), the theme we’ll use also allows you to use a
simple text logo like what’s shown in the example. You’ll also need to put together any branding
assets, such as hero images and your color pallette (in the form of the hexadecimal color
codes you want to use on your site). In regards to the products you intend to sell
on your website, you will need to put together the following for each:
A product title Descriptions, both a short version that will
appear here, and a longer version that will appear down here. SKUs, or Stock Keeping Units – which you will
use to identify unique products. This will be forward facing and displayed
on the front end of your site, so pick something customer-friendly. Product type – we’ll cover these off in
more detail shortly, but this includes simple products, for example a pair of sunglasses. Or, variable products like a pair of shoes
(which has a number of colors and/or sizes – these are referred to as attributes. But we’ll get to this in a bit). Price, as well as a sales price (if appropriate)
Stock, or quantity of each item Images, this should include both a feature
image, as well as additional supporting images, referred to as gallery images. All your images should the same sizes to ensure
consistency. Depending on which theme you use, you’ll
be able to find the minimum recommended images sizes for each type of image, that will be
used on you site. The product images for the theme we’ll use
should be 800px wide, by 1100px high. If you want to use a different dimension,
that’s fine, just be consistent. Make sure that your images look good on retina
displays, a resolution of 72 dpi is fine for web, and try to keep the file size of each
image as small as possible (always less than 500kb), so that it doesn’t impact your page
load speed. Next is Categories, this is probably the most
important aspect and something you should take time to consider, as it will impact the
way you layout your online store, and how users will navigate your site. You should group products in ways that make
the most sense for your product range. An example of this on the demo site, has the
top level category of ‘Women’, and subcategories of ‘dresses’, ‘Shirts’, Shoes’,
etc. Take some time to think through the best way
to structure your offerings. Lastly, you may want to add tags to each product. Unlike Categories this doesn’t need to be
hierarchical, rather a way of providing additional information related to the item. For example, type of material, which collection
it’s from, etc. Try not to go overboard with tags. Tags don’t have an impact on SEO, contrary
to popular opinion, so stuffing your products with tags will only make things congested,
as they will be visible on the front end. The types of tags that do impact SEO, are
what’s referred to as meta tags (this is for another day though. If you are interested in learning about SEO
for WordPress and eCommerce, check out one of our courses or pre-register for a discount
at courses.OHKLYN o-h-k-l-y-n.com. At this stage, you will also want to consider
the types of pages you want to include on your website, such as an about page, FAQ,
contact page, order tracking page, size guide, and start thinking through the content you
want to include on each. The theme that we use, includes a number of
pre built layouts, as you just saw, to provide a solid base to start from. As you’ll see later, it also includes a
comprehensive free page builder that allows you to easily and visually create and edit
pages without needing to know any code. Lastly, you will need a small budget of around
$150 – 300, depending on the options you choose. This will include things, like your domain,
hosting, and a premium WordPress theme, as well as any other design or image assets you
may need. I have provided some affiliate links in the
description below, and on the OHKLYN site that I’d encourage you to use, for two reasons:
One, with many of the options available you will be eligible to receive a discount and
other goodies, and Two, by using those links, they help to fund
future free tutorials like this one – so, your support is appreciated! Remember to head over to the OHKLYN website,
and sign up for our newsletter as well, that will give you access to free website and digital
marketing tutorials, discounts, and valuable content that you’ll find useful as you continue
to build out your website, like free image resources, SEO and search marketing tips,
as well as how to leverage free tools like Google Analytics. Ok, so there’s a bit to do, to get ready. Fortunately, if you haven’t got that all
together as yet, it’s ok, we can continue on and get your site set up, and go through
the fundamentals, while you finalize putting those items together. The theme we’ll use has dummy content that
we can upload and use as a placeholder for now, enabling you to keep things moving. The next step is to register your domain (if
you haven’t already), and setup up hosting. Your domain, or url – is the web address for
your online store, and is what users will type into their browsers to access your site. For OHKLYN it’s ‘OHKLYN o-h-k-l-y-n.com’. Pick something that’s relevant and memorable. Hosting, is what allows your online store
to be accessible to users 24/7. It’s the process of storing the content
and data of your eCommerce website on a web server, and serving it to users. For this tutorial, there’s two options to
choose from, and we’ll quickly walk you through getting started with each. The first is the cheaper shared hosting option
through Bluehost, and the second is the premium option through WP Engine. We use both providers, OHKLYN is hosted on
WP Engine, and our demo sites are hosted on bluehost. There are discount links to each option below,
and on the OHKLYN website. Firstly, for those who want to go with the
cheaper option let’s register your free domain and set up hosting with Bluehost. For those that want to go with WP Engine skip
ahead to the next section, and follow the instructions. There’s a link in the description below
that gives you access to discount hosting through bluehost, as well as a free domain
name. If you’re following along on the OHKLYN
website, you can click on this button here to get access. Here is a list of the types of domains that
are included for free, some of which include a:
.com .online
.store .net
.org .co
.club Now, if you’ve already purchased your domain,
or you want to purchase an alternative top level domain (such as .shop, or you want a
country specific domain such as .co.uk, or .com.au), you can purchase that domain through
a registrar like GoDaddy, Crazy domains or any other domain registrar (I’ll add some
links below). If you go with that option, or as I mentioned
– if you’ve already secured your domain name, all you’ll need to do then is change
what’s called the Domain nameservers to point at bluehost (which will be your hosting
provider). Fortunately, we’ve written an article, and
a step by step guide on how to do this (I’ll add the links to these guides in the description
box). For the bluehost option, we’ll take care
of both registering your domain, and setting up hosting, as well as installing WordPress
together. So, to do this follow the bluehost link in
the description below, or if you’re on the OHKLYN website, follow this button here. Bluehost is an affiliate partner of OHKLYN,
so by using those links, not only do you get access to discount hosting and a free domain,
but they’ll set aside a few dollars from their marketing budget to help fund future
free videos like this one. So we appreciate you using the link provided. If you plan on processing credit card payments
on your site, you will need an SSL certificate. Alternatively, if you just want to process
payments externally via PayPal, you won’t need an SSL certificate. If you’re going to use PayPal as your sole
payment gateway, you can go with the the standard shared hosting plan, and click the ‘Get
Started Now’ button to select your hosting plan and register your free domain. If you want to accept credit card payments
on your site, then under the ’Hosting’ option in the menu, click on WooCommerce hosting,
and then ‘Get started now’. Regardless of which option you went with,
you’ll then select the plan that’s right for you. If you intend to have just the one domain
(for your online store), then the first option we’ll be fine, alternatively if you want
to have multiple domains on the one hosting account, then you’ll need to select one
of the other plans. You can always amend this down the track. The great thing is that you get a 30 day money
back guarantee on either plan, so you can get started risk-free. For this example though, I’ll go with the
middle option. To get your free domain name, you’ll enter
the desired domain name for your online store into the ‘new domain’ field, select the
domain extension (for example .store), and hit next. If the domain name isn’t available, you’ll
get an error message and will need to either select an alternate domain name, try to contact
the owner of the domain to purchase it from them, or select another top level domain extension. If you’ve already purchased your domain
name, enter your domain in the ‘transfer domain’ field and select ‘Next’ (remember
to review the article on how to change the DNS records to point at Bluehost). To set up your hosting account enter in the
required account information here. In the package information section, choose
your desired hosting term and domain add-on preferences. I recommend selecting ‘domain privacy protection’
so that your personal information that’s associated to your domain, isn’t publicly
available (this is optional of course). Once you’ve entered in the required information,
add your payment details, review the terms, and select ‘Submit’. Once you’ve done that, you’ll be taken
to this page here. You will have been sent a confirmation email
to the designated email address on the account. You will need to create a password for your
hosting account. To do that, click on ‘create your password’. Make sure to pick a secure password, you could
use the suggest password tool to help you with this. Once you’ve entered in your password, review
the terms of use, and select ‘Next’. You will then be able to login to your Bluehost
dashboard. As part of the new Bluehost offering, WordPress
will automatically be installed on your new domain. If you’ve registered your domain elsewhere,
you’ll need to amend the DNS records to point at Bluehost and install WordPress using
the Bluehost one-click WordPress install. For the steps on how to do this, review our
article on the OHKLYN blog (the direct link will be in the description below). You can choose to install one of the free
pre-selected WordPress themes on your domain. For this tutorial, we’ll use a premium WordPress
theme, so in this case we’ll just select ‘skip this step’, WordPress will now be installed on your domain. To access the back-end of your WordPress website,
click ‘start building’. This will prompt a guided tour, which you
can choose to run through or not. We’ll go through this in our tutorial, so
i’ll click on ‘I don’t need help’. This will take you to the Bluehost tab within
the back-end of your WordPress site. To access your WordPress dashboard, click
on ‘dashboard’ in the menu on the left. There will be a number of notifications, that
you can action, or dismiss by clicking on the ‘x’ in the top right corner. You can amend what’s visible on your dashboard
by clicking on the ‘screen options’ dropdown in the top right, and checking or unchecking
the boxes. A number of additional plugins will be installed. You can view these by hovering over ‘plugins’
in the admin menu on the left, and selecting ‘installed plugins’. In addition to the standard WordPress plugins,
Bluehost will install, JetPack, Mojo Marketplace, OptinMonster, and WPForms. You can leave these active, or choose to deactivate
and delete these plugins. I’ll leave this up to you. I’ll delete mine, as I like to use as few
plugins as possible. This can be done in bulk, by selecting the
checkbox next to the plugins, choosing deactivate from the bulk actions dropdown and then clicking
apply. I’ll then delete all of the selected plugins. Then return back to my WordPress dashboard. If I enter in my domain name, I’ll see that
WordPress is now installed. Congratulations! You officially have a new website! It’s not quite an online store yet, but
we’ll get to that shortly. For those that have gone through registering
your domain and setting up hosting with bluehost, you can move on to the next step which is
the overview of the eCommerce website we’ll create and some eCommerce fundamentals. Click on the timestamp in the description
below to skip ahead. For those who want faster hosting, or more
consistent hosting, and wanna go with a premium hosting solution, we’ll go through the steps
of setting up hosting with WP Engine. As part of the OHKLYN community, you’re
entitled to a discount by following the link provided, which is either in the description
box below, or if you’re following along on the OHKLYN website, you can click on this
link here. That will take us to the WP engine site, we’ll
scroll down until we see the different plans. If you just want to set up a single website,
the personal plan will be fine, you can always add additional domains at any stage; however
if you going to manage multiple websites, then you may want to look at the other plans. For this example, we’ll go with the personal
option, that will take us through to this page here. By selecting the annual option we get two
months free, and in addition to that, through being part of OHKLYN community, you get access
to a 20% off coupon on top of that. To get access to that, click the link provided,
or enter OHKLYN o-h-k-l-y-n.com/go/wp-engine which will take you through to the WP Engine
site, and include the discount. If for whatever reason, the discount code
doesn’t carry across, then signup to our newsletter and you’ll be sent a welcome
email with the WP-Engine discount code included. To create your account, enter your email,
account name, select which Data Center you want to use. There are a number of options to choose from,
pick the location that’s closest to you, or your intended audience. Then, input your name, scroll down to the
billing information, and add your billing info. Review the terms and conditions, and then
click on Create My Site. Once you’ve done that, your WP engine portal
will be in the process of being built. You can confirm the details here, the Plan
Details are on the left hand side, and your Billing Information is on the right. If we scroll down, we’ll see the details
of our account and username, our password will be sent to our email account, and then
below that we’ve got the details of our URL. On the OHKLYN website, there’s a link to
a video that goes through how you complete your set up process, so I’d recommend clicking
on that to finalize your account set up. The cool thing about WP engine is you won’t
need to install WordPress, they do that for you. There are some tools to help with getting
started, so if you need to migrate an existing site then there’s a tool to help you with
that. The best thing about managed hosting is that
you’ve got full support, so if there’s anything that’s unique, or you’re struggling
with anything in particular, you can contact them directly and they’ll be able to help
you through the process. You will have received an email from WP engine,
follow that link through to enter your password, and that will take you to your WP engine portal
which looks like this. Pause this video, and once you’ve pointed
your domain’s A record at WP Engine, and WordPress is installed for you, we can continue
on to the next section, where we’ll take a good look at the website we’re going to
create, and cover off on the WooCommerce fundamentals you’ll need to know, like product types,
using shortcodes, and widgets. Once again, follow the link on the OHKLYN
post here to the video on how to point your domain’s A record at WP Engine, and finalize
your hosting setup. Alright, we’ve gone through the first two
steps which were preparation, as well as registering your domain, setting up hosting, and installing
WordPress. We can now move on to the next step.. We’ll now go a take a good look at the website
we’re going to put together, as well as cover off on some of the eCommerce fundamentals
you’ll need to be familiar with when working with WooCommerce. To view the live demo and follow along, enter
the url on your screen now (which will also be in the description box below, and on the
OHKLYN website). As you can see, it’s a really clean and
modern design, and features all the elements, widget and layout options you would expect
in a modern online store. We have 10+ homepage layouts to choose from,
and by the end of this tutorial you’ll be able to combine elements from different layouts,
to create an infinite amount of layout options. For the purposes of this tutorial, we’re
going to go with the default option, but go through all the options and pick the one that
you like the most. Later on, I’ll show you how to edit the
layout you want. If we click on the ‘shop’ tab, that will
take us through to the demo shop. If we hover over the shop menu item at the
top, we can see a number of options. In the customization section of this tutorial,
we’ll go through adjusting all these settings specifically for your online store. Some of the options include:
The global layout – here we can choose between a full width layout (which it currently is),
a boxed layout, and we can turn off the footer reveal at the bottom. In regards to our product filtering options,
the default option is an off site filter which appears when you click on the filter icon. These are controlled via widgets, specifically
the WooCommerce shopping widgets, which we will explore later. There is also the option for a left sidebar,
right sidebar, and catalog mode. Underneath that, are the category headers,
which gives you control over whether the header and description text is displayed for category
pages, for example, ‘Mens’, ‘accessories’, etc. And if it is displayed, how you want the text
aligned. If we hover over the ‘Products’ menu item,
we have the various types of products, which include:
A simple product: one that doesn’t include any attributes or variations like size or
color. A simple product will display a feature image,
and the gallery images, the product title, price, any reviews, the short description
here, quantity selector, add to cart button, SKU, Categories, Tags, the ability to share
on social media, and if you scroll down, the long description, reviews, and related products. Next is,
A variable product: Which is a product that does have attributes or variations, such as
size or color. You’ll notice this looks similar, however
it also includes a dropdown for the user to select the specific attributes of the product
they want. We’ll go through how to set these up in
the back end, as well as how to manage stock levels, etc for each product and variation. If we scroll down, there is also an ‘additional
information’ tab that outlines the various product attributes. Next we have
Grouped products. Grouped products allow you to group multiple
products together as ‘suggested’ packages, where the user can opt for the number of each
item they want. This is done by creating a new product, and
pulling in other products to create a set or group. While this helps with link selling, there
is also an additional plugin that you can purchase from the WooCommerce website, in
the extensions store – under ‘Product type’ called ‘Product Bundles’, that allows
you to offer bundled products, where you can set the quantity and sell it as a package,
rather than a ‘suggested’ grouping. There are a huge range of WooCommerce extensions,
so if there’s something custom you’re trying to do on your site, like manage subscriptions,
memberships, or bookings check out the WooCommerce extensions store. We will be putting together a membership / subscription
model site shortly, so subscribe to our YouTube channel and sign up to our newsletter to stay
in the loop on that. Next is
An external or affiliate product. If you’re a blogger, or affiliate marketer,
this theme handles external or affiliate products really well with the ability to input custom
external links, and amend the button text for each product. There is also the ability to add a video to
any product The option to add an extended description,
which you can view here Mark sale items, which will add a strike through
the regular price and list the sale price next to it, as well as add the sale tag over
the image. You can show when a product is out of stock. This is done by managing the stock levels
in the back end, which we’ll cover off in the WooCommerce tutorial section. And lastly
Add upsells to products. This is done by allocating an upsell product
to another product, and will feature this, ‘you may also like’ section underneath
the description and reviews. Under the ‘Elements’ tab, you’ll notice
there’s a number of options for how products can be displayed. In WooCommerce this is handled by what’s
called shortcodes, and gives you the option to display products, in a number of unique
ways. This can include:
Products by category – this shows you the categories and the number of products grouped
within each category. From here the user is able to navigate to
view all the products within a category, by clicking on the specific category. Products by product ID – This allows you to
list and show only specific products on a page or within a section, irrespective of
which category they are from. Best selling products – this is based on your
sales data, once you’ve processed some transactions Products on Sale – showcases all the products
currently on sale, and Recent products – which shows the newest products
added to your store. On the WooCommerce website, there is a list
of all the shortcodes available for use on your website. Later we’ll go through how to add these
into pages and sections of your website to create the exact layout you want. What you’ll notice about each shortcode,
is that they also come with a list of the variables or ‘arguments’ you can include
in the shortcode. These include things like how many columns
you want displayed, the number of products you want to show per page, and the specifics
like, the product ID, SKU, or the category name. In our WooCommerce tutorial section, we’ll
cover off how you add this data to products, as well as how you find product IDs. The other pages, featured under the ‘Element’s’
menu option, are the pre-made layouts that ship with this theme, and will be available
for you to upload, which we’ll do together in the customization section of this tutorial. This includes pages for:
Order tracking What the my account page looks like
The cart page, as well as FAQ
The About page Size guide
Store locater, and Contact page If you plan on leveraging content marketing
to drive traffic to your website, the blog styling included in this theme is really nice. There are a couple of options for how you
can layout your blog page which include: The standard blog layout with a sidebar, or
A minimal full width blog layout As you can see, the article or post layout
itself, is clean and minimal, and includes the ability to feature images in a nice lightbox. It features recommended articles at the bottom. And you can also use, WooCommerce widgets
to feature products in the sidebar, or within your article. Finally, let’s go through the process of
adding a product to the cart, viewing the cart and proceeding to the checkout, so you
can view the user flow. To do this,
I’ll click on a simple product, which takes me to this page. I’ll select my quantity, and add this to
the cart, you’ll see this notification that the item has been added to my cart, I can
either click on the cart option. Or towards the top you’ll notice that there
are now items in my cart. If I hover over the cart icon, it will show
me what’s in my cart, and give me the option to either view my cart or checkout. I’ll select view cart
This takes me through to my cart page, where I can view what’s been added, make amendments
to quantities, or delete items, as well as add a coupon code. Later, I’ll show you how to create and manage
coupon codes. I can then update my cart. Scroll down, and click proceed to checkout. If i’m a returning customer, I can login
to speed up the checkout process. Or add a coupon code if I forgot to do so. Below that, I add my billing information,
as well as a note if required. Say, for delivery instructions as an example. If we scroll down, we’ll see a summary of
the order, as well as the payment options available, which will depend on the options
you set up. We’ll cover off payment options in our WooCommerce
tutorial section later. Once, the payment method is selected the user
can then click place order. Ok, so that’s the walk through of the website
we’re going to build, and we’ve touched on some of the fundamentals like product types,
shortcodes, and widgets. Let’s login to the backend of our WordPress
website by adding /wp-admin to your domain. So for my example domain of example.com, i’ll
enter example.com/wp-admin, use the login username and password that we set up in the
prior step, and that will take you to the back end of your WordPress dashboard. We’ll now move onto the next section which
is an overview of WordPress. Whenever you log into your WordPress website,
you’re taken to your WordPress dashboard. The first time you login, depending on which
hosting provider you went with, there may be a walk-me-through it feature, or welcome
series which you can choose to follow along with or not. I’ve installed WordPress in a development
environment. It’s a clean WordPress install so it should
look the same, if it’s slightly different though, don’t worry – the fundamentals will
all be the same. I do a lot of WordPress website and blog development
for clients and prefer to work in a staging or development environment before pushing
a site live, however, it isn’t always necessary, and for the purpose of this video we’ll
build your website on the live site. We will be putting together a video shortly
on how to install wordpress locally on your computer, and the process of taking your site
live, so if that’s of interest, subscribe to our YouTube channel and check the video
section for more on that. If you build your website on your live site,
I would recommend installing a maintenance mode or coming soon plugin. I’ll provide a link to a video in the description
below on how to do that. Ok, so the WordPress dashboard or admin panel
is broken down into 3 main sections: at the top we have the WordPress toolbar, the menu
or admin menu is located on the left-hand side, and the main admin area is in the middle,
where we’ll do most of our work. I’ll give you a brief overview of each section
now – if you want to take a deeper look then check out our Introduction to WordPress for
Beginners guide and video. The WordPress toolbar at the top is dynamic
and adjusts the available options depending on which page you’re on, and if you’re
viewing the page from the front or the backend. The Admin menu located to the left of your
dashboard is separated into 3 main sections, those are: The Dashboard section, the Content
Management section, and the Site Administration section. The Dashboard section provides easy access
to the Dashboard, updates, and additional plugin features. The Content Management section is where you
create and manage Posts, Pages, Media items, Comments and additional plugin features. The Site Administration section is where you
configure the design and appearance settings for your website (including selecting the
active theme for your website, creating and managing menus, widgets, and customizing your
website’s theme). It’s also where we manage plugins, users,
control global WordPress settings, and activated theme and plugin extensions like SEO, Social
sharing, theme specific settings, and security. We’ll go through some practical examples
for each of these in the coming sections once we upload our theme and start working with
content. The menu is fully responsive, meaning that
as the screen size gets smaller, the menu adjusts to remain accessible on all types
of devices. Lastly, the main Admin area serves as our
primary workspace, and adjusts depending on what’s selected from the admin menu. I’ll draw your attention to the screen options
tab in the top right corner. When you open this tab you’ll see a list
of options and features that are available for display depending on which page you’re
on. Similarly, the help tab to the right, shows
you helpful hints for the page that you’re on, as well as links to relevant documentation. For a more detailed overview see our Introduction
to WordPress for Beginners guide or video. Ok now that we’ve touched on the fundamentals
of WordPress, let’s move on to choosing and uploading your WordPress theme. A WordPress theme is a group of files that
work with the underlying WordPress software to enhance the design and functionality of
your WordPress website. For a more detailed overview check out our
What is a WordPress theme article on the OHKLYN blog. There are both free themes and premium themes
that you can use for your website. The main benefits of using a premium theme
is access to support, the inclusion of more extensive theme documentation or instructions,
extended functionality, and access to demo content (and often a one-click demo content
importer). Which for around $50-100 is good value. Premium support packages can cost $50/mth,
so the fact that this is included in a premium theme, makes it a smart investment. What you’ll find is that every theme is
slightly different, and knowing where to find what you’re looking for may be intuitive
to someone that’s done a lot of this, but often times even the pros get stumped. With any of the premium themes that we recommend,
there is always, priority support available, theme documentation or instructions, and often
demo content to get you up and running quickly. On the OHKLYN blog we’ve analyzed 100’s
if not 1’000s of WordPress themes based on Speed, Design, Ease of use, Mobile Responsiveness
and Functionality to make this process a whole lot easier. We’ve done this by category and you can
access these via the OHKLYN Blog>under the WordPress Theme Reviews category. You’ll find a number of articles related
to specific niches. The theme that we’ll be working with today
is one of the top rated themes. In regards to installing a WordPress theme,
you can either install a free theme directly from the WordPress theme repository, or you
can purchase a premium theme from a WordPress theme provider and upload the theme (which
is the option we’ll go with). The theme we’ll be using is called Neto
by CSSIgniter. The link is in the description below, and
if you’re following along on the OHKLYN site, you can click on this link here, which
will give you access to discounts when they’re available. That will take you through to this page. If you click on ‘Buy Now’ or scroll down
to the bottom of the page, you’ll get to the pricing options section. You can either purchase just the Neto theme
for $49, which includes updates and support for one year. The next two options, give you access to all
their themes and support for one year. Or you could purchase the lifetime access
option, which gives you access to all themes and support for life. I’ll leave that up to you – I went with
the lifetime options, as these guys make awesome themes. I’ve put together a tutorial using their
Olsen theme which is a really modern and well designed theme. And I’ll be putting together an eCommerce
tutorial using both their Olsen and Hugo theme as well very shortly, so subscribe to our
YouTube channel and newsletter to stay in the loop on that. CSSIgniter build great quality themes, and
I couldn’t recommend them highly enough, as you’ll see as we go through. So pick the option that makes sense for you,
and click ‘Buy Now’, then enter your information and payment details to create an account. Once you’ve done that, you’ll be able
to login to the backend of your CSSIgniter account. Within the download area find the Neto premium
theme and click on ‘WordPress’ to download the Neto premium WordPress theme. This will download as a zip file which we’ll
upload as is (there’s no need to unzip the file). Back in the members area, you can follow the
link to the theme documentation, which will provide all the information we’ll need to
customize the theme, which we’ll go through together. You’ll also find the link to download the
sample content. If you want to use any of the layouts we went
through earlier, it’s a good idea to download the demo content now, and we’ll go through
uploading it, using the aspects you want, and deleting the parts you don’t want shortly. As I said at the beginning though, this tutorial
isn’t a one-size fits all – if you don’t like the Neto theme, or would prefer to use
an alternative theme, that’s ok – pick the theme you want, and follow the same process
outlined above. Once you’ve downloaded your theme, we can
upload it via your WordPress dashboard. To upload your premium WordPress theme navigate
to ‘Appearance’>‘Themes’, choose ‘Add new’ and select ‘Upload theme’. Click on ‘Choose file’, and navigate to
the .zip file for your theme you want to upload. If you downloaded the demo content for Neto,
just make sure you pick the right Neto.zip file as one is the demo content which will
need to be unzipped and the other will be the theme file which will need to remain zipped. I downloaded the theme file first, so the
second one will be the demo content. So I’ll select the Neto.zip theme file and
hit ‘Open’, then ‘Install Now’. That will do its thing, and once it’s installed
successfully you’ll get a confirmation message stating that the Theme installed successfully. Select ‘Activate’, and you’re all set. If you haven’t downloaded the demo content
already, you can click on the ‘Download the sample content’ link that appears once
you install the theme. If you want to install a child theme you can
either use our free child theme generator, located under the resources menu option on
the OHKLYN site, by following the instructions. Alternatively, you could also use a plugin
called Child Theme Configurator to help set this up. This is best practice but not essential. In keeping with our anti-one-size fits all
approach, we’ll now go through the theme documentation for Neto to finalise the setup
process, install any required plugins, and upload the demo content. If you’ve gone with an alternative theme,
find the documentation and go through the same process. With most premium themes you’ll get access
to the demo content which is one of the reasons I always use premium themes, because it just
makes the process so much easier! The link to the Neto theme is in the description
below, and on the OHKLYN website by clicking on this button. From here, you’ll find the documentation
you’ll need under support, and by scrolling down and clicking on Neto. Alright, so we’ve already taken care of
the theme installation, We’ll move on to installing WooCommerce and the other plugins
we need next. If we scroll down, it has some information
on the minimum recommended image sizes to be used in the theme, as well as the other
recommended plugins. Below that is a guide on importing demo content,
and widgets – which we’ll do after all our plugins are installed. As well as an overview on adding posts, pages,
products, Setting up the Shop, how to use the page builder, and then customizing the
theme. I’ll walk you through all of this. If you went with an alternate theme, go through
the documentation, as this is the best process to get your site up and running successfully. If you run into any problems reach out to
the support team – which is the benefit of having a premium theme. We’ll go through this in a lot of detail,
and I expect that this will be a seamless experience for you, however the team at CSSIgniter
is always there for you if you get stuck. The next thing we need to do is install some
plugins that are leveraged within this theme. These will vary depending on the theme that
you’re using. In this case we’ll install
WooCommerce – If you want to include a contact form on your
website we’ll install Contact Form 7. Contact form 7 is a solid form plugin, however
it’s not the most intuitive to use. I’m gonna walk you through it, so we’ll
get this option working for you. However, there are some more intuitive drag
and drop options like NinjaForms, WPForms, or gravity forms, I’ll add links in the
description below. Alternatively you can integrate a form from
your CRM if you opt to use one. We’ll then install WP Instagram Widget – which
will allow us to include an instagram feed in the footer or sidebar of our site. Next is,
MaxSlider – If you want to include a slider on your homepage you’ll need this one, and
if not, then you can skip it. We’ll also install
Widget Importer & Exporter – to bring in the widget layouts used in the example site. And the
Elementor Page Builder plugin, which we’ll use to easily create the layouts you want,
via a drag and drop interface. The only additional plugin I would recommend
(which is optional) is something that limits login attempts which will be a security measure
against people trying to brute force attack your store. For this I would recommend either Cerber Security
& Limit Login Attempts by By Gregory, or Wordfence Security by wordfence. Also if you want to incorporate Google Analytics
into your store, which I’d recommend, I’d suggest using the WooCommerce Google Analytics
Integration plugin. We’ll put together a video on how to do
this separately, so check our YouTube channel for that. Alright, so let’s go and look at how you
install plugins. From your WordPress dashboard, hover over
Plugins in the admin menu, and select ‘Add new’. In the search box, we’ll search for ‘WooCommerce’
which is by Automattic. With plugins, you always want to check the
number of active installs, the star rating and # of reviews, when it was last updated,
and if it’s compatible with your version of WordPress. In this case, these all look good, so we’ll
hit ‘Install now’, and then ‘Activate’. WooCommerce is a little different to other
plugins, as it will launch a configuration wizard, which we’ll go through together
now. These options aren’t set in stone, and we
will go through all the WooCommerce settings in the next section. From this screen we’ll hit ‘Let’s go’, The first thing WooCommerce will need to do
is create a few pages that all e-commerce website needs. These are a shop page, where your products
will be displayed, a cart page where users will view the items they’ve selected and
begin the checkout process, a checkout page, where users will transact, and a My Account
page, where users can login and view their orders. These pages exist in the demo content we’ll
upload, so it will create duplicates later, but we can easily delete the pages we don’t
want. We’ll select ‘continue’. The next step is to set the location for your
store. This will have an impact on taxes and shipping
options. The first option will set your currency and
bring in the relevant tax information. These will be displayed on the front-end of
your site, and used for calculating prices, taxes and shipping costs. I’m in New York, so I’ll select New York,
select your location. Pick your currency (in my case US dollars
is fine), whether or not you’ll be charging sales tax, and if so, will you include the
tax in the price you list against each product, or will the price be excluding tax. We’ll then select ‘Continue’. Depending on your location, under shipping
options, you can opt to enable WooCommerce Services, that will allow you to print labels
and get discounts with specific postal partners. If you’re not shipping physical products
or this isn’t relevant for you, uncheck the box, otherwise leave it checked. Below that, you’ll select your measurement
units – in this case pounds and inches, and then click on ‘continue’. Next is selecting the payment methods for
your site. If you plan on taking credit card payments
on your site, and you’ve setup your SSL certificate, then you will need one of this
options. Follow the links to learn more about each
option and follow the instructions to integrate your account with your website. I’ll add a link to the WooCommerce website
that has the full list of payment gateways available, as well as the documentation and
videos on how to integrate each option. Below that is the standard PayPal option,
and will be the most common option for those new to running an eCommerce store. Once connected to your PayPal account, this
will give users the option to checkout and pay using PayPal. The user will be redirected to the PayPal
website to make payment, and then redirected back to your website, once payment has been
made. We’ll select that option, and enter in our
PayPal email address. The three options at the bottom are all offline
methods of payment. We’ll select payment on delivery so we can
test our store, and make sure everything works as expected. Just remember to remove this later, if you
won’t be taking payment this way. Once you’ve done that, you will see a ‘Your
store is ready’ message. And be given a number of options. Including the option to create your first
product, or import products via CSV, as well as a number of options to learn more. I would recommend getting familiar with the
WooCommerce support videos, as these are incredibly helpful, particularly when you’re new to
WooCommerce. Their videos and guides are quite comprehensive,
and cover everything from getting started, to more detailed overviews of working with
products, tax rates, shipping, integrating payment gateways, and much more. Down the very bottom is the ‘Return to WordPress
dashboard’ option, which we’ll click for now. In the next section we’ll take a good look
at WooCommerce, specifically adding products, and amending the settings. From your WordPress dashboard you will notice
that two new tabs have been created, the ‘WooCommerce tab’, which is where you’ll manage orders
through your site, coupon codes, and general WooCommerce settings. And the ‘Products tab’, which is where
you’ll manage products, and the categories and tags used to group products. We will go through these tabs in the WooCommerce
tutorial section shortly. Let’s go back and add the rest of the required
plugins. From your WordPress dashboard, we’ll hover
over plugins, and select ‘Add new’ We’ll search for Contact Form 7 it’s by
Takayuki Miyoshi, this is the one we want here – we’ll check the number of active
installs, the star rating and # of reviews, when it was last updated, and if it is compatible
with your version of WordPress. It looks good, so we’ll select ‘Install
now’, and then ‘Activate’. Select ‘Add new’, search for WP Instagram
Widget – this one’s by Scott Evans. Everything looks good but it isn’t tested
at the moment with the latest version of WordPress (generally if you see this, you should mindful
of what you’re installing, in this case, however, I’ve tested it and it’s not going
to cause any issues, so we’re ok to install this plugin). Select ‘Install now’, and then ‘Activate’. Select ‘Add new’, this time search for
MaxSlider by The CSSIgniter Team, Once again this one is untested with our current version
of WordPress, however, I have tested this plugin in our example, and we’re ok to install
it, So we’ll select ‘Install now’, and hit ‘Activate’. Click on ‘Add new’, search for Widget
Importer & Exporter by WP Ultimate, Select ‘Install now’, and hit ‘Activate’. The last required plugin is the Elementor
page builder, so we’ll select ‘Add new’, search for Elementor Page Builder by Elementor.com,
select ‘Install now’, and hit ‘Activate’. There are two additional plugins that are
optional, but I would recommend. They are Cerber Security & Limit Login Attempts
by By Gregory, which is a security measure against brute force attacks. The other is WooCommerce Google Analytics
Integration. If you want to include either of those, follow
the steps we went through, and then customize the plugin for your site in the settings area
of the plugin. Ok, now that we have our theme and required
plugins installed and activated, let’s go through a quick WooCommerce tutorial to get
you comfortable with the plugin. In this section of the video we’ll take
a look at the fundamentals of WooCommerce, where we’ll cover:
Getting started Configuring the WooCommerce settings
Adding and managing products, categories, and tags, and lastly
Fulfillment, or managing sales. By now, you should have installed and activated
the WooCommerce plugin. If you haven’t done that yet, from your
WordPress dashboard head to ‘Plugins’>‘Add New’. Search for WooCommerce by automattic, select
Install, and activate. In the last section, we went through how to
use the installation wizard to get started, which is an optional step. The first thing we’ll do, is go through
the WooCommerce settings, some of which will already be populated if you went through the
steps in the welcome wizard. From your WordPress dashboard, hover over
WooCommerce, and select ‘Settings’. From within the WooCommerce settings area,
you’ll notice there’s a number of tabs. These include general, products, tax, shipping,
checkout, accounts, emails, and API. Rather than me go through these with you,
WooCommerce have put together detailed video tutorials on all the setting options and what
they mean for each tab. Let’s go into the general tab under ‘WooCommerce’
>‘Settings’>‘General’. In the top right hand corner select the ‘help’
dropdown. Within there, you will see ‘Guided tour’
tab, and included in there, is a detailed video walking you through every option within
this tab. If we close that, go across to the products
tab, open the help tab, you’ll see that we have the same thing here. I’ll also include a link in the description
to the WooCommerce guided videos for you to access, where you can view this videos series
as well. This will mean you always have access to the
most relevant and up to date information. These videos will do a better job than anybody
at explaining what’s possible, so pause this video and go through each tab, to get
the settings configured just the way you want. Once you’ve done that, we’ll move on to
adding and managing products, categories and tags, and customizing your online store. Ok, so by now you should have gone through
the WooCommerce settings and configured your settings the way you want. What we’ll do now is look at adding products,
categories, and tags. Once we’ve done that, we’ll move on to
uploading the demo content for our site (if you want to do that), and go through the theme
settings, to customize the look, feel and layouts of your store. After installing WooCommerce, you would have
noticed that a new tab called ‘Products’ was created within your WordPress admin menu. This is where you’ll manage the products
for your store, as well as the categories and tags associated to products. By hovering over the ‘Products’ tab in
the admin menu on the left, you will see the option to view all products, add new products,
add and manage categories, tags, and attributes. If you spent some time at the beginning, and
have given thought to how you want to structure your online store, and the products you’ll
be offering, then we can move straight into the practical steps of adding products, and
creating categories, tags and attributes. If you haven’t done that yet, spend a few
moments now, before moving on. You will be able to add categories, tags,
and products to navigation menus, and to sidebar widgets, so consider navigation in your planning,
as well as the products, or product categories you want to feature. It’s also good to start thinking about,
if you want to feature recently added products, sale items, or specific categories. You should be fairly comfortable with Categories
and tags by now. However, you may not be 100% familiar with
what attributes are. Attributes, refers to the characteristics
of the products you sell, and their variations. For example, size, or color. If your sizing is consistent across products,
or you offer similar colors in a number of product lines, it will be a good idea to set
these up as attributes, which we’ll do later. If not all products have every size or color
available, it’s not a problem as we can remove the individual attributes from each
product that aren’t relevant. The value in setting up attributes, is that
it will speed up your workflow, but it will also allows users to filter by those attributes,
from within the product filter options. For example, in our demo this allows users
to filter by a specific color, and show only results that feature that color. Which is done by adding the WooCommerce layered
nav widget to the shop widget area. It’s good to team this up with the WooCommece
Layered nav filter widget, that allows users to remove the selections they’ve made. We’ll go into more detail when we create
variable products. Before we go and add products, what I recommend
doing first is creating your product categories, which will provide the structure for our online
store. For this example, I’ll use four simple categories,
Mens, with a sub-category of Shoes, and Womens, with a subcategory of dresses. To add categories, hover over ‘Products’,
and select ‘Categories’. If it’s a new website, and you haven’t
imported any demo content, there will be no categories as yet. To create a new category:
Enter the name of the category into the name field – for example let’s use ‘mens’. The slug, is the url friendly version of the
category name, and will be automatically created if you don’t specify one. You then have the option to select a parent
category from the drop down Below you can enter a description for the
category. With certain themes this will be displayed
on the archive page for the category, like it does here with the Neto theme. You can disable this by setting the ‘show
hero section’ option here to no. Below that are the styling options for the
hero section, which is specific to the Neto theme. Play around with those to see what works best
for your design. If we scroll down to the ‘Display type’
option, we can choose if we want to display products, sub-categories, or both on the archive
page for this category. Lastly, if you want to show categories on
the shop, or home page, you may want to set a custom image for that category. To do that, select upload/add image, and either
upload or choose an image from the media library. I’ll upload a few images that i’ll use
for our demos, you can choose to either select files, or just drag them in. I’ll drag them in, then select the one I
want to use. Adding an user friendly title, and an alt
text is good practice, once you’ve done that, select use image. And ‘Add new Category’. To add a sub-category:
Enter the name of the sub-category, I’ll enter shoes
I’ll leave the slug as default Select the parent category, in this case mens
I’ll add a brief description Leave the display type as default
Select an image to use for the category from the options I uploaded earlier, and
Select ‘Add New category’ In our list you’ll see that shoes are now
indented underneath Mens to show the correct hierarchy. Take a moment to set up the rest of your categories,
i’ll add the rest of my demo categories in now. You’ll create tags in a similar way. We’ll now move on to Adding products. To add a new Product, hover over ‘Products’,
and select ‘Add new’. At the very top is where we enter the product
name. This is the title that will be displayed on
the front end, and depending on your permalink settings, will be used in the url for the
product page. This will impact your SEO efforts, so try
to use relevant and descriptive product names. To learn more about SEO fundamentals for WordPress,
check out our course at courses.OHKLYN o-h-k-l-y-n.com Below that, this is where we’ll enter the
long description for the product. This will be displayed down here under the
description tab. You will have the option to add your text
to the either the visual editor which has the same formatting options we covered in
the posts and pages section. Or you can paste content directly into the
text editor. Remember, to avoid formatting issues, if you
are pasting text from a word processing document, paste it into the text editor, then format
it via the visual editor. Below that is our product data, which we’ll
come back to in just a minute. Under the product data tab is where we add
our short description. Which, with most themes, including the theme
we’re using will be displayed in this section here. If for whatever reason you don’t see either
of these tabs. Scroll back up to the top, and under screen
option, you can check the boxes next to any of the tabs you want to see, and uncheck those
you want to hide. Ok, back to our product data section:
Our first option is to select the type of product we are creating from the dropdown
list. These include:
A simple product, which is a product that has no variations or attributes (such as size
or color). This could be a book, or pair of sunglasses
(with only one color option), etc. Conversely, a variable product is a product
that has variations or attributes. For example a pair of shoes with multiple
sizes and colors. A grouped product, is a newly created product
that groups existing products into a suggested group, and
An External/Affiliate product, is a product listing that redirects the user to an external
shop to make the transaction (such as eBay or amazon). Digital products are accounted for by using
the virtual and/or downloadable check boxes. The virtual option is for products that don’t
require shipping. You’ll notice that when that gets checked,
the shipping tab is removed from below. Downloadable means that we’re sending the
user files. For example, this could be a guide or PDF. In most cases, a digital product will be both
‘virtual’ and ‘downloadable’. When ‘downloadable’ is selected, you’ll
see additional settings where you can add files by selecting ‘Add file’, entering
a filename, and selecting the file url, which if you upload it to the media library, will
be the URL located here. Alternatively, you can host your files elsewhere,
and enter the URL. You can set download limits and an expiry
timeframe here, and the tax information below. We’ll uncheck those boxes for now, and we’ll
take a look through the available tabs. On the general tab, this is where you set
the price, you can also set a sale price. As well as schedule when items go on sale,
which is a really handy feature. This will be based on the time settings you
use in you general WordPress settings, which is in the admin menu under ‘Settings’
>and ‘General’. So make sure you’ve set the right time if
you plan to use this feature. When you set a the sales price for an item,
it will add a strikethrough the old price, and add a sale flag over the image on both
the product and archive pages, like this here. Obviously, each theme will treat this slightly
different. Below that you can amend the tax status and
tax class for individual products. On the inventory page, here is where you’ll
set the SKU or Stock-Keeping Unit. This will be displayed on the front, so pick
something meaningful, but also relatively customer-friendly. You can check the option to manage stock levels,
when checked you’re able to enter the stock quantity, whether or not customers can backorder
the product, when the stock quantity is equal to zero, and the stock status that manages
whether the product is displayed as ‘in stock’ or ‘out of stock’ on the front
end. Lastly, is the option to check whether items
can only be sold individually, meaning the item can only be purchased once per order. On the Shipping tab, you can set the weight
and dimensions for an individual product, and set a shipping class, if you set up shipping
classes in your WooCommerce settings before. The linked products tab, allows you to add
upsells, which are other products that appear as suggested products on the product page,
or cross-sell products which will appear as recommended products on the cart page. We’ll cover off the attributes tab in a
moment when we create a variable product. On the Advanced tab. The purchase note box allows you to show a
message to users after they’ve purchased the product. Menu order allows you to have more control
over the order of how products are displayed on archive pages. The lower the number, the higher the product
will be displayed. And Lastly, you can opt to enable or disable
reviews for individual products. On the right hand side of the screen, at the
top you have your publishing options. You can save products as drafts, preview what
the product page will look like, amend visibility, schedule the product to be published at a
future date or time, or publish now. Below that is where you set the product category. You can also create new categories directly
from within here. Similarly, you can select or create new tags
for the specific product, you can add multiple by separating them with a comma. And delete them by clicking on the ‘x’
next to the tag. Below that is where you set the feature image
for your product, and below that is where you add the gallery images for your product. You can move these tabs around, by clicking
on them and dragging them into place. Let’s create a variable product, so that
you’re comfortable with the whole process, and we can setup product attributes and variations. Let’s go up to the top and give our product
a name – for this example we’ve got the Clooney Loafers. I’ll add the long description here – because
i’m pasting in text from a word doc, I’ll paste it in the text tab, and go and add the
styling in the visual tab. I’ll set the heading to a H3, and italicise
the last paragraph. Scroll down and we can add the short description
here. In the product data section, we’ll select
‘variable product’ as our product type, you’ll notice that this removes the virtual
and downloadable options, and creates a new tab in the product data section, called ‘variations’
which we’ll go through in a moment. You’ll also note that the price options
are removed from the general tab, as we’ll be setting all these in the variations tab. This allows us to price different variations
of the product differently (if required). In addition to prices, within the variations
tab, we can also specify if the variation is virtual or downloadable, set stock levels,
add custom images, SKUs, and dimensions, etc. On the Inventory tab, if this were a simple
product I would enter at SKU, and manage the stock level here, however given that I have
a number of variations, I will manage this from within the variations tab instead. I could set a top level SKU for the product
group here. Within the variations tab, you have the option
to set a specific variation as the default for a product, in which case it will show
the image and SKU for that product by default. If you opt to not set one of the variations
as the default, it would be a good idea to add a SKU to the top level product, otherwise
on the front end it will set a SKU of N/A. Obviously, once the user picks the option
they want, they will see the SKU for that variation, but it worth considering. I’ll set a top level SKU of Mens Shoes Clooney
Loafers 01, or MSCL01. I’ll leave the rest blank. In the shipping tab is where you’ll set
the dimensions, weight, and shipping class for your product. For this example, i’ll leave this blank. I’ll also leave the upsell and cross sell
options on the linked products tab blank. Once again, I’ll draw your attention to
the help tab in the top right, and the guided tour tab, which has a very detailed video
on creating products, if you want to go through any of the options in more detail. We’ll head to the attributes tab. To create variations, you need to do this
through creating attributes and assigning them to products. We can do this in a few ways. If we have global attributes, that we want
to apply to all or multiple products, we’ll do this through the attributes tab in the
admin menu, which we can get to by hovering over ‘Products’ and selecting ‘Attributes’. I’ll open this in a new tab. From within the attributes tab, of the admin
menu. We’ll create color as a global attribute,
like in the live example, as we’ll want to add this to our shop’s sidebar widget
and allow users to filter all products by color, or products within a specific category
by color. Think about how you will want users to be
able to filter and navigate your site, before adding in your products. To do this, we’ll give it a name of color
(this can be whatever you like) The slug will be set by default if we don’t
specify one You can create archive pages based on attributes,
however in this case I won’t I want this attribute to be a dropdown box
when I set it against products, so i’ll leave this as select
I’ll leave the default sort order, and Hit add attribute
That will create the new attribute. I then need to click on configure terms, to
add the specifics of the attribute, in this case, the colors. To do this i’ll just enter the name I want
to use for each color, and hit add new color: So in my example i’ll add:
Black Blue
Brown Green
Red White, and
Multiple You don’t need to use every color for every
product, but you will want to add every color that you use across your site, to get the
most value from the product filters. Once i’ve done that, I’ll head back to
the attribute tab within the product data section for the new product we’re adding. I’ll refresh the page, and if I click on
the the dropdown that says custom product attribute’, I’ll see the option to add
the color attribute, I’ll select color, and hit add. In the values box, I have the option to pick
individual colors, I can remove them by selecting the ‘x’ next to the color, or I can opt
to select all options, and once again remove the colors that aren’t relevant. In my case the clooneys (as they’re referred
to on the street) come in blue, brown, and green. Depending on the number of colors a product
has, you can decide which is the better option. Once i’ve got all the options of the attributes
that i need for the product, I’ll need to add these as variations. To do this, i’ll make sure both ther ‘Visible
on the product page’, and the ‘Used for variations’ boxes are checked, and select
‘save attributes’. I’ll then head into the variations tab,
I’ll click on the ‘Add variations’ dropdown, and select ‘create variations from all attributes’
and hit go. I’ll get a warning message saying that it
will create a variation of every combination of attributes possible, this is handy if you
have multiple attributes per product. I’ll click ok. You’ll then see a message with the number
of variations being created, again click ok. And the three variations are now there. To edit the details for each variation, i’ll
click next to it or on the down arrow to reveal all the options. Before we do that, I’ll show the other ways
to add an attributes, that we can either choose to use as variations or not. Head back to the attributes tab in the product
data section. If I Leave ‘custom product variation’
selected in the dropdown and select, ‘Add’. I can create a unique attribute for just this
product. This could be something like color, or size
(if these are things i don’t want to set as global attributes, to do this I would give
it a name, let’s go with size. In the values box I would enter the sizes
available separated by the pipe character, and if I wanted to use this as a variation
I would select the ‘Used as variation’ box, and then ‘Save attributes’. I could also use attributes for none ‘variations’,
by removing the ‘Used for variations’ box. This could be for things like ‘Care instructions’
if i’m selling clothing or something similar. These would appear in the additional information
tab on the product page, and could be a nice addition. Let’s go back to the variations tab, and
fill out the rest of the product info for the Clooneys. I’ll click next to the blue product variation
to show the options. The first thing I can do is set a unique image
for this variation by clicking on upload image. I’ll select the blue loafer image that I
uploaded before, you could also upload a new image to use here. I’ll make sure the title is user friendly,
and set the alt text, then choose ‘set variation image’. Next I can set a unique SKU for this product,
i’ll use MSCL01, and BL for Blue. Below that i’ll check the option to manage
stock levels for this product, I’ll set the price of $249 below that. If at a later stage i wanted to put this item
on sale, I could enter the price here, and schedule the sale. Below that i’ll set the stock level to 12. Next, I don’t want to allow back orders. If for any of your products you want to allow
back orders, you can select the appropriate option from the dropdown. Below that, you will set the weight, dimension,
and shipping class if it’s different for this variation, otherwise you will complete this
information in the general, and shipping tabs above for the product. Depending on the theme, the description option
within the variation settings, will inject an additional description to what’s included
in the short description for the product. I’ll do the same thing for the Brown and
Green variations. Once, you’ve made your updates, select ‘Save
Changes’. To remove variations, you can click on the
‘remove’ option on the right of the variation. If you need to add purchase notes to the products,
set a manual order for how the product is displayed, or disable reviews for the product,
you can do that in the ‘advanced’ tab. If we head back up to the top, on the right
side we have our publish options. In a moment we’ll preview how our product
looks, and then publish the product.. However first, we’ll head down to the category
tab and add this product to the shoes category that we set up before, by checking the box
next to the shoes category. You can also create new categories from within
here, however there are more options available in the product category tab in the admin menu. Below that you could add tags to the product,
by entering the tag names, separated by a comma, in this case ‘blue’, ‘loafers’,
‘casual’, and click ‘Add’. To remove a tag, click on the ‘x’ next
to the tag. Below that, we can set our feature image for
the product, to do that click on ‘Set product image’, either select an image from the
media library, or upload a new image. Once you’ve done that, select the image
you want to use, make sure the title is user friendly, set the alt text, and select ‘set
product image’. To add additional images, we do this in the
product gallery section below, by clicking on ‘add product gallery images’. Once again, select or upload the image you
want to use, set the title and alt text, and choose ‘Add to gallery’. Follow the same process to add multiple images. Once you have all the images you want, you
can change the order by clicking on the image, and dragging it to where you want it. When you’re happy, we’ll head up to the
top and preview what our product page looks like. You’ll notice that we have our feature and
gallery images on the left, which open in a lightbox. We then have our product title, price, and
short description, and our color option dropdown, where the user can select their color preference. The user can then add the product to the cart,
view the cart, and proceed to the checkout. At the moment the price of our variations
are all the same, if you want to charge more for a specific variton, you just need to go
back to the variations section. Say we want to change 299 for the brown version,
we’ll change the price here, and save changes. We’ll then preview the product page. You’ll now see that the price is a range,
rather than a fixed price. When the user selects blue, the price changes
to $249, and when they select, brown it changes to $299. Similarly, if you want to put a specific color
on sale, say we want to put the brown version on sale for $199, we’ll change the original
price back to $249, and add the sale price of $199 here. Save changes. Preview that on the front end. You’ll see that the range has been created,
and the sale icon is now added to the product image. If we click on the blue version, the price
is the original price, but if we select the brown option, it shows the original price
with a strikethrough, and lists the sale price of $199. What about when there are multiple variations,
like color and size. Well we then create either a global attribute
as we did before, or a product specific attribute, by selecting add new ‘custom product attribute’,
giving it the name of size, entering the size attributes separated by the pipe character. In this case 7, 8, 9 ,10, 11, 12. We need to select, Used for variations, and
‘save attributes’. We’ll then go the variations tab. If we click on add variation, we can now select
both attributes. If you’re selling fashion items, I would
suggest that you create a variation for every product option, and manage stock and prices
within there. As an example, let’s delete all our variations. Let’s go back to our attributes tab, and
say we only have these available in two sizes 9 & 10. I’ll save that. And for simplicity, we’ll say they are only
available in blue and brown. I’ll save attributes. Go back to the variations tab, and create
4 variations, these will be: Blue in size 9
Blue in size 10 Brown in size 9, and
Brown in size 10 I’ll go through and set the image, SKU,
click manage stock, enter the price, and stock level. I’ll do this for the rest of them – I’ll
skip ahead so I don’t bore you. Once that’s done, i’ll hit save changes. Now, if we preview that from the front, you’ll
see that there are now two options for the user to choose on the front end. Once they’ve selected the product, it will
show the availability, and the user can add the product to the cart. If we go back, we can also set a default product
color and size if we want to do that. We do that, by selecting the ‘Default Form
Values’ here. If I pick, Blue and size 9, save changes and
preview that. You’ll see that the default form fields
have changed from choose an option to Blue and size 9. Ok, once you’re happy we’ll go back and
select publish, which will take our product live. To view the product page, click on ‘view
product’ at the top – I’ll open it in a new tab, and that’s how you add a product. One last thing, with the theme we’re using
you can add a video as a gallery image. To do that, head down to the ‘Product appearance’
tab, and enter the video url in the field here. If we click update, and head to the front
end, you’ll see we now have the video added into the gallery section. When we click on the video, and it will open
in a lightbox – which can be a nice feature. If we go back, hover over products and select
‘All products’, we’ll now see the newly created product in here. If we hover over the product name, we’ll
see that the product has an ID number, we’ll use this later in WooCommerce shortcodes,
to show products in specific areas. There is also the option to edit the product,
which will take you back to where we were, and will be how you manage products, once
they’ve been created. You can also save products as drafts or put
them back to draft mode, by editing the status here and selecting draft. When you create new products you can opt to
save them as a draft rather than publish them right away, or you can also schedule products
to be published at a specific date and time, by changing the edit option next to publish
from immediately, to a future date and time. Back under ‘All products’, you can also
use the quick edit function which gives you fewer options, as well as duplicate products,
which may be useful for similar products, as it could speed up your workflow. You can also bulk edit products, by selecting
the checkbox next to each product, or by selecting all. Under the bulk actions dropdown, select ‘edit’
and apply, and you’re able to make bulk edits to a number of products fields. Once again, these will improve your workflow. Some of my favourites, and the ones I use
the most include the ability to change categories, tags, product status, and the ability to change
sales prices in bulk by a fixed amount or %. You also, have the ability to preview, or
view products, as well as add products to the trash. To delete products permanently, go to the
trash tab, select the product you want to delete, and click delete permanently, you
can also do this in bulk. One of the last things I’ll show you is
how to create and manage coupons for your store. To do this hover over WooCommerce in the admin
menu, and select ‘coupons’. To create a new coupon, select ‘add coupon’
at the top. Firstly, enter the coupon code that you’ll
provide to users. Next is an optional description. In the general tab, you can set your discount
type to either: Percentage discount
Fixed cart discount, or Fixed product discount
You will then set the coupon amount as either a percentage amount, or fixed dollar value. You can also, create a coupon code for free
shiping, by leaving the coupon amount set to 0, but checking the ‘allow free shipping’
box. Alternatively, you could allow a discount
and free shipping by filling out the coupon amount field and checking the box. You can then set a coupon expiry code at the
bottom, this is a good option if you think you’ll want to active the coupon code at
a later date, or you could just delete the coupon code, when the promo is finished. In the usage restrictions tab, you can set
qualifying criteria such as minimum and maximum spends, for individual use only, the ability
to exclude sale items, as well as the option to allow discounts on, or exclude specific
products, categories, or create a VIP email list, that gets checked against the checkout
email address used. The last tab is usage limits, which give you
more control over how your coupons can be used. Once again i’ll refer you to the help tab,
and the guided tour video in case you need more information. Once you’ve got your store setup, you’ll
want to test the checkout process, to do this select a product, add it to your cart, check
your discount coupon, fill in the customer information, and checkout. What we’ll look at now is fulfillment, and
how you manage orders and sales on your website. Once again, i’ll refer you to the store
management section of the WooCommerce guided tour videos, at the bottom of the page you’ll
see the video links for everything you’ll need to know from managing orders, to refunds,
and reporting. I would recommend that you pause this video
and watch this series, as they will be the most relevant and up to date. From your wordpress dashboard, you’ll see
a summary of what’s been happening on your store. From there you’ll get a quick glance at
the total sales and popular items, the orders you need to process, orders on hold, and products
that are running low or that are out of stock. if you don’t see this, or to amend the dashboard
tabs. From your WordPress dashboard, select screen
options in the top right, and check the tabs you want to see, or remove the ones you don’t. You can also move the tabs around, by clicking
and dragging them into place. Ok so that the WooCommerce fundamentals you
need to know about, and the resources to provide more information. Let’s move on to the last, and probably
the most important section of this tutorial, which is customizing your website to look
the way you want. Ok, so we’ve covered off the fundamentals
of WordPress and running a WooCommerce store. These are the things that will be consistent,
regardless of the theme you use. What we’ll do now is upload the demo content
for our WordPress theme and go through the customization settings to get you your store
looking just the way you want. To do this, we’ll go through the theme documentation,
and make edits as we go. As per the documentation, once we’ve installed
all the required plugins, we can then import the demo content. You can download the demo content from within
the member area of the CSSIgniter site if you haven’t already, or there’ll be a
notice at the top of your WordPress dashboard with a link to where you can download the
sample content. Once you’ve downloaded the sample content,
unzip the folder. Within there you will find a .xml file that
will contain all the products, pages, and posts data and layouts. The other folder is a .wie which will import
all the widget info and layouts from the demo site. There is also a .txt readme file, which outlines
that uploading such a huge amount of info can be troublesome given the large file sizes,
etc. As it says, it may time out. In which case we’ll just start again until
we see the ‘All done’ message. It took us a few attempts to upload all the
content, so if that happens to you, don’t stress, just keep trying again until it’s
successful. If you don’t want to upload the demo content
to your site, you can skip through to the next section (which will be timestamped in
the description below). However, you will need to use the page builder
to create your layouts from scratch, which isn’t difficult, but may take a bit more
time. Ok, we’ll upload the .xml file first. As the documentation says, to import the .xml
file, navigate to the admin panel, hover over ‘Tools’ and select ‘Import’. Scroll down until you see the ‘WordPress’
option, and select Install Now’. Once, the importer is installed, select ‘Run
Importer’. Select ‘choose file’, navigate to the
.xml file you downloaded and click ‘Open’. Once you’ve done that, select ‘Upload
file and import’. You will need to assign the demo content to
an author – we’ll assign this to the admin user we created earlier for now. Check the Download and import file attachments
and hit ‘Submit’. This may take a up to a minute or so to import
all the demo content. You will see a message saying ‘All done. Have fun!’ once it’s imported successfully. If it times out or takes longer than 5 minutes. Just start the process over again – you may
receive notifications that certain content already exists which is fine. It took us about 3 attempts, and about 15
minutes for all the content to be imported. Once the content is all imported, we’ll
upload the widget content. To do this, hover over ‘Tools’ in the
admin menu, if you’ve installed the Widget Importer & Exporter plugin, you will see ‘Widget
Importer & Exporter’ as an option, click on this option. Under the import widgets section, Select ‘Choose
file’ navigate and select the file with the .wie extension, and hit ‘Open’. Then select ‘Import Widgets’. Once all components have imported successfully,
we can move on. If we head back to our documentation, the
next section goes through creating posts, pages, and products, as well as steps for
setting up the shop, which we’ve already covered – but are there for your reference. The next step goes through using the page
builder, which we’ll get onto shortly. Before we do that though, If we go into all
products under products in the admin menu. You’ll see that we now have a bunch of products,
that cover all product types. If you go to the live demo example, the link
to which will be in the description below, under the product menu item at the top, find
the product types you want to use on your site. Then search for them in the ‘all products’
tabs, and you can use them as templates or guides, as you create your products. Next, if you go to the all pages tab under
pages in the admin menu, you’ll see that there is a list of all the pages from the
demo. Go back to the demo site and choose the homepage
layout you want to use for your store from the versions under the home tab. Review the other pages on the demo as well
to identify the pages you’ll want to use on your site, as the pages, including the
layouts, will now already be created for you in the all pages tab. We’ll go through editing pages in a moment. But first, once you’ve decided on the base
homepage layout you want to use, you’ll need to set this as the homepage for your
store. To do this, hover over the settings tab in
the admin menu, and select the reading option. Select the static page option under ‘front
page displays’, and set the front page to the specific homepage option you want to use
from the dropdown list. Similarly, if you want to incorporate a blog
into your online store, set the posts page to the blog page. Save your changes, and if you preview the
homepage of your website, you’ll see that the layout is there, and ready for you to
customize, which we’ll cover in just a moment. Similarly, to pages, the posts from the demo
content will now be available in the posts tab, which you can use as examples or guides
to help you create your blog posts moving forward. Check out one of our blog tutorials for more
information on creating and managing posts. Back to pages. To edit the homepage for your eCommerce website,
or any page for that matter, go back to ‘All pages’ under ‘Pages’ in the admin menu,
and select the page you want to edit. We’ll edit these using the Elementor page
builder, so If you haven’t installed the plugin as yet, go back and do that now. When you’re in the page you want to edit,
click the ‘edit with elementor’, button. This will take you to the front end editor,
where you can begin to customize the pages of your website. In the description below, there’s a link
to an elementor tutorial, as well as a link to the pro version that includes additional
features, and layouts. For what we need, the free version, will be
fine, but you may want to upgrade down the track. Let’s take a quick look at editing the homepage
to get you familiar with how it all works. By clicking on an element or section, it shows
you what it is in the left panel. Each element will be slightly different but
the WYSIWYG (or What you see is what you get editor), is incredibly easy and intuitive
to use. For example to change the text, I simple click
on the text, edit it, and save. To change the image, I click on the column
settings, find where the image is, and replace the image by either uploading a new image,
or choosing one from the media gallery. Once i’ve picked the image I want to use,
I can add a overlay if I want the text to stand out more, amend any of the variables
I want to amend, and when i’m happy, hit save. The bulk of the design is done for you, for
the most part, you’ll be customizing, duplicating, or deleting what’s there. To delete an element is easy, you just click
on the ‘x’ under the settings options, to duplicate elements or sections, hit the
duplicate button. To save changes, hit the save button in the
bottom left corner. If you want to save a section or row to the
library, to use on another page, or in other sections, click the save icon for the specific
thing you want to save, give it a name, and hit save. To use something from your library, or the
default layouts library, click the ‘+’ icon to add a new section, choose the add
a template option, and either choose one of the pre-designed layouts, or add the section
you saved to your templates library, by selecting insert. Have a play around with this, and check out
the links to the videos in the description below. It’s fairly intuitive and using the premade
layouts for this theme gives us a massive head start. There is still a bit of a learning curve,
and the only way to break through it is to get your hands dirty. We’ll go through the theme customization
settings first, and then I’ll walk you through the parts that are a little more tricky, which
are if you want to use an image or video slider, using WooCommerce shortcodes to display products
or categories, and including a contact form or newsletter signup, as these all use shortcodes,
and I remember being new to this, were not overly intuitive to me when I was a beginner. Before we go through all the theme’s demo
content, and begin amending products, pages, posts, and deleting the elements you don’t
want. Let’s take a look at how we create menus,
and amend the theme’s global customization settings. Firstly, we’ll look at Menus. You can edit menus from within theme customizer
which we’ll go through in a moment, however, I prefer to use the dedicated menu section,
which we can navigate to by hovering over ‘Appearance’ in the admin menu, and selecting
‘menus’. The menus page is broken down into two tabs,
edit menus, which is where you manage the content within your menus, and manage locations,
which is where you can assign a menu to a specific menu location. We’ll manly work within the edit menus tab,
as we can do pretty much everything we need to do from within there. The first thing you’ll notice is the option
to select a menu to edit. In our case we’ll select main menu and hit
select. Here you can toggle between the menus that
have been created already when we imported the demo content. Depending on the theme you’re working with,
and if you haven’t uploaded the demo content, you may need to create a new menu. To do this click on ‘create a new menu’,
give it a name (pick something that makes sense to you), below that you’ll have your
menu structure. You will first need to set a menu location
for the newly created menu, which is down the bottom, this particular theme has two
menu locations available, Main which is the main navigation at the top, and Footer, which
is the navigation at the bottom above the footer. If you created a new menu you will need to
add menu items from the available options on the left. To add pages to your menu, check the boxes
next to the pages you want to add, the default options are the most recently created pages,
you can also tab to view all pages, or search for a specific page. You can do the same thing to add posts, custom
links (which I’ll cover in just a moment), categories, WooCommecrce Endpoints, plus if
I open the screen options panel at the top, allows me to add more options. Like products, tags, product categories, and
product tags. It also gives me the ability to add CSS classes
to individual menu items, as well as set the link target that allows me to open links in
new tabs, which will become handy very soon. Back to custom links, these are good for outbound
links, like an external blog, partner page, or for a menu title that you want to use purely
for organization, and don’t want to be clickable. To add a custom link add the url and the link
text you’d like to use. For example, i’ll link to the OHKLYN blog,
and set the link text to LD Blog. For this menu item, as i’m redirecting to
another site, I don’t want the user to leave my site to do it so i’ll open the menu item,
and because we added the link target from the screen options panel above, I can now
check the box to open the link in a new tab. I could also, add a CSS class to give it unique
styling. Let’s look at another example for custom
links. Say you want to create a top level menu item
called categories, and list the product categories underneath, but I don’t want ‘categories’
to be clickable. To do that you’ll add a pound sign as the
link address, and type in categories & save the link. You’ll then add the product categories to
the menu, and drag them across to the right to sit underneath the custom ‘categories’
link. This is how you set menu hierarchy. I can also change the order of menu items
by clicking, and dragging them to where I want. If I save that, and take a look from the front. The LD Blog link opens in a new tab, and I
have all the product categories listed as we wanted. To amend the Footer menu, toggle to that menu
in the option above, or create a new menu, and set the display location to the footer
menu down the bottom. We’ll now go through the global theme settings
which we can amend in the Theme Customizer. To navigate to the theme customizer, from
your WordPress dashboard, hover over ‘Appearance’ and click on ‘Customize’. This will take you into the theme customizer. Note that any changes you make to the settings
below will be previewed live in the panel on the right side of the screen, however to
commit these changes you’ll need to click the Save & Publish button at the top of the
panel. Depending on the size of your screen you will
either see the desktop (normal or small), tablet, or mobile view. I’m working on a 13” laptop, and the theme
options panel is taking up a fair chunk of room, therefore i’m actually seeing the
tablet view. In the bottom left corner, there is the option
to hide the customizer panel, which, in my case, reveals the desktop view. To unhide the panel, I click the arrow in
the bottom left corner. I can also switch between the different device
views to explore what the responsiveness of my theme, and see how the design responds
on mobile and tablet. Alternatively if I go to the front end of
the site, which I can do by exiting out of the customizer, and selecting ‘visit site’
from under the site name option in the WordPress toolbar in the top left (i’ll right click
and open this in a new tab), you can see the desktop version. I’ll keep this open so we can refer back
to it as we commit changes. I’ll head back to the theme customizer. We’ll go through each of the customization
settings. There is an overview for each option in the
theme documentation, which you can follow along with as we go through. If you’re using a different theme, follow
along with the theme documentation, as the theme options will be different, but the approach
should be the same. The first tab is the Header Options Here is where you choose your header style,
either the default layout with the menu centered like this, or you can opt to have your logo
centered like this, which we’ll set in just a moment. Below that is the option to have a sticky
header, which means the navigation menu sticks to the top of the screen when you scroll down
like this. There is also the option to enable or disable
my account or login link in the nav, as well as the cart icon, and search icon. Save any changes, and head back to the main
menu. Next is the Menus tab We’ve gone through how to create and manage
menus in the dedicated menus section, however you can also do that from here. The settings here should look familiar but
with less options. There’s a link to a guide on how to edit
the menus from here within the documentation if you’d prefer to manage navigation from
here. If you make changes remember to save them. We then have Site Identity Here is where you can upload you logo by hitting
select logo, uploading it to the media library, and choosing select. You can then check the box to limit logo size
for retina display which is a good idea, and will make sure your logo never looks pixelated. If you don’t have a logo, and just want
to use a text logo, type in your brand to the site title name, and you can use that. There is the option to add a tagline for your
website. To use the site title as your logo, you’ll
need to check the ‘Show site title below the logo’ box. If you want your site tagline under your logo,
check the ‘Show the tagline below the logo.’ box. Under that you can add additional padding
or space to the top and bottom of your logo. And below that you can set the site icon,
or favicon for your site. That’s the little icon that appears in the
users browser tab when they’re on your site. For YouTube it’s their play symbol part of
their logo, for OHKLYN it’s the little square with the OH in it. Yours will need to be at least 512 x 512px. Save changes, and head back to the customizer
menu. Next is Layout Options Firstly, we can choose between our fullwidth
or boxed global layout. Choose whether our blog and other pages (meaning
404 pages, etc) have a sidebar or not. And for our blog archive pages, we can set
the excerpt length for our articles, which is the amount of words in the preview of a
post on the main blog page, and archive pages like category pages, etc. As well as choose our pagination method. Save changes, and head back. Next up is the Post listing options These options allow you to control the display
of the categories and tag pages for posts (this doesn’t include the product category
or tag pages, as this is controlled within the WooCommerce settings, which we’ll get
to in a minute). For example, on the live site if I go into
the blog page, and click on one of the post categories, it’s referring to these pages. Here I can choose to show a feature image,
or enable or disable the hero section all together. I can then edit the hero text color, background
color, and upload a hero image. As well as customize the positioning of the
hero image. Next are the Post Options These give you greater control over the display
of individual posts. The options here a pretty self-explanatory
so decide which ones are best for you. We then have the WooCommerce settings The first tab controls everything at the shop
level, and relates to the product category and listings pages. The options are similar to those that we covered
under the post listing options before. However, towards the bottom their are some
additional options which include the shop page layout, and allow you to set the sidebar
to the left, to the right or a full width option. The full width option shifts the shop widgets
or filtering options to the off-site or fly in style option. You can choose to display breadcrumbs, which
is the navigation featured here on the live demo site. You can also enable, the ‘show second image
on hover’ feature. Which uses the first image of the product
image gallery. And lastly for the shop options, we can enable
or disable catalog mode which hides prices and the add to cart button. Under the product options, you can enable
or disable product reviews, show up-sells, show related products, and the social media
sharing buttons on product pages. Next up is Colors Under the global color option, we can set
a global background color or image, a body background color or image, if we’re using
the boxed layout, as well as the image alignment and positioning attributes if we choose to
use background image. Play around with these if they’re relevant
to you. Below that, you can set your global text colors,
accent colors, as well as border, button, background, and hover state colors. If you want to tinker with the design to suit
your brand and brand colors, this is the place to do it. Under the header color tab, you can set a
header color or an image for the top navigation bar, as well as the main header text color,
and sub navigation text, background, and border color. As well as the sub navigation hover, and active
text color. Under the footer color tab, you can amend
the footer strip background color at the bottom , and text color. Under the sidebar color tab, you can set the
sidebar background, text, link, link hover, border, and widget titles colors. Up next we have the Typography options Here you will find various options regarding
the theme’s typography. You can change heading, body text, and widget
title sizes and toggle the capitalization of various elements on or off. I think the default values look great but
if you want to amend the font sizes, etc this is where you do it. Next we have Widgets Widgets like menus have two places where you
can amend them – and once again I prefer to use the dedicated widgets area which can be
found from your WordPress dashboard by hovering over appearance and selecting widgets. We’ll make our edits here rather than via
the Customizer, as it’s easier to use and provides access to more options. On the left hand side are all the available
widgets, on the right side are the available widget enabled areas that widgets can be added
to. As you can see this theme currently features
nine widget areas: The blog sidebar
Pages Homepage
Footer columns 1, 2, 3, & 4 The footer instagram widget area, and
The shop widgets The blog sidebar is the primary sidebar and
appears on all posts & post archive pages that have a sidebar. If you’ve uploaded the demo content you’ll
notice that there are a number of widgets already added to this widget area. Navigate to the blog page of your site and
decide which widgets you want to keep and which ones you want to remove. To edit the widgets, click on the dropdown
arrow, update the widget information, and click save. Unlike the customizer, any changes you make
will automatically be live on your website. To change the order of the widgets, drag and
drop them into place. To remove a widget simply click delete. And to add a new widget, drag the widget from
the left and drop it into the widget area on the right. I would recommend going through each of the
widgets and add them to your sidebar to explore what each widget does, and decide on the ones
that make the most sense for you The Shop widget is worth mentioning, as this
impacts how users can filter products and is how you control what’s displayed in the
shop sidebar widget. There are a number of WooCommerce specific
widgets that can be added here. Once again, I’ll refer you to the WooCommerce
widgets documentation and video to explore what’s possible here. The link to the documentation is in the description
below, or on the OHKLYN post. You can also add custom code to the widget
areas using the text widget. This could include things like a newsletter
signup form, or a number of other features. I’ll show you how to integrate a newsletter
signup form a little later. Widgets can be used in a bunch of ways that
add value and improve the user experience, so have a play around and see what you can
come up with. Let’s head back to the theme customizer. As I mentioned, you can amend widgets within
the theme customizer, but you’ll have less options, and less real estate, which can make
it a bit tricky. Up next is Social Networks Here you can add the URLs to your various
social network accounts that are supported by the theme. These will appear in any widget area where
you use the Theme – Social Icons widget. You can check the box at the top to open social
links in a new tab, which I would recommend. Next is Footer options Here you can upload the credit card icons,
or something via a png image. Similar to the one featured on the live demo
site. It uses an image that’s 330px wide by 32 pixels
high. You can check the box to limit image size
for retina displays. If you don’t want to include the credit
card icons, you can leave this section blank. Below that, you can enable or disable the
footer reveal effect, or the WP Instagram slideshow, as well as amend its transition
speed. Next up is the static front page option You can also amend this under the Settings
tab within the WordPress Admin menu, under the reading tab, as we did before. However, if you want to amend the static front
page and posts page, you can also do it from here. Lastly is the the Other tab
Where you can add custom CSS, if you want to do it that way. Hopefully you should be relatively comfortable
with the theme customer now. The best way forward, is to spend a bit of
time here exploring all your options, and you’ll be a pro in no time. What I would recommend doing now, is familiarizing
yourself with the demo theme content and take inspiration from the layouts and what you
can repurpose for your website. I typically create a number of new products,
posts, and pages with my own content, based on the examples in the demo content. Once i’m feeling comfortable with how to
create and format products, posts and pages, I then delete or change the status to draft
for the demo posts, pages, and products. The value in keeping them in draft mode is
that they won’t be visible on your site, but they are there if you ever need to reference
the layouts, or how they were formatted. I would then go in and delete any tags or
categories that you won’t be using for both posts or products, and create new categories
that work for you. Once you’ve done that, reassess your menus,
and widgets. Remember, if you get stuck with anything,
you have access to premium support, and the support forums on the CSSIgniter website – which
are great. Also, if you find anything that we’ve covered
confusing, or would like more info, or an additional tutorial, leave a comment and we’ll
get back to you. The last few things we’ll cover off are:
Using the video/image slider WooCommerce shortcodes to display products
and categories Integrating a newsletter signup form – for
this we’ll use MailChimp, and Configuring Contact Form 7 to include a contact
form on your site. Let’s start with the image or video slider
at the top. As you can see this is leveraging a MaxSlider
shortcode, so we’ll need to configure the slider under the MaxSlider tab in the admin
dashboard, and copy the shortcode in here. So let’s head over there, I’ll hover over
MaxSlider in the admin menu and select ‘MaxSlider’. With the demo content, there are three sliders
that have been created, to find out which version is being used on the homepage demo
i’m using I need to find the slider with the shortcode id equal to this number here. So i’ll click on this one, scroll down to
the bottom where the shortcode is and, yep that number matches, so i can either edit
this one, or create a new slide, and copy across the new shortcode. I’ll just edit this one here. So to do that, it’s quite straightforward,
I just need to amend the details for each of the slides that have been created here. To change the image, I just click on the image,
and upload or select the image i want to use. If I want to use a video as my background,
I’ll need to upload the video to my media library, which isn’t great, as videos will
drain the hosting resources, however, if you’re using WP Engine or a premium hosting provider
this won’t be an issue, and in any event, remember to keep the length and file size
to a minimum. You can then amend the text, sizes, and alignment
to suit your messaging and design. Update the links to the pages where you want
the buttons to take users. I’ll add an image to the second slide. And delete the last slide, by clicking on
remove slide. Below that are the slide settings, where you
can amend the transition speed between slides (this is in milliseconds, so 5000 is 5 seconds,
to change this to 6 seconds, you’d amend this to 6000 milliseconds). You can also set the height of the slider,
navigation style and positioning, as well as colors and image size. To commit the changes, i’ll hit update. If you’ve create a new slider, you’ll
just copy the shortcode at the bottom and past it where you want it in a shortcode module. If I go to the front page of the site, I can
now see my updated image slider. The next thing I want to tackle with you is
the newsletter, signup option. If you don’t want to include one, you can
just delete this section, and move on to the next step, However, as it stands, it’s currently
using a contact form 7 shortcode, which will work, but we want to integrate this directly
into mailchimp, so you can send an autoresponder, or at least add them directly to your mailing
list. MailChimp is great, because from there, using
a tool like Zappier, of IFTTT, you can send the email info anywhere, like to your CRM,
or whatever. You could also embed a form directly from
another email marketing tool or software provider. You’ll just need to know a little CSS to
style it so that it looks consistent with the rest of your website. Check out our Intro CSS course for WordPress
at courses.OHKLYN.com, or signup to our newsletter for a discount. Alright, let’s take a look at the module
where the newsletter signup form is. You’ll see that we have the title which
you know how to change, below that is the shortcode module, which we’re gonna change
to a HTML element, so we can grab the html embed code from within our mailchimp account,
and paste it in here. To do that, we’ll delete the shortcode module,
by clicking on the ‘x’. From the elements tab, we’ll scroll down
until we see the HTML option, then drag that across into the column, underneath the heading. That opens up the area where we can paste
our html snippet. If you have a mailchimp account, login to
your account, or create a new one. I won’t go through setting up lists here,
however, we’ll put out a tutorial on this shortly, so check our videos, or subscribe
to our channel to stay in the loop on that. From within the embed forms section, for the
list you want to add the email address to, pick the super slim option, uncheck the include
form title box, and copy the embed code at the bottom. Navigate back to the Elementor page builder,
and within the html snippet section paste the code. The newsletter signup form should be in there,
but it doesn’t match the styling of our theme. To fix this, I’ve added a code snippet on
the OHKLYN post, follow the link in the description, if you’re not on the post page already,
and copy the code from here. Then, navigate back to the page builder, scroll
up to the top within the html code that you just pasted in to the part here that says,
‘Add your own MailChimp form style…etc’. Click at the start of that row, and press
enter to push everything down a line, arrow up to the blank line, and paste the CSS you
copied from the OHKLYN post in here. You’ll see that that now matches the button
styling above. Once you’ve done that, select ‘save’. #mc_embed_signup input.button {background:#000;
border-radius:0px; font-family: “Roboto”, Sans-serif; font-weight: 500; font-size:13px;
} #mc_embed_signup input.button:hover {background:#333;}
#mc_embed_signup form {padding-left:0px;} #mc_embed_signup input.email {border-radius:0px;} As I mentioned before, we could also incorporate
a newsletter signup form into any of the widget areas. Let’s navigate to the widget area, under
‘Appearance’>‘widgets’ To add a newsletter signup using your MailChimp
embed form, you would add a new text widget to the widget area, copy in your MailChimp
Embed code, you’ll need to add some custom CSS again, there are a few more lines required
than what we just went through. You can access this on the OHKLYN website
here, and add it just above the ‘Add your own MailChimp form style…etc’ part of
the MailChimp Embed code, like we did before. Save the changes, and view the blog page from
the front. We now have our MailChimp newsletter signup
integrated within our sidebar. #mc_embed_signup input.button {background:#000;
border-radius:0px; font-family: “Roboto”, Sans-serif; font-weight: 500; font-size:13px;}
#mc_embed_signup input.button:hover {background:#333;} #mc_embed_signup form {padding-left:0px;}
#mc_embed_signup input.email {border-radius:0px; width:100%;}
#mc_embed_signup_scroll>p {margin:0px;} Another thing we need to take a look at together
is the WooCommerce shortcodes. Once again, i’ll refer you to the WooCommerce
shortcodes documentation and video (the link to which, is in the description below). As you can see on the demo homepage that i’m
using, it’s featuring sale products, and, the most recent arrivals for the ‘womens’
category. If I go to the page builder, you’ll see
that this is being set via WooCommerce shortcodes. The sale section is using the ‘sale products’
shortcode, which, if I navigate to the WooCommerce documentation is this one here. WooCommerce links
https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/ https://docs.woocommerce.com/document/woocommerce-shortcodes/
https://docs.woocommerce.com/document/woocommerce-widgets/ https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/ You’ll see that the arguments or options
you can use are: how many products are included per page,
the number of columns, order by (below is a list of all the values
you can sort a product by), and the order either ascending or descending. You can specify any of these values for this
particular shortcode. If we go back to the page builder, you’ll
see that it’s using columns, which are set to 4. You could easily change this to 3, if you
prefer. It’s also set to show 8 products per page,
which we could change to 6, or however many you want. It also includes, some theme specific options. If we go back to the theme documentation,
at the bottom under the WooCommerce shortcodes section, you can see there four custom attributes
that have been created specifically for this theme, which include:
title – this allows you to set a title for the content block
style – which toggles between two available layouts, list and carousel, if omitted, it
will default to list Show_categories – this displays the product
categories attached to a product. The values it accepts are yes or no, it defaults
to yes if omitted. An example of which can be seen here, as the
categories are displayed under the product image. To remove this you would include the show_category
argument equal to no. And lastly,
show_price – which displays the product’s price. The values it accepts are yes or no, and it
defaults to yes if omitted. If we go back to our example, you can see
that it’s using style=carousel, which if we look on the live example creates this
carousel option here. The default option is used on Version 2 of
the homepage, and looks like this. The other custom attribute included in the
theme is title which is set to On Sale. You can amend this text here by setting the
title to whatever title you want, and this will work for all WooCommerce shortcodes. If we have a look at the example below, you’ll
see that it’s exactly the same process, it just uses a different shortcode and amends
the attributes and values. Hopefully the WooCommerce shortcodes don’t
look too daunting now. To create a new section using the WooCommerce
shortcodes, you’ll either add a new section, select the full width option, add your shortcode
module, and paste in the shortcode you want to use, with the required changes. Or, duplicate an existing section, drag it
into place, and update the shortcode. The last thing I’ll show you is how to add
a contact form to your website using contact form 7, if that’s something you want to
do. If not then go ahead and further customize
your website to suite your style. If you’ve liked this video remember to give
it a thumbs up and subscribe to our Youtube channel and newsletter for more free tutorials,
discounts, and updates. Leave us a comment with what you liked, any
feedback and what else you’d like to see. To add a contact form, you should have installed
Contact Form 7, if you haven’t done that already, go back and do that first. From your WordPress dashboard, you should
see a new option in the admin menu called ‘Contact’, click on contact forms. The great thing with Contact Form 7 is that
they pre-create a form for you, in this case, if you’ve uploaded the demo contact there
will be three. To check which one is used on the demo contact
page, go to pages>all pages. Click on the contact page, and review the
ID number in the shortcode. If we go back we know that it’s using this
one here. If you’re not using the demo content you’ll
just need to copy the shortcode for the contact form you want to use (which we’ll edit in
a moment), the shortcode can be found here. Navigate to the page that we want the contact
form on, go the text editor tab and paste in the shortcode where you want the form to
go. If we preview the contact page, you’ll see
that our form is in there and ready to go. We now just need to go back to the contact
forms tab under the contact option and customize the form fields. We’ll click into the form. The first tab is how we control our form input
fields. The default fields are, Your Name, Your Email,
Subject and Your Message. The first step is to decide which fields you
want to include in your form, and which fields are required. For this example, I want to request their
Name (as a required field), Email (as a required field), Phone (not a required field), an Interested
in dropdown (as a required field) with the options: Advertising, Contributing, and Other. Plus a Message box (as a required field),
and the send button. If you look at the default form fields you
see that each input field has it’s own piece of code. This is the name field, this is the email
field etc. The first choice you have is whether you want
the form input labels to be above the input field like it is in the default here, or if
you want to use a placeholder that sits within the input field itself. To change it to the placeholder option, we
remove the label tags that are wrapping the field as well as the label text. Instead what we do is click into the field
shortcode here, hit space and enter placeholder, space inverted comma (then enter the placeholder
text your want, so in this case Name) and then close the inverted comma. I’ll save this and refresh the page on the
front end. And you’ll see the name is now sitting as
a placeholder within the name input field. We’ll go back to the contact form editor. If you prefer that look do the same thing
for the other form fields. I prefer it the original way so I’ll change
it back, but remove the word ‘your’. The next thing we need to do is customize
the fields we want to include. We want to keep the name and email fields
as required fields. To make a field required, you just need to
include the asterisk next to the field type here. I then want phone which isn’t a required
field. To add a form field I put my cursor where
I want it and select the option from the tags in the menu above. The tag I want is Tel. I can choose to make this field required or
not, in this case I don’t want to make it required so I leave the box unchecked, If
you wanted to add a placeholder you would enter the placeholder here and check the ‘use
this text as the placeholder..’ box. In this case i’ll leave this blank, and
hit insert tag. This creates our shortcode field, we just
need to wrap it in a label tag (we put our opening label tag here, and our closing label
tag here, remember to include the forward slash in the closing tag). And then we’ll add the label name we want
to use – in this case we’ll use phone. Let’s save that and refresh our contact
page. You’ll see that we have our new phone field
(which isn’t a required field). If you wanted to make it required, you would
just need to add an asterisk next to the field type which is tel. So we add that in, hit save and refresh the
contact page, and it’s now a required field. If we wanted to keep it that way we should
add the word ‘required’ within the label to provide a better user experience, but we
won’t do that – i’ll head back and remove the asterisk. We’ll then add the dropdown box. To do this we place the cursor where we want
it, select the drop-down menu tag from the options above. We want to make this required so we’ll check
the required box, give it a name of InterestedIn. In the ‘options’ box, i’ll enter the
options for the dorpdown list – one per line, so advertising, contributing, and other. You can decide if you want to allow multiple
selections or if you want to insert a blank item as the first option. I’ll enter a blank item, but won’t allow
multiple options, and select insert tag. Once again i’ll wrap it in a label tag (we
put our opening label tag here, and our closing label tag here, remember to include the forward
slash in the closing tag). And then we’ll add the label name we want
to use – in this case we’ll use Interested in.. in brackets (required). I’ll then delete the subject field as I
don’t need it, and add an asterisk and word required to the message box. Once i’ve done that I’ll hit save and
refresh my contact form. That all looks good, the only thing is that
the styling for the dropdown doesn’t look great. I’ve passed this onto the CSSigniter team
and i’m sure this will be updated as it’s an easy fix. To style the field the way we want it through
all we need to do is copy the styling from the field above and add it to the custom CSS
section in the theme customizer. To do this if you’re in chrome, right-click
on the form field above and select ‘inspect’ where you see input, textarea – select the
CSS below that, to check that this will work, right click on the dropdown list and select
inspect, make sure you have

14 Comments

Add a Comment

Your email address will not be published. Required fields are marked *