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-ncom/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 coursesOHKLYN o-h-k-l-y-ncom 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-ncom 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 couk, 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-ncom/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 examplecom, i’ll enter examplecom/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 Olsenzip 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 coursesOHKLYN o-h-k-l-y-ncom 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 ‘olsenShopPagesjson’ 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 coursesOHKLYN

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 <link href="//cdn…etc we’re going to select that piece of code all the way down untilrel="stylesheet" type="text/css"> 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 enquiry@yourdomaincom, 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-ncom, and until next time, happy building

Free Email Updates
We respect your privacy.

wordpress plugins for membership sites

affiliate marketing