How to Make an Online Store (2018) | WordPress eCommerce Tutorial


In this video, we’ll go through the steps
of how to make an online store for 2018. The eCommerce website and blog we’ll build
together, is this one here. This WordPress eCommerce tutorial is really
well suited to those who want to create an online store with a smaller product range,
or for products with less variations. If you sell a specific product line, digital
products, courses, link to affiliates, and see blogging or content marketing as a big
part of your eCommerce strategy. Then this tutorial is for you. If that’s not you, then check out our ‘How
to Create an eCommerce website’ tutorial, where we go through the process step-by-step
of setting up a more ASOS styled website, which has a lot more filtering options, and
is great for a fashion store, or other product types that have a number of attributes and
variations (like size, color, brand, etc). Where users will want to filter by these attributes. There will be a link to that tutorial in the
description below, or your can find it on the OHKLYN YouTube channel. For the website, or ecommerce enabled blog
that we’re going to build today, there are three main homepage design options for you
to choose from, these are to set the: Shop page as your homepage
Blog frontpage, with shop or category links as your homepage, or
Create a custom homepage from one of our free pre-designed templates
For this you will need the Divi Page Builder plugin, which is one of our favourite page
builders, there is a discount link to the Divi Builder in the description below. The four custom homepage layouts we have designed,
and made available for free are home page option 1
home page option 2 home page option 3, and
home page option 4 To get access to these for free, you just
need to sign up to the OHKLYN newsletter. You will be sent a welcome email, with a link
to the free tutorial assets for this tutorial, as well as all of our other tutorials. The big standout for this online store tutorial
over others, is the blog design and options you’ll get access to. As you can see the design is incredible, and
is really easy to customize to suit your style. There are a number of blog layouts that include:
Dual sidebar options, Single sidebar options,
Full width options with no sidebar. As well as a number of varying column layouts
with, or with sidebars. Individual blog layouts are really well designed
and feature unique post formats, responsive lightbox galleries, and the ability to link
to internal or external products from directly within the post, in a way that is really well
styled. As well as the ability to easily include affiliate
disclosures, etc. We’ll go through how to customize your website
step-by-step to suit your business or brand. You can view the live demo of the site we’ll
create a OHKLYN o-h-k-l-y-n.com/go/olsen-demo. (there’s a direct link in the description
below). So if you want to know how to make an online
store with WordPress the right way, and avoid the errors beginners often make, then let’s
get to it! We’ve created a step by step post that accompanies
this video, that you can follow along with on the OHKLYN website at OHKLYN o-h-k-l-y-n.com
(there will be a direct link in the description below). In that post, you’ll find the written instructions,
as well as any links mentioned in this video. So I would recommend opening up the post in
a new tab, and following along. We’re going to create this exact online
store here, and along the way I’ll show you how to customize every aspect including
colors, images, layouts, products, and categories, to meet your business, blog, or brand objectives. As I mentioned earlier, this tutorial is ideal
for anyone wanting to sell a smaller range of physical products, services, software,
courses, or linking to affiliate partners with a focus on blogging or social media to
drive traffic. We’ll cover off on all product types, and
walk you through the WooCommerce fundamentals that you need to know about to be successful. In this tutorial, not only will we help you
create a result, but you’ll also learn the essentials of how to make an eCommerce site,
get access to the tools you’ll need, and understand the thinking that will help you
approach your online store in the right way. 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 online 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 of the
themes on this list. Having built 100’s of WordPress stores,
website, and blogs for clients ranging from $1,500 to 10’s of thousands of dollars – I
can walk you through best practices, to help you avoid some of the common errors that beginners
inevitably make. The steps we’ll cover in this video are:
Preparation – Here, we’ll take the time to plan out the journey, and get clarity on
what the end picture looks like. Like putting together a puzzle, building an
online store is a lot easier if you’ve got the picture of what it’s gonna look like
in front of you before getting started. For this you’ll want to think about how
you’ll group products (via categories, tags, etc), as well as how you’ll use your blog
to assist in driving traffic to your site, or additional pages such as an FAQ page, contact
or terms of use page to improve the user experience and communication flow. We’ll then move on to
Registering your domain and setting up hosting for your online store. 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
An overview of the online store 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 it by
the time we get to uploading and managing products in the back end of your new website. 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 get to
Choosing and uploading your WordPress theme Installing the required plugins (This includes
WooCommerce specifically, as it’s the plugin we add to WordPress to enable eCommerce functionality). We’ll then move on to our
WooCommerce tutorial This will include Adding and managing products
Adjusting the WooCommerce settings to suit your business, brand, or blog. As well as 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, posts, and layouts on the demo site (the only difference
is that it will use image placeholders instead of the actual images – for licensing reasons). This doesn’t include the products, categories,
and tags, or the custom homepages using the Divi Builder. We’ll do that separately, by creating new
products, categories, and tags from scratch. As well as uploading the custom homepage layouts
Via the Divi Builder library. 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. Alright, let’s get started! We’re gonna go through and customize every
aspect of your online store, 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. 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 that’s 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 into this a bit later). 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. To mimic the design on the demo site, we would
recommend using an image size of 690px wide x 1035px high. You will need to update your WooCommerce products
image settings, which we’ll cover off later. Remember to keep the file size for your images
as small as possible (always less than 500kb), so it doesn’t impact your page load speed. Next is Categories, this is probably the most
important aspect and something you should take some time to consider, as it will impact
the way you layout your online store, and how users will navigate your site. With this theme, users will be able to navigate
your site by categories and sub-categories, tags, or brands, whichever is relevant to
you, by adding these to the navigation menu. As well as sort product results by price,
newest, popularity, etc. So think through how you want to lay this
out, and group products in ways that make the most sense for your product range. An example of this in the demo site, is how
we’ve added categories to the navigation (which is a non-clickable custom link), with
the product categories under that, and sub-categories below that. We’ll go through how to do this later in
the video. 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, brand, collection, 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 (which is for another day. However, if you’re 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 may want to give some thought
to your blog layout, content, and the types of elements you want to include in your sidebars,
etc. Also, give some thought to the pages you want
to include on your site such as an about page, contact, or other relevant or custom pages. There are a number of pre-built layouts as
you saw, and with the Divi Builder you’ll be able to easily create any type of page
you want using their visual drag and drop interface and pre-built layouts. Lastly, you will need a small budget of around
$150 – 450, depending on the options you choose. This will include things, like your domain,
hosting, and a premium WordPress theme, and plugins, as well as any other design or image
assets you may need. We have provided some affiliate links in the
description below, and on the OHKLYN site that we’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, and most importantly for today, the free custom homepage layouts we’ll use
later on. Ok, so there’s a few things we need to do. Fortunately, if you haven’t got that all
together as yet, that’s ok, we can continue on and get your site set up and running, as
well as 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 for your online store 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. And 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. 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 store 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, your password will be sent to your 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 beautifully designed
theme, and features a lot of the elements, widgets and layout options you would expect
in a modern blog with an an online store. As we discussed earlier, there are three main
homepage design options for you to choose from. On the live demo, you will be able to view
two of theme: The Shop page, which you will be able to set
as both your homepage and shop page, or just your shop page. Regardless of whether you use this for your
homepage or not, you’ll be able to amend the layout, featured products, and titles,
using the WooCommerce shortcodes. We’ll cover this off a little later once
we have our theme and plugins installed, and some demo content to work with. The second option you’ll see is the
Blog frontpage, with the shop and/or category links which can be set as your homepage. This will primarily feature your blog, with
links to the shop, from the navigation, and from within the page. The final option which is to create a custom
homepage from one of our free pre-designed templates, won’t be on the live site. This is a custom option that we wanted to
include to give you more freedom and control over the look and feel of your website. We’re able to do this by leveraging the
Divi Builder plugin, which is compatible with the theme we’ll be using today. The first home page option is this one here. It has a very clean and modern look, with
links to the shop page, which I’ll show you how to set and adjust. As well as a section that could link to either
an about page, or your blog. It also has a nice image that utilizes an
optional parallax effect, that i’ll show you how to enable or disable via the page
builder with one click. This could be used to navigate to a specific
product category, to the shop page, or wherever. You are also able to feature specific category,
products, or sale items, etc using the WooCommerce shortcodes, which we’ll cover in our WooCommerce
tutorial. The second home page option is this one here. This is a simplified option, that features
an image or video slider, that have been pre-styled, and are easily customized to suite your business
or brand. Next is the third version of the home page
option. This features a header at the top with unique
alignment, an intro section that could link to a blog or about page, etc, and then incorporates
a modern grid style layout that could be used to link to specific categories or however
you like. You could create as many grids as you want
via the drag and drop editor. These are fully responsive, and leverage media
styling and the flexbox display type, to switch the column order so that they stack in the
correct order on a tablet and mobile. This is very cool – and really easy to do. We’ll cover this off a little later. The last custom option is version four of
the home page. This features products at the top via the
WooCommerce shortcode of your choosing. A section below that to link to an about or
blog page, and a ‘featured in’ or ‘brands’ section at the bottom to leverage social proof,
or highlight some of the brands you’re working with. We’ll upload these to the Divi Builder library
via a JSON file, so to leverage these you’ll just need to purchase the Divi Builder plugin,
which you can access via the discount link in the description below, on the OHKLYN website,
or by entering in the URL on your screen now. To download the JSON file and required CSS,
sign up to the OHKLYN newsletter, you’ll receive a welcome email like this, follow
the link to the tutorial assets, and you can download the required files here. We’ll go through uploading the plugin in
a later section. On the WooCommerce website, there is a list
of all the shortcodes available for use on your website (there will be a link in the
description below). 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. If you go back to the live demo site, I would
recommend exploring the various blog layouts that come with this theme, as well as any
of the other pages you may want to use from under the templates tab at the top like the
looks pages, about page, or contact page. If you decide to use the Divi Page Builder,
you will be able to create more intricate layouts, as well as access their pre-designed
layouts, including the ones featured on any of our previous tutorials, like the ‘brooklyn’
tutorial for example which features a number of different pages that you could easily integrate
into your site. If we hover over the ‘Shop’ 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, the short description here, quantity
selector, add to cart button, SKU, Categories, Tags, and if you scroll down, the long description,
reviews, and related products. 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. You can 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 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. We than have
A variable product: Which is a product that does have attributes or variations, such as
size or color. You’ll notice this looks similar to a simple
product, 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. Lastly is a
Sale item, when you set a sale price for an item it 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. 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 in the navigation menu at the top I can
click on ‘view cart’ which we’ll add via the menu settings later. 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. 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’ll build together, and we’ve covered off 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 you set up in the
prior step, and that will take you to the back end of your WordPress dashboard. We can now move on to the 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 we’ll be using is called Olsen
by CSSIgniter, and is one our top rated themes. 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 Olsen theme,
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 of their 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
Neto theme, and a stand alone blog (with no eCommerce) using the Olsen theme. I’ll be putting together an eCommerce tutorial
using their Hugo theme, as well as a blog tutorial using Spencer 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 Olsen premium
theme and click on ‘WordPress’ to download the Olsen premium WordPress theme. This will download as a zip file which we’ll
upload soon (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 to
use. As I said at the beginning though, if you
don’t like the Olsen 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’>and ‘Themes’, choose ‘Add new’ and select ‘Upload theme’. Click on ‘Choose file’, and navigate to
the .zip file for your WordPress theme. If you downloaded the demo content for Olsen,
just make sure you pick the right Olsen.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 Olsen.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, and
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. We’ll now go through the theme documentation
for Olsen 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 a lot easier! The link to the Olsen theme is in the description
below, and on the OHKLYN website by clicking on this button. From there, you’ll find the documentation
you’ll need under support, and by scrolling down and clicking on Olsen. 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. At the bottom is the theme customization options. We’ll go through adding pages, products,
setting up the Shop, and how to use the Divi page builder in the customization section
of this video. If you want to go 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 we’ll create an awesome result together, however remember that the
team at CSSIgniter are always there 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 – this will give our website eCommerce functionality. Socials Ignited – this allows you to create
a widget that links to all your social profiles 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. With the Divi Builder plugin there is also
the ability to use the form module from within there. 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 the,
Widget Importer & Exporter – to bring in the widget layouts used in the example site. And the
Divi Builder plugin – If you want to use one of the custom homepage options, or create
your own design, we’ll use this to easily create the layouts, via a drag and drop interface. The only additional plugins I would recommend
(which are 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 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, 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 websites need. 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. 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 Shipping, this 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 to choose
one of the two options at the top. Follow the links to learn more about each
option and follow the instructions on integrating 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 the general WooCommerce settings. As well as 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 Socials Ignited by The
CSSIgniter Team, 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’, We’ll search for Contact
Form 7 it’s by Takayuki Miyoshi, this is the one we want here – once again 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, so we’ll select ‘Install
now’, and then ‘Activate’. Click on ‘Add new’, search for Widget
Importer & Exporter by WP Ultimate, Select ‘Install now’, and hit ‘Activate’. If you want to use the custom homepage layouts,
or create your own design using a drag and drop page builder, the last required plugin
is the Divi Page builder by Elegant Themes. To install the Divi Builder, we’ll need
to purchase and download a copy, and then upload it to our website. To do this, follow the discount link in the
description below, or enter the URL on your screen now. You could also click on this button here if
you’re following along on the OHKLYN blog. That will take us to this page. You then choose to either get access to updates
and support for one year, or go with the lifetime option. The great thing with Elegant themes, is that
you’ll get access to all their themes, like their flagship offering Divi, as well as all
their plugins including the Divi Builder, plus social sharing plugins like Monarch,
and their email opt-in plugin called bloom, which I would recommend checking out further
as they are awesome tools. We use a number of these on the OHKLYN blog. Choose the package that makes the most sense
for you. You can always upgrade later, and if you subscribe
to the OHKLYN newsletter, we’ll keep you in the loop on when they run major promo events. Click ‘Sign up today’. Enter in your details, and payment information. Then select ‘Complete registration’. From the members area, in the downloads tab,
scroll down until you see the Divi Builder (not the Divi theme, which is at the top). Then click, ‘Download’. That will download the plugin as a Zip file. To upload the plugin, head back to your WordPress
dashboard, and select ‘Add new’ under plugins. At the top, click on ‘Upload plugin’,
select ‘choose file’, then navigate to the Divi Builder Zip file you just downloaded,
and select ‘ open’. Click ‘install now’. You’ll get a confirmation message, that
it was uploaded an installed successfully, then select ‘activate’ As mentioned earlier, 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. And the other is WooCommerce Google Analytics
Integration. If you want to include either of those, follow
the steps we just went through, and then customize the plugin for your site in the settings area
of the plugin. Alright, we now 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. 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. One thing we will do together in regards to
the WooCommerce settings, is configure the product image settings to match the demo site. To do this, under the WooCommerce settings,
navigate to products, and display settings. We’ll scroll down to the product image settings,
and set the catalog image to 447px wide x 667px high, and the single product image to
690px wide x 1035px high. These are the image sizes you should use for
your product images, if you want to replicate the demo site. You can use whatever you like though. And if you change this later you will need
to download the regenerate images plugin here and regenerate images. If you want to understand these settings further,
review the guided video tour for products, from within the help menu above. 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,
as well as 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. It’s also good to start thinking about,
if you want to feature recently added products, sale items, or specific categories, on your
home, or shop page. You should be fairly comfortable with Categories
and tags by now. However, you may not be 100% familiar with
attributes. Attributes refer 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 global 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. 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 Olsen theme. The ‘Display type’ options, allow you
to 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 a 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. Once you’ve done that, we’ll 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 that 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
the 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
options, 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 take
a look through the remaining 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 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 tab, 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 the product, and below that is where you add the gallery images for the 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 the SKU to N/A. Obviously, once the user picks the option
they want, they will see the SKU for that variation, but its 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 this 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 these 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 you have global attributes, that you’ll
apply to all, or multiple products, you’ll do this through the attributes tab in the
admin menu. Which, you 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. 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. 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 save this as a draft to 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 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 attribute values that
relate to 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. 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 you another
way to add attributes, that we can either 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 a similar item. 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 zoom in when the mouse is hovered over the image,
you can also open the images 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 variation, 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, and 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 end,
you’ll see that there are now two options for the user to choose from. 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. Let’s got through the process of setting
up a simple product. The process is a lot more straightforward. Under the product tab in the admin menu, we’ll
select ‘Add New’. Enter in the product name
Type or paste in or our long description in the text editor, and add the styling we want
in the visual tab We’ll scroll down, and do the same thing
for our short description In the product data section, select the ‘simple
product’ option, from the product type dropdown Add our price
On the inventory tab, we’ll add a SKU Check the manage stock box, and enter in the
stock quantity I’ll leave the rest of the tabs blank, but
go through them and enter in what’s appropriate for your product
On the right hand side, I’ll select the product category
Add tags, I’ll add ‘summer’ and ‘casual’ I’ll select a product feature image
For this example, I won’t upload any gallery images. I’ll scroll up to the top, and preview the
product. That all looks good, I’ll go back and publish
the product. I’ll add in a number of additional products,
so that we can populate our designs. I’ll skip ahead and we can move on to the
next step. If we go back, hover over products and select
‘All products’, we’ll now see the newly created products 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 product 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. Pause the video and upload the rest of your
products, if you’ve got them ready to go. 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 a: 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 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 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 covers 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 pages, and posts data and layouts from the live demo. The other file is a .wie which will import
all the widget info and layouts from the demo site. Because of the size of the .xml file, it may
time out during the upload. In which case, we’ll just start again until
we see the ‘All done’ message. It took us a couple of attempts to upload
all the content, so if that happens to you, don’t stress, just keep trying 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). Ok, we’ll upload the .xml file first. As the documentation says, to import the .xml
file, in 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. 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, which we’ve already covered – but is there
for your reference. The next step is to go through uploading the
custom homepage layouts via the Divi Page Builder, and setting the layout you want as
your homepage. We’ll also create the blog page for your
website, where all your posts will be displayed. Before we create our new pages, let’s upload
the custom homepage layouts to the DivI Library. If you haven’t downloaded the JSON files
and CSS from the OHKLYN website as yet, you’ll need to do that first. Head to the OHKLYN website, and sign up to
the OHKLYN newsletter. You’ll receive a welcome email like this. Follow the link to the Free tutorial assets,
and use the password that’s listed here. That will take you to this page, Under the
Olsen Shop tutorial, click on this button to download the asset files for this tutorial. This will download as a zip file. Unzip the file, and within there you’ll
see the olsenShopPages.json file. This is the file with all the layouts, and
images for this tutorial. The images for this tutorial have been provided
by Styled Stock, a great free feminine stock photo resource, Foodie’s feed, Kaboompics,
and Pexels. For a list of 28 of the best stock photo sites,
check out our article on the OHKLYN blog. Within the folder you’ll also find a text
file, with the required CSS for the WooCommerce elements, that we’ll need to add to the
custom CSS section within the theme customizer. We’ll do this shortly. To upload the JSON file, from your WordPress
dashboard, if you’ve uploaded the Divi Builder plugin, you’ll see the Divi tab in the admin
menu. If you haven’t, follow the discount link
in the description and revisit the steps in the prior section on how to upload and install
the plugin. Under the Divi tab, select ‘Divi library’
Up the top, select ‘Import & Export’ Click on the import tab
Scroll down, and select ‘choose file’ Navigate to the unzipped file you just downloaded,
and select the ‘olsenShopPages.json’ file Then click on import Divi Builder layouts
That will then upload the custom homepage layouts
Once it’s uploaded, you’ll see the layouts available to be used within your Divi library. To use the custom homepage layouts, 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 live demo. What we’ll do is create a new page for the
homepage we want to use, and the blog page. To create a new page,
Click on ‘Add new’ from within the pages tab
Give the page a title, i’ll just use ‘home’ On the right hand side, in the page attributes
section, you’ll need to select ‘page builder’ from the template dropdown
Then click on use the Divi Builder From here you could create a custom page layout,
however what we’ll do is click on ‘load from library’
Click on the ‘Add from library’ tab Check the ‘Replace the existing content
with loaded layout’ box, if you want to replace what’s there
Then select ‘load’, next to the homepage option you want to use. I’m going to create all four pages separately,
and load them in. You could do the same thing if you like, or
just click on ‘load’ next to the layout you want to use. You’ll see that the layout has now imported
If we click on ‘preview’ in the top right, we can preview the page and see that our new
layout is there. It looks good, but we just need to add the
Custom CSS that’s in the CSS folder you just downloaded. This will style the WooCommerce elements,
and newsletter form at the bottom to suit the theme design. Open up the text file and copy all the CSS
code. To add this to our theme, hover over appearance
in the admin menu, and open the ‘customize’ option in a new tab. This is the theme customizer, which we’ll
go through in a lot more detail later. For now, scroll down to the other tab at the
bottom, and within there past in the CSS code from the text file. Select ‘Save & Publish’
We’ll go back to our homepage and hit preview again. And, that looks all good. If we go back, we can then publish the page. I’ll give you a quick overview of the how
the builder works. There are two ways to use the page builder. The first is via the back end editor which
is the view you’re seeing here. The outermost element, represents the section,
so in this case the purple tab, and blue tabs represent sections. Within that are the rows within that section,
denoted by the green section, and the modules sit within the row. The purple section at the top, is a full width
section, therefore has only one row, and features a full width header module within that, which
is what we use to create our header image, text and CTA button at the top. You can edit each section, row, and module,
by clicking on the ‘edit settings’ button, which is the three lines here. Within there, you’ll see all the available
options for that section, row, or module. You also have the option to duplicate any
module, row, or section, by clicking on the duplicate option here. You can click and drag on any element to change
its positioning. To delete an element, click on the ‘x’
to the right of the element you want to delete. Within the row tab options, you can easily
change the column structure, by clicking on the ‘change structure’ option here, and
selecting you prefered column layout. To save a section to your Divi library, click
on the edit settings, then choose the ‘save, and add to library’ option. Give the section, row, or module a name, you
can opt to make this a global element or not. Selecting an element as a global element,
allows you to use it on multiple pages, and if you change it on one page, it updates,
in all areas where it is used. You can opt to add it to a category, then
select ‘save and add to library’. The other way to use the Divi Builder is via
the visual builder which you can access, by clicking on the ‘Use visual builder’ button
here. That will take you to the front view. From here you’ll be able to click into section,
row, or modules and amend the settings directly from the front end. This makes amending text, adding additional
space or padding, and updating images, really easy. Rather than me go through every aspect of
the Divi Builder with you, the team at Elegant themes have put together a comprehensive video
and documentation series, that you can access from the members area, under the downloads
tab, by scrolling down and clicking on ‘view all tutorials’ for the Divi Builder. That will take you to this page, where you’ll
find everything you need to update existing layouts, or create incredible layouts of your
own. I’ll create the other 3 homepages and go
through the same process. I’ll click on ‘Add new’ from within
the pages tab Give the page a title, i’ll call this one
‘homeV2’ On the right hand side, i’ll select ‘page
builder’ from the page template dropdown Then click on use the Divi Builder
Click on ‘load from library’ Click on the ‘Add from library’ tab
Check the ‘Replace the existing content with loaded layout’ box
Then select ‘load’, next to version 2. Select preview
And that looks good, I’ll then select publish I’ll skip ahead and upload the other two
versions. The last thing we’ll do is create the blog
page, that we’ll use to display our blog post. If you decided to go with the blog as your
front page option, you won’t need to do this. To create the blog page
I’ll click on ‘Add new’ from within the pages tab
Give the page a title, of ‘blog’ The default page template will be fine for
this one I’ll then select publish
We’ll set this page as our default blog / posts display page shortly Go through the rest of the pages, that were
created when you imported the demo content. You can view the live demo, or the front end
of each page to view what they look like. We’ll go through editing the custom homepages
in a moment. But first, once you’ve decided on the custom
homepage layout you want to use for your store, or if you want to set the shop, or blog page
as your front page, you’ll need to set this as the homepage for your store, as well as
set the blog page for your website. To do this, hover over the settings tab in
the admin menu, and select the reading option. To use a custom homepage layout, 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 as the blog page. Save your changes, if you preview the homepage
of your website, you’ll see that the layout is there, and if we go to the blog page – that’s
all looking good to. If you want to use the shop page as your homepage,
select the shop page as your ‘front page’. Alternatively, if you want to use the blog
as your front page, select ‘your latest posts’ under the front page displays option. Ok, similar 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. We’ll go through the theme customization
settings first, and then I’ll walk you through the parts that are a little more tricky, like
using the WooCommerce shortcodes to display products or categories, and including a contact
form or newsletter signup, as these all use shortcodes or HTML code snippets. I remember being new to this, those were the
things that weren’t overly intuitive to me when I was getting started. Before we go through all the theme’s demo
content, and begin amending products, pages, posts, and deleting the elements you don’t
want to use. 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 the menu you want 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,
or, 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’,
and give it a name (you can call it whatever you like, pick something that makes sense
to you). Below that, is the area where we’ll create
our 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 of the page. If you created a new menu, or wish to update
the 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 click on the view all tab, to view all pages, or search for a specific page
in the last tab. 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 very handy 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. Therefore, i’ll open the menu item, and
because we checked the link target box in the screen options panel above, I can now
check the box to open the link for this menu item 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. And you don’t want ‘categories’ to be
clickable. To do that you’ll add a pound sign as the
link address, and type in categories. Then save the menu item. 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. For my demo site, I want to create 5 top level
navigation options, they are: Home – which is my primary home page. I’ll then add the other home page variations
under those as sub menu items. Next I want
Categories – with all my product categories set as sub-categories underneath that. Then I want
The shop page – which users will click on to take them to the shop page. Next is a link to
The blog – this is where all my posts will be, and will play a big role in my content
marketing, and SEO initiatives. Lastly, I want the users to always be able
to view their cart, so I’ll add The Cart page to the navigation menu – I’ll
change the name for this by clicking into the menu item and changing the name here to
‘View cart’. I’ll make sure this is set as my main menu
down the bottom and select ‘save menu’. I’ll preview that from the front. That looks good – all my menu items are there
as I wanted them. Play around with your main menu structure
to get it how you want. 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. For my footer menu, I’ll add the pages contact,
about, and my account. You may also want to create a new page for
terms of use, or shipping and returns, or an FAQ. You can either use the pre-existing layouts
from the demo, or use the Divi Builder to create the look you want. The Divi Builder comes with an easy to use
accordion module, tabs module, or toggle module, that could be a nice fit for that. I’ll make sure the menu location is set
to footer, select ‘save menu’, and preview how that looks from the front end. And that all looks good. Once again, amend the menu options to create
the navigation you want. You should feel reasonably comfortable with
menus now, let’s move on to the theme customization settings. We can amend the global theme settings via
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 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. I’ll open this in a new tab, and 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 for the theme you’re using, as the theme options
will be different, but the approach should be the same. Alright, the first option we have is the header
options. Within there, you can either choose to show
social icons or not, which will show up over here. We’ll link our social media accounts in
the social networks settings below shortly. The next option is whether you want to show
the search icon in the menu at the top. Next is the option for a sticky menu, this
means that when you scroll down the page, the menu sticks to the top of the page. Within the Olsen theme you can either upload
a logo, or enter in text to use as your logo, we manage the logo in the site identity menu
which we’ll cover off in a moment, but here is where you would select the color, font
size, and letter spacing for the text logo, if you want to go with that option. If you’ve made changes to your site, hit
save and publish to commit your changes. We’ll head back to the main customizer menu. The next option is menus 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. If you make changes remember to save them. Next is site identity, Here, you can modify the site’s title, and
tagline, as well as upload your primary logo, footer logo and site icon. If you don’t want to upload a logo, you
can delete the Olsen logo and use a text logo that will use your site title. To upload a logo however, click on ‘change
image’ or ‘select image’. Either drag and drop your logo into the media
library or select upload file and navigate to your logo file. Once it’s uploaded, it’s good practice
to add an alt text which describes the image, then select choose image. You can amend the logo padding at the top
and bottom (which is effectively the white space above and below your logo). To set a footer logo, follow the same process,
and you can upload a site icon which is the icon that appears in the browser tab when
someone is on your online store. This should be at least 512px x 512px. Remember to save changes and we’ll head
back to the main menu. Next we have Layout Options Here you can modify the blog layout, or homepage
layout if you’ve chosen to use the blog as your front page. On the live demo site, under the blog layouts
menu option, you will see the various layout options that come with the olsen theme such
as the classic two sidebars, or the more minimalistic full width options. Pick the layout that best suits you, for either
your blog or homepage. Once you’ve picked the layout you want to
use, select it from the dropdown list in the blog layout section of the theme customizer. In the next section, you can choose a different
layout option for category and tag archive pages. As well as other pages on your website. At the bottom, you can set your post summary
length on you blog or homepage, and archive pages. As well as you pagination link style. Next is the Front Page Carousel options At the start of this tutorial, we mentioned
that there were 3 ways to approach the design for your homepage. If you want to use the blog as your front
page, as it appears here, you’ll have to enable the front page slider or carousel,
which is controlled here. You can toggle the slider on or off, along
with the auto slide feature. Below that you select the slider source:
you can choose to show just a specific category, or
Or you could create a comma separated list of the post IDs for the posts you want to
include in the slider. To find the post ID, from your dashboard hover
over ‘posts’ in the admin menu and select ‘All posts’. From there simple hover over the post name
and in the bottom left corner you will see the permalink to the post, included within
the link will be “post=number”, that number is the post ID. By checking ‘Show recent posts’, the source
for the slider will be the most recent published posts. The limit posts field is where you limit the
number of posts shown in the slider. You can select a slide change effect, and
below that, set the amount of time between slides. It defaults to 3000 milliseconds which is
3 seconds to change this to 5 seconds you would amend this to 5000. By checking the ‘Hide post content’ box,
the post content will be remove. We’ll go through how to add these call to
action or CTA boxes that are featured on the live demo when we go through widgets. Alright, save your changes and head back to
the main customizer menu. Next is Typography, 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’ll do it. We’ll head back Content Colors Next we have Content Colors, If you want to
incorporate your brand color or change the color scheme this is where you’ll do that. In here you can amend the background Color
by clicking on the select color toggle and either picking a color or entering the hexadecimal
color code. You could also upload a background image or
texture by clicking on select image, uploading it to the media library, selecting the image
and hitting ‘choose image’. Below that there are some image options to
help improve your design. To remove an image, click on ‘remove’. In the same way as we did with the background
color, you can amend the: Text color
Headings color Link color
Link hover color – so the color the link changes to when the user hovers over it
The Accent Color, and The default border color Once again, save changes and let’s head
back to the main customizer menu. Next is Sidebar Colors Similarly, in this tab you can modify the
colors of the various sidebar elements the same way we did in the content colors panel. I’ll leave that up to you to experiment
with. Next we have Widgets Footer sidebar, and theWidgets 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 theme 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, the Olsen theme currently
features five widget areas: The blog sidebar
The blog-left Pages Front page inset widget The blog sidebar is the primary sidebar and
appears on all posts & pages that have a sidebar enabled. 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 or front page of your
site and decide which widgets you want to keep and which ones you want to ge rid of. 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 on delete. To add a new widget, drag the widget from
the left and drop it into the widget area. There are a number of widgets that you should
explore and get familiar with. I recommend adding them to your sidebar and
deciding which ones make sense for your website. To learn more about the standard WordPress
widgets, you can view the documentation under the help option at the top. There are also a number of theme specific
widgets, such as The Theme – about me widget which allows you
to insert an image, message and upload a signature sign off,
Customized Social Icons widget – this allows you to incorporate links to your social accounts. Call to action boxes which we’ll cover off
shortly As well as the ability to feature random posts,
videos, music and more. And there is also the newsletter widget that
allows you to embed an newsletter signup form. The most common provider is likely mailchimp
so i’ll show you how to add the code from mailchimp, and remove the default MailChimp
styling to match the Olsen theme styling. We’ll cover this off in the next section We’ve taken a look at the main sidebar widget
area. You’ll manage the other widget areas the
same way, these include: The Blog – left area which will be display
when one of the two-sided layouts are selected. Pages which allows you to customize the sidebar
that displays on the static pages of your site. The Footer sidebar – is the area at the bottom
of the page above the footer menu and logo – this is where we add the instagram slider
at the bottom. Simply add your instagram username to pull
in your feed and amend the settings to suit you. The Frontpage inset widgets – is how you add
the custom image links with text overlays to your blog or home page. In the demo, these are the one i’m referring
to here. You do this by adding the ‘Theme – call
to action box’ widget to the widget area. It will automatically size the boxes or images
to either fit in one, two or three columns, depending on the number of widgets you add. You can add as many as you like in the three
column format. From within the widget, you can customize
the the text, the image, and the link address. Ok so that’s pretty much how widgets work. Let’s head back to the customizer. Up next is Social Networks Here you can add the URLs to your various
social network accounts that are supported by this theme. These will appear in the header, and footer,
plus you can also display them in the post/page sidebar by adding the Theme – Social Icons
widget to the blog or page sidebar. Next is the Posts Options Here you can toggle various aspects of single
posts on or off, for example you could hide the category, date or comments, etc. If you make any changes, hit save and publish
and head back to the main customizer menu. Next is the Pages Options This tab allows you to toggle on or off the
appearance of the signature and social sharing buttons on pages. Up next is the Footer Options Here you can customize the theme’s footer
by changing its color scheme and toggling on and off the tagline, social icons and the
WP instagram slideshow, as well as amend the transition speed. Next is the Static Front Page 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, we have the Other tab
This is where you add custom CSS, as well your Google Analytics ID if you want to do
that. If you downloaded the tutorial assets before
from the OHKLYN website, and haven’t yet added the CSS code to your website. Then navigate to the CSS folder, open up the
text file, and copy all the CSS code. Then paste it into this section here, and
select save and publish. Ok, you should be relatively comfortable now
with the theme customer. The best way to get great at this stuff is
to jump in and play around with the various settings to see what works for your design. 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 i don’t want to use. 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:
Integrating a newsletter signup form – for this we’ll use MailChimp,
We’ll then look at how we use WooCommerce shortcodes to display products and categories,
and lastly Configuring Contact Form 7 to include a contact
form on your site. The first thing we’ll tackle together is
the newsletter, signup option. If you don’t want to include one, you can
just remove the newsletter signup widget from the sidebar, and delete the section from within
your custom homepage layout, and move on to the next step. MailChimp is great, because from there, using
a tool like Zappier, of IFTTT, you can send the email information anywhere, like to your
CRM, or wherever. 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. Firstly we’ll update the widget, that’s
featured in the sidebar. To do this, navigate to widgets under the
appearance tab in the admin menu. Find the ‘Theme – Newsletter’ widget that
allows you to embed a newsletter signup form, and add it to the sidebar widget area, if
it isn’t there already. Either login to your mailchimp account, or
create a new one. Once you’re there, create the list as usual
(if you don’t know how to do this, and would like a tutorial, comment below and if there’s
enough interest we’ll put a tutorial together). Navigate to the signup forms section within
the list, and select ‘Embedded forms’. Then choose the super slim option. You will leave the default settings as is,
all you need to amend is the text that you want above the signup form. On the Olsen demo it’s the text that says
Enter your email address to subscribe to this blog and receive notifications of new posts
by email. Change this to suit your style and enter it
into the form title field. Then copy the code below. Navigate back to the newsletter widget and
paste the code into the Newsletter Form HTML section. Save that and head to the front of your site. You should see that the newsletter form is
there, but the styling doesn’t match the theme. This is because mailchimp applies its own
CSS to the form. To match the styling, go back into the newsletter
widget and scroll up within the code to the very top where you see. Once we’ve got that selected we’ll delete
that bit of code. Save it and head to the front of your site. You’ll see that the styling looks similar
but we need to add some space between the email input section and the subscribe section. If you downloaded the JSON files and CSS from
the OHKLYN site, and added the CSS code into the theme customizer, it should look fine,
and you won’t need to do this step. To create the space we want, I’ll right
click on the element to inspect the code – although this looks confusing at first, if you take
our CSS course this will all make sense. What we’re doing is looking for the selector
so that we can add some margin (or space) to the top of both the email input field which
has the selector of input[type=”email”] and the subscribe button which has the selector
of input[type=”submit”], I will add some test css in via the browser to make sure this
is right and select the amount of margin I want to add – in this case 15px. You can change this amount if you like. Once i’m happy with how it looks i’ll
go and add the code to the form in the backend within the Newsletter HTML section, just above
where it says Add your own MailChimp form style overrides. I’ll add the code for your reference on
the OHKLYN post here, which you can find the link to in the description box below. We’ll copy the code and paste it in here. Once we’ve done that we’ll hit save. Take a look at the front end of the site – and
that should all be looking good. Let’s now amend the newsletter signup form
on the homepage. If you don’t want to include one, simply
delete the section. You’ll notice, we have a title and message
in there which you can amend via the Divi Builder. So all we need is the actual newsletter email
input field and submit button. To get that, we’ll go back to our MailChimp
account, and within the super slim embed form, We’ll deselect the ‘include form title’
option. We’ll then copy the html code below. Navigate back to our homepage, and scroll
down to the bottom where the newletter code module is and click edit. We’ll then paste our code in here. Select save and preview the page. If you copied the CSS from the file we provided
into the custom CSS section, that should all look good
So, we’ll go back and select update. Test your newsletter signup forms to make
sure they’re working correctly. The next thing we need to take a look at 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, it’s
featuring the most recent arrivals for the ‘womens’ category, and the sales items
below that. If I go to the page builder, you’ll see
that this is being set via a WooCommerce shortcode. The women’s recent arrivals section is using
the ‘product category’ shortcode, which, if I navigate to the WooCommerce documentation
is this one here. This shows a number of products from a specific
category. 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,
the order, either ascending or descending, and
The specific category you want to feature 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. And products which are also set to show 4
products per page, which we could change to however many you like, to suit your design. Similarly, to feature a different category,
you would just enter the category slug you want to use. 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 a code module,
and paste in the shortcode you want to use, with the required changes. Or, duplicate an existing section or row,
drag it into place, and update the shortcode. It’s important to note, that anywhere you
use shortcodes within the divi builder, you will need to assign the class of ‘woocomerceShortcodes’
in camel case within the section or row. As this makes sure the product styling aligns
with the rest of the theme. This is done by the CSS we added to the custom
CSS area in the prior step. Therefore I would recommend, either duplicating
this section, if you want to create additional product features, or duplicate the rows within
this section to feature more categories, etc. 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. 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, and all we need to do is copy what’s called the short
code which is this thing here, and navigate to the page that we want the contact form
on – which is this case is the contact page. We’ll go the text editor tab and paste in
the shortcode, where we want the form to go. If we preview the 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 field 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 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 these 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 item, 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.. (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. Once we’ve customixed our form input fields
we then need to amend what gets received via email once someone submits the form. If you click into the mail tab, you can set
the email where the contact form is submitted to. The from email pulls the name form the contact
form, you can leave your email, put a generic email like [email protected], or use
the custom [your-email] field from the previous page to pull in the email from the contact
form. You can tailor the subject line to be something
like Blog enquiry (or something that makes sense to you). Additional headers you can leave as is. And in the message body you want to include
the label or placeholder and the dynamic form field so that this information gets sent to
your email. So in our case, we’ll delete subject, and
add phone, the dynamic fields are listed above. And InterestedIn. We can leave the message tab, and additional
settings as is. Let’s hit save. We’ll refresh the contact page. Complete the form and hit submit. That’s all working well. Remember to check the designated recipient
email address to confirm the information is coming through as expected. And that completes our How to make an online
store tutorial for 2017 & 2018. We hope you’ve learnt a lot from our WordPress
eCommerce tutorial, and feel confident to put together an online store using WordPress
and WooCommerce. Remember that you’ve got premium support
with CSSIgniter, as well as access to their support forums. Similarly, you also get access to support
with Bluehost, and premium support included with WP Engine, if you need one-on-one help. If you liked this video hit the like button,
and remember to subscribe to our YouTube channel for more videos related to eCommerce, blogging,
digital marketing and how to run a successful website. To get access to exclusive discounts, free
tutorials, and to stay in the loop on the latest happenings, sign up for our newsletter
at OHKLYN o-h-k-l-y-n.com, and until next time, happy building.

5 Comments

Add a Comment

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