How to Create An Online Store With WordPress In 2019 (FAST & EASY)
Articles,  Blog

How to Create An Online Store With WordPress In 2019 (FAST & EASY)


If you’re looking to create a WordPress
online store fast and easy this guide is for you. I promise, it is a lot easier than you might
think and there’s never been a better time to build a shop with the world’s most popular web platforms: WordPress and WooCommerce. So let’s take a look at what you will create
if you are going to follow all the steps in this tutorial. (lower third & website preview) Even if this is a clothing shop, once you
build it, you can adapt it for any type of business. You just need to change the products
and visuals. The best part is that you don’t need to
pay a designer or a developer. Everything you see is made using only free
resources and you can find the download links in the description box. Before we start, let’s go over everything
that you can expect in this tutorial. Remember that you can jump right to your preferred
section of this video using the timestamp in the description box. We will start by choosing a catchy domain
name. Then we will set up WordPress and WooCommerce
and in the end, you will see how to customize the design of the shop. Here are some more highlights: You will learn how to manage your inventory
and how to set up different payment methods… how to add variations to products like
different colors and sizes. and how to create the About Us page, the
Contact page, the menu and each section on the front page? If you like the awesome visuals I use, like
these banners, I will show you how to add them. More of that, I will show you how to
create this section which contains a youtube video you can use to show real people using
your product. This is a tutorial I have been working for
some time and is going to be longer than usual. Let me know in the comment do you like short
videos or longer in-depth video-tutorials? Ready? Let’s get started! Your domain name is how your customers find
your website. If they hear about you somewhere, will it
be easy for them to remember your name? Even if you already have a name or you are
looking to generate an original one, you still need it to be available.
So try using a tool like DomainWheel. The combinatorial algorithms will present
interesting new options to choose from, while the domain availability checks up will suggest
available extensions. I will try a phrase, something like “online
clothing shelf”. Let’s see if there is something available…
Fortunately, it is so I will buy the onlineclothingshelf.com domain right now. Now that you have a domain name idea let’s
go buy the domain name and hosting. If you already have a hosting service, like I do,
you can buy the domain name only. If not, you can select a host for your site
that offers a package designed for WordPress: domain name + hosting.
I encourage you to check the article on our blog to read about some of the best hosting
providers for WordPress. Link in the description. The most important part in choosing a hosting
provider is that you need an SSL certificate. Without one, you cannot set up the payment
methods. Usually, you can get an SSL certificate for free, and you can check the video on the
card on this topic. This is why I suggest Siteground.com, but
you are free to use any hosting company you want, just make sure it is optimized for WordPress. By using SiteGround as your hosting provider,
or any other service that uses Let’s Encrypt, a free security software in the cPanel, you
can install a free SSL certificate in just a few clicks… Once you get the domain name + hosting and
a free SSL certificate, let’s go to the next step which will be to set up WordPress. Most of the popular hosting companies have
an easy flow to install WordPress. To do that, go to your cPanel and search for
the quick installer of WordPress. You can find it easily because it is one of the auto
installers every cPanel comes with by default. Once you click on it you will be redirected
to the installer page where you should click on the “Install” tab. Choose the protocol as HTTPS from the dropdown
menu and then choose the domain you want WordPress to be installed on. Leave the In Directory field blank unless
you want WordPress to be installed on a subdomain, something that will look like onlineclothingshelf.com/blog. Further down you need to choose a name for
your online store and a description. Don’t worry if you have no idea of what to type
in here for now because you can change that later on. Now, fill out these fields with your account
details like the username and the password. Make sure you use uppercase letters, numbers
and special character to make it as secure as possible. The email you type in here should
be the email you are using to manage the website. Further down, choose the language of your
online store in this drop-down if needed or leave it as it is by default – English. If
you want to change that language, you can do that later on your dashboard. Finally, check if you want to use Limit Login
Attempts, which I recommend you to do, and Contact Form by WP Forms Lite. If you check
both boxes then the auto installer will install those plugins on your dashboard. Further down, setting a custom name for your
database with a maximum of 7 characters and then a custom table prefix it’s strongly recommended. Finally, leave the backup location as it is
by default and then click on Install. Wait until WordPress will finish its installation.
It will take just a few seconds. Once the installation process occurs, click on this
link if you want to go to your dashboard or this link if you want to see your live site. For now, it looks like any other installation
of WordPress on a new website, but in the next minutes, you will see how to transform
this into an awesome online store. Your theme decides the entire layout and feel
of your site. Finding a great theme that invites browsers
to become buyers is worth taking a little extra time. ShopIsle is a powerful WordPress theme because
it is clean and clearly features products in a way that scores engagement.
A grid of large pictures, with core information below, encourages customers to quickly browse
and click on what interests them. Installing this theme on your WordPress website
it’s easy. On the dashboard, click Themes in the Appearance
menu, then click on Add New and search for the ShopIsle WordPress Theme.
Install and activate it then move to the next step. There are some extra features you can get
to make your website really awesome. You will need to install OrbitFox. A modular, multipurpose plugin that will help
to detect breaking changes in theme updates before you run them. Being an online store, you will use a lot
of images, so an Image Optimization and CDN service are helpful. Orbit Fox comes with
an integrated free CDN. It also automatically optimizes the images on your website, serving
them under a browser-friendly format! Also, if you are worried your website will
go down, try the Uptime Monitor to get notified via email. As soon as you enter your email
and hit save, your site will be registered to our uptime monitor and we’ll constantly
check if it’s working. I will show you other useful features this
plugin comes with, in a minute, so keep watching. Installing the WooCommerce plugin will transform
your WordPress website into an online store. Once you activate it, I recommend you run
the setup wizard until you’ll get to the point where you can publish your first product. First, choose the country where our store
is based, US in this case. The address, clothing street 44, New York
City and so on… If the currency you accept payments in is
the US dollar, leave it as it is, or choose other currencies in the drop-down. I plan to sell physical products, clothing
items right? So, I will choose the second option in this
drop-down and then I will click Let’s go! Here comes the tricky part of the payment
integration. I want you to understand that if you choose
to accept debit and credit card payments with Stripe, all the payments will be processed
on your website compared with PayPal where all the payments will be processed on their
own server. If you have doubts about how safe is your
website you should definitely go with PayPal and deactivate Stripe.
Stripe, on the other hand, offers a much faster checkout process.
Your choice! PayPal payments without linking your account
will work only if you check this box and then you’ll type your PayPal email in this field. Furthermore, if you want to accept Check Payments,
Bank Transfer and Cash On Delivery, you can activate any of these options here. Ready to go to the next step?
Click on “Continue”. You’re all set up to ship anywhere in the
United States, and outside of it. WooCommerce recommends using the Live Rates so we leave
those options as they are in the drop-down menus and we are going to set the weight and
dimensions of the unit… Once the shipping settings are done, click
on Continue. I like to have the Automated Taxes calculation
on so I will leave this checked and then I click on continue one more time. A variable product can be a t-shirt, for example,
which has different sizes and colors, and if you want to set different images and even
different prices for each variant, keep watching cause I’ll show how to publish your first
product step by step. As you may notice at the beginning of this
video, the demo of the final website shows a Tshirt, a Hat, a pair of sports Shoes and
Leggings in the “Latest Products” section. To create the first product, Click on the
Add New link in the Products menu or +New Product in the drop-down menu of your admin
bar. First of all, we need to add a name to our
product. I think the “Premium Yoga T-shirt” will be
perfect. When adding products to WooCommerce for the
first time, you will see that the plugin comes with clear instructions to make sure you understand
every step, so you can follow the steps by clicking next. The text in the editor should be an in-depth
description of your product, that needs to contain, as much as possible, details like
gender, style, material, season and so on. For example, you can say “This Yoga T-shirt
is as close to perfect as can be. It’s optimized for all types of print and will quickly become
your favorite T-shirt.” After that, you can say that the gender is
“for women”, the occasion is for Yoga, the material is synthetic and the season is summer.
These are just examples but you can write in here whatever you consider useful. For
example, you can show the available sizes, the weight, and package contents if needed
and then you can close de description of your product with a strong phrase, something like.
“Soft, comfortable and durable, this is a definite must-own product.” Next, you need to set the product type in
the product data drop-down. If your product will have different variables like colors
and sizes, as I mentioned earlier, you should choose the Variable Product type. Before clicking next, we need to add some
variations but the first step actually is to add the attributes that variations will
use. To do that, click on the Attributes tab then
click to add a custom product attribute. Name your first attribute, “Size” in our case,
check both boxes below the name and then add the values like so, M | L | XL Type this “|” vertical bar between those values
and then click on “Save Attributes”. You can find that vertical bar on the right side of
your keyboard for both Mac or Windows PC. Next, we will add another custom product attribute
which will be the “Color” selector. The values I choose are white | blue | red
but you can add as many colors as your product has. Just remember to insert the vertical
bar between them, like so… Click on save Attributes then go to the Variations
tab. If you want to control the price and images
of your variable products individually, choose “create variations from all attributes” in
the drop-down then click Go. Click OK on the notification and wait until
the process is done. Now you can see 9 different combinations of
your product, which you can use to set a different image and price for each. I will set the same price for each variation
but if you have a different price for the blue t-shirt, for example, you can define
that here… Remember that variations with this field empty
will be considered as an unavailable product – out of stock for example. Now you can continue adding different images
for each color variations. A white t-shirt here…
a blue t-shirt here… and a red t-shirt here… You will understand why we are doing this
when I will preview the first product, so stay with me because it gets more and more
interesting. Once variations are added, make sure you write
a short description of your product below. You can copy the first two sentences from
the text editor above, it’s absolutely fine, then you need to add images into the Product
Image and Product Gallery sections. To do that, click on “set product image” here
and upload the image you want to see first on the product page. I will choose the red
t-shirt, for example. Click on “set product image” on the right
side of your screen and then add more images to your Product Gallery, including the red
t-shirt. Once you finish adding images to your product,
go ahead and set the product category and tags… If you have a huge inventory you may want
to manage the number of products. To do that, click on this tab and use stock-keeping units
then enable the stock management. Here, you can set the stock quantity and then choose
if you are willing to allow backorders for the “out of stock” products. Once you finish the settings you can publish
your first product. Let’s check our work so far… This is how your first product will look like
after adding all the elements mentioned before. Images, gallery, description and here is how
the product variations work. If you choose the blue color, for example, you can see that
the image will jump automatically to the blue t-shirt. Now you can add as many products as you want
following the same instructions. After you finish adding those products you can go to
the next step. Like many online stores, you are able to set
up cross-sell, up-sell, promotions, and product reviews. I have created four different products already
and now I will show you how to link those products so you can make upsells and cross-sells. Click on “Linked Products” here and then type
in “cap” or the first three characters of your product name. The product you set here
will be the “you may also like” product on that product page. Furthermore, if you want to make some cross-sales
too, I mean to sell even more products on check-out, set the product you want to sell
here then hit the update button. Now, if you want to give away coupons with
$10 discount, for example, head to the “Coupons” section on your WooCommerce menu. Click on
“add new coupon” and first of all insert the coupon code: 10$OFF. Write a description in
the text box below if you want it, and the go to the coupon data management. Choose the
“fixed cart discount” if you want that coupon to be used at checkout, for example, or “fixed
product discount” if you want to give away fixed product discounts. You can choose “percentage
discount” too but in this case, the coupon code should be something like 10%OFF instead
of 10$OFF. The coupon amount will be 10 in both cases but works differently so I recommend
you choose wisely. Once you have added all the details to your
coupon, click on “Publis”. Let’s see how it works.
I go to the shop page and I add some products to the cart exactly as your clients will do.
A blue cap, ok? a blue L size t-shirt and a pair of blue sports shoe, size 38.
Then I will go to the cart page and I will use the 10$OFF coupon code here. Once you
click “Apply Coupon” you can see that the total amount of the order is minus $10. Let’s see how to make this theme look like
the online store presented at the beginning of this video. Even without paid products, you can implement
the best elements of e-commerce design on all of your most important pages. This theme has a lot of options you can change
through its customizer which you can access by clicking here. Let’s start with the first section – the “Site
Identity”. This is where you can change the site title
and subtitle displayed here. I don’t have a logo for this project yet, so I will change
only the Site Title with Online Clothing Shelf and the Tagline with “how to start an online
store on WordPress step by step”. You can type a slogan here, something like
“dressing with personality” or any other combination of words that can better describe your products
in a short sentence. Publish the changes on finish then move to
the next step. I think this is the fastest section of the
customizer we will walk through. Two option here to change the Header Text Color and the
Background Color. If you want more color schemes I recommend you check out the PRO version. The header image is what you see in the header
area of your pages by default and if you want to change that, just click on Add New Image
here. Upload your own image or choose one from the
Media Library. Select and then crop the image and that’s
it. If you want to use more images randomly, upload
them one by one then click on “randomize uploaded headers”
here. Now you can see that if you toggle through
different pages, the images are used randomly so you won’t have the same image on every
single page. Nice trick! Let’s save the changes and move
to the next element. Before customizing the Frontpage Sections,
we need to go to the Homepage Settings to choose a static page as a Homepage and the
Blog page. If we don’t have them already we can create
pages fast like so… Click on Add New Page link here, name the
page as Home then click on Add. Same with the Blog page. Now, publish the changes and then go back
to your Frontpage Sections. Once you set a static page as your homepage,
you’ll see the default content every section comes with. the Slider Section, the Banners
Section, the Products Section and the Products Slider Section. I will walk you through how to customize them
step by step so stay with me. In the Slider section, we have three slides
by default. You can delete a slide or add more slides as well, like so… In order to
be fully populated with content, a slide should get an image, a title, subtitle, button link
and button label. Adding images smaller than 2000 px here will
generate blurry results so I recommend you upload good quality images. For example, all
the images I use here have full HD resolution and are looking great. After changing the images and other options
in the slides as you want, publish the changes and go back to the Frontpage Sections. The banner section is where you can upload
images with coupons or special discounts and you can feature here a new collection as well.
Just upload the image, set a link to that offer or collection, if needed, then publish
the changes. These sections are populated with products
automatically but if you want to change the category, for example, go to the customizer,
front page sections and change the products category in the drop down. If you have a few
products, leave this as it is by default so visitors can see all your products in these
sections. This is a very important section which you
can use to display a video with clients using your products, for example. It will have a
huge impact on your visitors for sure. What you need to do is to set a title here, insert
a youtube link in the field like so and set a video thumbnail if you want it. Then you
can publish the changes and your video section is done. The footer area, like the header, is what
your visitors will see in the bottom area of your website on any page or post they access.
Here we have four areas which you can use to add any available widgets into. Adding these widgets is easy and there are
two ways of adding them. One is to access the widgets area in the customizer
and the second is to go to the widgets link in the Appearance menu on your dashboard.
The advantage of creating them here is that you can drag the elements from footer area
1 to footer area 2 like so. I will add two images, first.
One image in footer area 1 and another one in the footer area two.
Drag the image widget in the footer area 1 and then upload the image you want to use.
Save the changes and the do the same with footer area 2. Image, upload and save, ok? Then add a product category widget named Category
1 in the footer area 3 and another Product Category widget named category 2 in the footer
area 4. That’s it. If you take a look at the footer area right now you can see that everything
is exactly where it should be. This is a simple notification bar which will
help you inform users about your website policy. To enable it, head to the Orbit Fox plugin
and activate the Policy Notice module. If you don’t have a Privacy Policy page yet,
WordPress helps you create on fast. Go to Privacy in the Settings menu on your dashboard
and click “create new page”. Change the default text in the page with the details of your
choice and then click on publish. After that, you can select that page to be the Policy
Page in this drop-down menu. Customize the Policy Description and the Policy Button label
if you want it and then click on Save on the right side of your screen. The About Us page is something your visitors
can check if they want to know more about your business. The Shopisle theme comes with
custom templates you can use for that and here is what you need to do. Click on New/Page
here and name your page About Us. Choose the About Us Template in the drop-down
menu of your page attributes and then publish the page. Click to view that page and then
on customize on the top bar to open the customizer of that page. Now you can change the details
in the “our team” section, the “video” section and the “our advantages” too. Create one more page named “Contact” and choose
the contact template in the drop-down here. Publish the page and then go to the customizer
and insert a contact form shortcode here, and a map shortcode here. To do that, install the WPForms Lite plugin,
activate it then create a contact form like so. Enter your form name in this field, select
a Simple Contact Form here, and then click Save. After that, click the Embed button,
copy the shortcode and paste it in the contact form shortcode field like so.
Next, install and activate the Intergeo Maps plugin.
Create a new map and drag the location to New York, or choose the location of your business
and then click on Create The Map. Copy its shortcode which you need to paste
into the map shortcode field, like so. That’s it. The contact page is ready so click publish
then move to the next step. You may see a default menu on your homepage
right now, but if you want to create a custom menu instead, check out the recommended video
on the card, or in the description box below. Creating the Main Menu its easy, using your
pages as elements and if you want to add intuitive icons too, make sure you activate the Menu
Icons module in the Orbit Fox Companion interface. After that, your menu will look awesome with
these intuitive icons near the name of each element… Ley’s go back to the customizer and see what
you can do in the WooCommerce section. We have four sections here which allows us
to customize some things. The Store Notice, first.
You can use this notice to warn your visitors about the fact that this is just a demo store
and no orders shall be fulfilled. The Product Catalog is what the shop page
and category will use and the default product sorting uses different sorting options you
can choose in the drop-down. Cropping the product images into a square
can be a good way to have a perfect alignment on the shop page but if you want to have them
cropped into a custom size, you can choose the aspect ratio here. Furthermore, you may want to hide some of
the checkout form fields like the company name, address line 2, and if you want to highlight
the required fields make sure this box is checked. In the end, select two of the most important
pages any e-commerce business should have, the Privacy Policy and the Terms & Conditions
pages. Click on “publish” to save your changes and that’s it. Your online store is done. Now you can start promoting your WordPress
online store and send motivated customers, ready to make a buying decision.
Make sure you activate the Social Sharing module in the Orbit Fox panel so your visitors
can share your products on different Social Media channels. On the screen, you are going to see some other
recommended videos so watch them next to grow your store. Hopefully, this tutorial was helpful.
If it was, give it a thumbs up. Also, consider subscribing.
I publish WordPress tutorials & guides weekly and I answer all the questions you guys leave
in the comment section below.

41 Comments

Leave a Reply

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