Divi theme eCommerce tutorial – Add a simple product

Articles, Blog

Divi theme eCommerce tutorial – Add a simple product

Divi theme eCommerce tutorial – Add a simple product


hi guys and welcome to another Divi
theme ecommerce website build video this is Jamie from system 22 and web designer
tech tips comm in this series of videos we’re gonna be building an online
e-commerce store with the fantastic Divi theme from elegant things if you don’t
have it you can download it from a link below this video it is a premium theme
but it’s absolutely awesome you can use my affiliate link below or you can go
straight to elegant themes comm and get it from there so in our last video we
put this together we put our logo in and did our navbar quickly of course this is
all going to change once we get our menus updated and we built this little
slider here so in this video let’s go ahead and add some products because we
added the WooCommerce plug-in last time which will enable us to do that I just
want to do a couple of tweaks to this slider just yes let’s go to the
dashboard and I’m gonna just quickly make a couple
of tweaks to that slider there so if we go to pages I could do this with the
visual builder but I’m gonna do it this way I’ve been using Divi for a long time
and I’m quite used to doing it this way before the visual builder was as good as
it is now so I’m just going to tweak this okay what I want to do let’s look here
done it in this one I want to put all the lines like this because so they’re
not quite so long so I’ve done it in that one I just want
to do it in that one it’s going to hit return actually hit
shift return so it’ll only do it by one line if you hit return it gives it an
extra space when you’re dealing with wordpress for some reason and on this
one also and say say that
Update let’s have a look what’s going on here you you you proving your change well I’ve done I’ve
just put those one under each other they were stretching out across here and this
blue riding was kind of hard to see when it was over the image on the right hand
side there so that’s fine let’s get on with our main objective today which is
adding some products so if we go back to our dashboard here under our WooCommerce
tab you’ll see products let’s go down and hit add new okay and the name of the product I’m
gonna add let’s add some shoes of some sort okay
sick fashion shoes because I know nothing about shoes I’m afraid so let’s
add some media and I’ve got a nice picture of shoes
shoes here and as you can see it’s 400 by 400 again
you can put anything you like in your alt text here some keywords or something
about your your shoes I’m not gonna do that for expediency reasons here
and that adds our little image right there and we can add some text like any
other thing here so I’m just gonna copy our title right in fashion shoe and I’m
gonna use some lorem ipsum which is a epson comm for just some dummy text that
I can add in there because I don’t have a description to put in
you I’ll just grab a little bit much can you say about shoes I guess it
depends who you are so let’s add this text here and what I’m gonna do is click
on my image left click and I’m gonna line it to left so that the
writing is to the right hand side of it I’m gonna make that fashion shoes a
title let’s make it heading to it’s nice and big now we always want to start off with a
simple product even if you’ve got multiple products in various different
colors and sizes start off with a simple then you can add attributes to make it a
multi we’ll cover that perhaps in a few videos from now now we want to put in a
price for these shoes and if you look underneath there’s a little thing for
sale price so you can reduce items and it’ll show them as being on sale in your
site we’ll do that in a little while as well the next tab is inventory now here
you can give it an SKU which is a unique number if you want to manage the stop
say you’ve got thirty five pairs in click this button and that way when
thirty five pairs are ordered it will no longer be available and if you’ve got
something that it’s coming in stock later here you can say whether it’s in
stock add a stop on back order now sold individually if you only want each
customer to be able to buy one of something I’m not quite sure why you’d
want that but if you do want that this is what you want to check in this little
box here now underneath we’ve got a little box for a short description and
that’s kind of a bit like a meta tag so I’ll just put a short little bit of text
in there don’t need too much we got the main description here and over on the right hand side we want
to give it an image because when we’re displaying it on our site this product
image is what’s going to display so I’m going to use exactly the same image so we’ve got that there product tags
this is where you put in keywords relating to your product shoes red shoe
dancing shoes fashion shoes whatever you feel is is appropriate for these shoes
and also keywords that might help them to be found in a search engine as well
you can add those tags in there I’m not going to adding it added me at
the vote there’s no point for me now for categories we need some categories so
let’s create a category I’m going to add a new one I’m just going to call it
shoes you and we don’t need a parent category we
could have shoes we could as a parent category and then there’s a child
category we could have red shoes dancing shoes evening shoes or whatever types of
different shoes you’ve got there so there we have it we’ve actually created
our first product here let’s just publish that
you and we’ll have a little look so I’m
going to hit the preview changes button so here’s the actual item page and as
you can see it’s got that nice little image there it’s got our price it’s got
the option to add it to the cart or add however many payers of these things that
you want and later on I’ll show you how you can say select one pair in red and
size six or something like that but we’ll do that a little later on and also
we’ll customize our page a bit and decide what we want to have on our
product page here and here’s that little description that
we had there’s a little short description up
there so there’s our first product what I’m going to do is I’m going to pause
and I’m going to add two or three more products exactly the same thing okay so I’ve added three products now
I’ll just show you what I’ve done it’s pretty simple method if we go to the
products tab you’ll see I’ve got three here and cause
they’re similar products what I’m actually doing is I’m going down to
duplicate and I’ll duplicate this fashion shoes one here and I’m just changing a few things on it
to update that when you’ve got a lot of products if you’ve got things that are
similar it’s a good way of doing things of course if you’ve got very individual
products with all different descriptions then you’ll need to do things
individually you and with this last one we’ll change that product image there
let’s give it a price let’s with this one let’s put it on sale and when I show
you this in a moment you’ll see what that sale button does you
you okay so if we go to our all products
page here we could just go the products tab does the same thing you can see what
we’ve got here not one I just put on sale you see it’s got a line through it
in $34.99 and it looks like I’ve got to add these to certain categories here
I’ve got two months same price so let’s just do a quick edit and mark this one as 24 line just look at my category showing out so
let’s have a look yeah for everything checked up here sometimes things to
shove have you not got unchecked out there let’s go ahead and edit the actual
one well let’s go down to calories and make sure I have got a category I
thought I created one called shoes I guess not I think I put it in there and probably did not save it there we are
we’ve now got this category so if we go back to our products now we
should be able to add these to that category
if let’s just hit the quick edit there we go
but uncheck their own categorize and check the shoes one do the same thing
for the next four update on the right hand side saying for this one you you now you can have later on we’ll add
categories like sale items and closeout stuff like that and you can add them to
multiple categories but we’re just gonna do this simple product for the time
being so we’re happy with that let’s update that
all right so now we’ve got a little category of four shoes here let’s have a
look see what we can do with them by putting them on our site so if we go to
our page you our home page is the one we want to work
on you you you can get rid of that
so what we’ve got at the moment is a full-width slider and a bottom bar for a
bit of fun let’s do with this with the visual builder I’m just gonna add a shop
module here so we can show off our shoes but it’s probably not gonna stay there
let’s just update that let’s go to the live site you you so what we’ve got here we’ve got our
slider and we’ve got this bottom bar we’ll get rid of that bottom bar in a
little while and we’ll put our own in there so let’s enable our visual builder you start building please read that if you
want to it just tells you how to do a few things and what I want to do is add a module so
I’m going to hit the plus sign here and it’s a regular module think we would
just make it one for the time being now where’s this shop module there we go click on the shop module and
let’s have a looksie product count I’m gonna make it four because that’s all
we’ve got at the moment columns make that four as well I could
make it too but I think we’re used for for time being product category is what we want
there’s our shoes so let’s select our shoe let’s give it a color overlay I’m
putting that color well I know I’ll reuse the icon well the
user icon color I make 10 ca ca which is a car we’ve been using and hover over Lake hello I’m gonna do
the same thing for but I’m gonna make bring the opacity up that’s the same blue but I’m gonna make
it a little more see-through so you play with this have what you like and you
want to add a little icon so that you can have a look at the image let’s use
that little spyglass and you see we’ve got a sale by Johnny
that was that one that we made for sale see give it a custom color let’s make it red
that always looks good for sale laughter my clash without blue blue
though let’s have a look at that see when I hover over it it’s got that
blue and it’s got that blue thing now let’s make this background here
let’s give it that blue color as well as I say we can change all this as at a
later date this is just to demonstrate how quickly and easy it is to add these
products with the Divi theme here there we go
save that and of course we can customize our
prices as well so I think when we’re hovering over this
you can’t really see that little spyglass thing there so
you edit that you not over lay down here overall a icon
hover overlay color so I’m gonna make it white
say that it stands out a bit better as the white
there you what if we were to give these images a little more
decoration here let’s Lucy rounded corners if you want to border styles let’s give it a little box shot
something like that there we go that makes it stand out just
a little bit more very cool position let’s take that there
we go you so I’m happy with that now the text I really don’t want shadow on there
it was kind of weird so let’s have a looksie title text let’s make it white I want to make it a bit bigger it’s a little too big
24 and we want to keep this fairly common for for all of our items here I
actually want to put it in the middle so that’s aligned it to the center there
lettuce spacings fine um you know you can get some lovely effects by spreading
things out like this but I think for our purposes for my purposes here that’s
absolutely fine line height is no need because there’s really nothing
underneath it uh I guess we could try with shadow you yeah that’s okay
you I’ll leave it on that one there and
obviously you don’t need anything well you’ve got all these things to choose
from here shadow color I’m going to leave that the
font say price text again I think I’m gonna have it white might have it bold certainly gonna have it
Center like a little logic in and you look over here on our sail light
in here which is great you’ve got the original price crossed out like that you
and again I’ll use the same text shadow on that that makes it nice and sharp and I don’t believe I want
shadow wipe resume animation will do animation at the end we’ll go through
the site there so I’m pleased with that
for the time being let’s save our changes exit the Divi builder or exit the visual bill or I should say and that’s what we’ve got we just added
some simple products to our site here what I’m gonna do is I’m gonna put a
menu bar in between this a sticky menu between this and the products and this
was just a simple demonstration of how to add a simple product we’ll do
multiple variable products later on while we’re building our site so now
we’ll do for this video I hope you found that useful
that’s how to add a simple product to your Divi elegant theme online shop or
ecommerce store whatever you want to call it so I hope you’ve enjoyed that if
you have please like and share the video if you’re interested in web design
please take one of our web design courses below we’ve got some huge
discounts for our YouTube subscribers and there’s some great free courses down
there also once again this has been Jamie from system 22 and web design and
tech tips comm thanks for watching have a great day

One thought on Divi theme eCommerce tutorial – Add a simple product

  1. Great stuff thanks again Jamie – I bought a WooCommerce theme for Divi but a few plugins were out of date and the whole experience of using it was less than perfect. I didn't like the fact it was reliant on so many plugins that obviously needed constantly updating so I only ever built it on a MAMP install. This is great so far as it's pure Divi and WooCommerce. Question would it only need the customers PayPal account details to be a live e-commerce site.

Leave a Reply

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