in this video I'm gonna be showing you
how you can pimp up your WooCommerce
products and make them look so much
better with Elementor Pro the site I'm
gonna be working on in this video is
swim signs which is one of my Amazon
affiliate ecommerce websites and I mean
the products that come with the theme
look pretty good I mean here's an
example they look you know quite neat
and tidy it's not bad but using
Elementor Pro we can make them look like
this
or in fact however you'd like because
it's really easy to customize pretty
much everything to do with the products
you know where the images sit whether
you want related products all the fonts
and all the layout and pretty much
anything you like and to help you along
there's a whole load of templates that
come with Elementor that you can use to
get you started so as I said we are
gonna be using Elementor Pro it's a pro
feature the ability to be able to edit
commerce pages and elemental pro also
has a whole load of other great features
you can use on pages and posts and loads
of other areas on the site so definitely
worth the investment I'm going to put a
link up in a card now you also find a
link in the description it is an
affiliate link so I really appreciate it
if you use it so anyway let's get on the
computer and I'll show you how it all
works
okay so over at Swim signs which is one
of my Amazon affiliate websites if you'd
like to create a website just like this
I'll put a link up now to the full
length tutorial that will take you
through everything you need to know so
we're gonna be changing the design of
the product layout today so these are
all WooCommerce products why is she
using wasone to import these products
from Amazon but you know if you're using
just you know standard WooCommerce it's
exactly the same process so this is the
kind of default look and you know it's
okay but I think we can make it look
much much nicer so to do this we're
going to be using Elementor pro so you
are gonna need element or installer then
you're gonna need to upgrade to element
or pro lots of themes support element or
in fact most of them do I'm using Astra
theme for this particular site again
you'll find links to everything I talked
about in the description of this video
I've really got Elementor Pro installed
on this site it's real easy to install
you just add it as a plug-in do that in
plugins and add new once you download it
then what you want to do is go in to
templates
what we're gonna do is create a
new templates I'm going to come up here
and click add new type of template is a
single product let's call it the pimped
up product click create template
one of the great features of Elementor
pro is you get loads of templates for
blocks and pages and all sorts of things
so these are the block templates for the
products before at the moment but they
they add new ones all the time and
they're a great starting point when it
comes to you know customizing your
products so the one I'm gonna go for
today is this one now it's my favorite
so I'm just gonna click insert so there
it is looking good I would of course
take you through all of the options in a
few moments but the first thing we need
to set is when the templates going to
show so if we come down here click on
the little arrow I've got this display
conditions section so in here we can
basically set some conditions that
determine where the template is amused
in this particular example I wanted to
show on all the products so I click Add
condition make sure that's set to
include and then just choose products
but you could choose you know in
category and you can choose a category
there or maybe by tag or whatever yeah
it's very flexible but I just want it to
be included on all products let's click
Save and close
that's that done I think it's just saved
it for me but if yours and save make
sure you click update
I'm just gonna go to this other tab and
just go to the front of the site well if
I can't I probably find just so we can
have a look at it on a product while
we're working on it I always like to do
that so any any old product will do I
think for example
so there we are look it's working
already
the first thing I want to sort out is
this picture it's bit stretched and it's
also not showing the other images most
of my products we've got more than one
image and this is just showing the one
so let's change that first so I'm going
to go back to the editing window that
I've got open where I'm just editing the
template and let's have a look at this
column so I'm going to right click Edit
column
let's check the style tab okay so at the
moment
just using like the product image as the
background image so I don't actually
want to do that I'm gonna just remove
that
and what I'm going to do is I'm going to
go into here where we select our widgets
there's loads of great product it
widgets here and we commerce widgets
here you can just drag them over use the
ones that you want this is one I want
the product images so I'm just going to
drag that over
there it is now it's all the way down
there I think that's because this column
let's go back into the column has got a
load of padding as let's reduce that
down to like 20 okay let's click update
still that looks like refresh
there we go looks right in there there's
the other images down arrow we can click
those and nice little slidy thing got
the zoom there I really need to zoom I
guess but it's fine so that's a bit
better wondering if there's member too
much padding at the bottom let's just
even if we need it let's just take the
padding out just see what that looks
like
refresh
um okay that's a lot better but I'm
wondering if maybe we need to lose this
gray this gray color we got there it
doesn't you know it's conflicting a
little bit with the white so let's go
back in and go back to style and we're
gonna go to background and then choose
color and click white click update
again we're just editing the column and
then let's refresh again have a look
there we go I think that looks better
than it looks a bit tidier so that's the
picture sorted out let's have a look
over here I mean I don't mind the font
but you might want it to kind of match
your websites fonts which this is not my
websites font this is my website font up
here so let me show you how you can
adjust this text so the first thing here
is the approach rating then effect I
don't actually want that because my
products don't have any ratings because
I'm added any ratings you know if you're
adding stars whatever that's fine but
I'm not so it's gonna remove that like
that then here is the product title I'm
going to go in to style although I'm
just clicking on it or you can of course
right click to edit stuff and if we take
a look at typography click a little
pencil and you can see that it's set
here the family is play fair display so
I just want it to match my website so
I'm just gonna go right to top and go
default there we go let's click update
and ever quick look to refresh there we
go that looks better
okay let's carry on with the editing go
back in
just wondering if there's maybe a little
bit too much space at the top well you
think there's several hookers edit the
column going to advanced yeah there's
like eighty padding at the top let me
just click the chain to unlink them and
then just reduce this down to maybe
forty
so I look up date and then refresh
yeah I think that looks would be better
okay let's adjust this font as well
so that's this element here which is the
short description and we come a short
description
I'm gonna go to typography here and then
just again go right to top to default
update and we could do the same on the
price as well typography and default
click update this refresh never look now
sped all the all the fonts are now
matching nicely so here's the final
thing we can play around with is this
button let's have a look at that so
again I'm gonna adjust the font is going
to typography choose default
if a bait
looking good so that's looking better
font apart from this bit looks slightly
bigger than this bit the quantity looks
smaller than the natural button
I think that's down to it having a
border so let's remove that border let's
go back in and here actually border type
of solid let's just put that to non
click update
refresh
there we go that
that other thing so I'm really pleased
with that let's scroll down I've got the
description and additional information
here one thing and this is a bit too
stretched I think it might be nice to
have some related products down there
what do you reckon let's do that now
so here we've got what is this product
beta taps okay yeah that's fine
here we go upset
no I don't currently have any upsells on
the site so I could switch this to be
related products and I mean I might as
well remove it because I'm not using
upsells of course if you're using up
sales on WooCommerce you want to keep it
but just take that out so what I want to
do is add another column just down here
so that we can add our related products
there I'm just going to duplicate this
column right click duplicate there we go
now they are a bit close together those
columns I want them to match the ones up
here so you just have a quick look at
the settings on this column go any
column see what's going on
padding here we go look padding and
margin 15 and 50 let's match that also
50 left as well on the padding so 50 50
on the padding and 15 on the margin edit
that hopefully I remember that stuff
as in advanced
top margins finest leave that so it's 15
and it was we need any at the top yeah I
probably should leave that I just click
the chain let's put this 250 on the
right no I don't if I can type will we
find there we go yeah we go then I guess
this one
let's check this ones things
that was got 80 and 80 and 15 on the
margin so back in here edit advanced 15
okay it's already got the other value
set there we go that looks better let's
click update final thing is I just want
to remove this tab would you don't want
that then let's add related product to
here
put them over
see well let's have a look this see
where we at let's click update and then
just come over here refresh
all up there there little bit squashed
up little bit squashed up but I think we
need it looking that squash but you know
we're getting there
and this has got a nice title I'm
wondering if we need to add a nice
little title over here as well
so let's do that so we're going to click
on the pencil here and knock this down
to two columns I think two products as
well probably enough
all of my Dayton whatever that's fine
click update let's refresh
there we go
perfect really like in the product now
so just to finish off it's gonna add a
little title over here
no I think that's H free I'm just gonna
inspect it just to find out
oh no H - that's why you need to inspect
things so let's have a h2 so I'm going
to scroll right down on the widgets go
to heading pop that in here Saturday h2
already just put product product
information
that looks bigger though doesn't that
look bigger
it is slightly bigger we just inspect
this wedding I mean this one it kind of
comes with this widget so you can't
really do a lot with it but let me just
have a look at it
the font size is 1.5 REM so to adjust
that you can go in here there is some
sizes set but if you want to be more
specific coming to style and to
typography and we've got the size here
it was a REM the type of 1.5 click
update let's close our inspector I don't
need that
there we go they look nice I'm actually
feeling like I need
as margin as well just to push that down
it just this looks a bit too high I
think so back to our heading it's going
to advanced and a little bit of bottom
margin I know 20 oh I need to undertake
the chain because it's just done all at
the margins just want to do the bottom
one 20 update
there we go so I'm really happy with
that and click around and it should be
applied to all see how all of the
products which it is
there we go that kind of brings us to
the end of this good luck we've playing
around with your products hope you you
have some fun and come up with something
really cool and yeah that's it
anyway that brings us the end of this
video hopefully you got your WooCommerce
products looking really nice with
Elementor pro I do leave me a comment
let me know how you got on I read all of
the comments I get do leave them below
and I'll try to reply to as many as I
possibly can
if you're not already subscribed you can
do so by clicking on my face and if you
like to check out my vlog channel you
can click on my other face and go check
that out and here is a couple other
videos chosen especially for you I hope
you enjoy them until next time bye for
now
#Best Education Page #Online Earning
online earning,make money online, earn money online, online earning, online earning sites,
make money online free, online money income, earn money online free, money online, best way to earn money online, online income site, money earning websites, best online earning sites, easiest way to earn money online, earn money payment bkash, online money income site
Posts
No comments:
Post a Comment