hi everyone this is imran
today in this video training i'm gonna
show you how you can easily create a
product slider
on your woocommerce-based e-commerce
website using elementor page builder
and olenter elementor addon here goes
the slider
i'm gonna create during this video
training i'm gonna use
elementor page builder and all enter
elementor woocommerce add-on
and i'll use the prion i mean the free
version
so you won't have to spend any money so
let's get to be started firstly i'm
going to
click on this button and i'll provide
the link
of this website in the video description
once you click on the link you will be
sent here
so what you will have to do coming to
this page you will click on this button
free download okay and it will be
downloaded very soon
okay once you have downloaded this
plugin
just jump to the dashboard of your
website
here i'm on the dashboard of my
wordpress website
and i'll install the add-on on my site
and friends you can see i have already
installed elementor page builder
and i have installed woocommerce so
i hope you can understand that you will
have to install all of this
already okay so what i'm going to do
i'm going to navigate to plugins and
click on add new
and here you can see upload plugin click
on it
and choose file as i have already
downloaded it i'm going to select this
one
and click on open and hit this install
now button
okay the add-on has been installed now
click this button to activate
well friends by now we could
successfully installed
the will enter plugin or add-on of
elementor page builder here you can see
a new menu
called will enter and if i scroll
and here you can see settings template
library
and extension okay so click on settings
you will see all the settings options
here
and these are very easy okay so
now what i'm going to do i'm going to
navigate to pages and shake
all the pages
and here goes my home page and front
page
that you can see
here is the home page and i would like
to
display the slider here okay
so what i'm going to do click here on
this button
edit with elementor or you can also go
to just
edit
and you will see this button
edit with elementor okay just click on
it
okay very nice so what i'm going to do
from here i'm going to click on this
plus sign to add a new section
just click on it and
the option here you can see just click
on the plus sign
and i'm going to create a one column row
just click on it
and here you can see a new on column row
so if i click on the plus sign here you
can
see on the left all the available
widgets
so i'm going to close this on close this
one
close this one until i see ool enter
add-ons
okay here you can see boolean patterns
or
if you know the add-on you are going to
use
you can search from here here you can
see search wizard
but at once you can see the lots of
add-ons
available under woocommerce add-ons
wizards
okay so i'm gonna use this one in
universal product layout okay
so you can directly search here
uni personal product layout
okay so just
click over here and drag and drop here
okay friends instantly you can see
a nice slider and
universal product layout three setting
options content
layout and advanced and under content
you can see
layout setting query settings
content setting action button settings
image settings and countdown settings
don't worry all the setting options are
pretty easy
as you have working experience with
elementor page builder i must say you
will find
everything pretty easy so let's start
with layout settings
just click on here and here you can see
the layout the default one
as we are gonna build a slider so what
i'm gonna do just click over here and we
have got
three options slider tab and default
i'm gonna choose slider okay once
you have selected slider is now
a slider but here you can see it doesn't
move
okay it will definitely move i'm done
with layout settings
now let's move on to query settings here
you can see
filter by what type of products would
you like to display on your slider
recent products preserved products best
selling products
sell products top rated products etc
so i'm gonna display recent products
and here you can see product limits it
shows
only three items that's why it doesn't
move on
so i'm gonna put the value
20 now here you can see it's a slider
pretty fantastic okay
friends here you can see product
categories
you can also display recent products
from
any specific categories you know you
don't i believe you know
about the product categories say for
example
it is face cream it is anti-aging cream
so these are the category of the
products so here if you click on the
plus sign
you will see all the available
categories of your woocommerce site
if you want to display only the face
cream
or paste masks
then these types of products will be
displayed here
i would like to display all the products
so i'm not going to add any category
okay now here you can see custom order
you can put
the custom order just order by id name
title random i think date will be better
but as we are going to display the
recent products so we don't need
any custom order because we are gonna
display the latest one first okay
so and order by date and descending
ascending
okay just select all the setting options
and
get your personal experiment that will
be fine
okay so we are done with query settings
let's move on to the content settings
here you can see style style of the
content here goes the style
okay i'm gonna choose style two here you
can see a bit different
box shadow okay let's see what was
style on okay here it is and
style three okay just
select each of the setting options and
decide which one looks better on your
website
i'm using astra theme you might use any
kind of
or any other wordpress theme so uh
in your scenario it might be different
so just make
your hands-on experiment selecting on by
on
well i'm happy with style 2
okay it's fine and if you don't like to
display the title
you can easily hide it but you must
display the title of the product
you can hide the price of the product
you can hide the category
you can hide category before border and
height rating well friends at this
moment
as i'm working on a demo site this
product
doesn't have any review or rating so
it's not showing up
and suppose it shows the rating and you
can hide or display the rating
that's fine so we are done with content
settings
let's move on to the action button
settings what's the action button
setting
here you can see a button if i hover
over here
the tooltip had to cut it's the action
button
okay you can change the style of action
button and you can
do it with the free version of this
plugin we live in the same city and
i just appreciate the reports who just
created this add-on i just thank all of
them all the team members
okay i was here
and show on normal and on over
so it will show up on over or however
okay just uh normal
okay show a two card bar text here you
can see i took a text instead of the
button but
the pattern looks awesome well friends
that's
all about action button setting let's
see image settings
image is single here you can see only
one image
but you can display
slider inside slider
if you shoot slider then each and every
image
or product can display in a slider if
you have
say for example here you can see i can
display
all the product image okay so
if you have a gallery of your product
image
then you can display all the images so
in that case you can so
select gallery tab and i have only one
image
so that's why it's showing on and when
you will have
multiple images it will show like this
show like this okay that's
all fantastic and you can change the
border color here you can see it's
a bit yellow but you can
according to the color of your theme you
can change
fine and countdown setting
you can show the countdown as my site
don't have countdown
and slider option okay
friends this section is pretty important
so just be serious
here you can see i have three product
but i can display
four now it shows four
it may show five here you can see five
you can show six products but that
looks clumsy four is
better okay four images
and you can hide this arrow
but i don't suggest you to hide it
okay you can hide the arrow
you should display the arrow and
pause on hover this slider might
be paused when the visitor hover over it
okay so slider auto play yes
auto play that means it will
automatically play and
auto play speed here you can see it's
playing automatically
as you can see and autopilot animation
speed
all the settings you can just set
yourself
and here you can see these options
where for desktop screen but what about
the tabloid
screen mobile screen on the tablet it
will show only two items
on the mobile screen it will show only
one
okay these are very quite good
just keep this default settings leave
this settings
as it is well i'm done everything with
this content just hit
update now
let's move on to a style under style you
will see
the options to add padding okay
i'm gonna add some padding on top 40
pixel
on bottom 40 pixel okay
and margin you can add border color you
can add
border box shadow okay
and in the content area you can add
background color
say for example red
okay this color
and if you don't like you can click here
to reset
and product bases here you can see
any product base just come over here
change the base color to green
[Music]
okay now click over here
color will be green okay at this moment
it doesn't have any bears
best background color will be red
so okay
it doesn't have the bears just
i'm going to move to the product
category again you can change the
category text color
just if you would like to make it
green okay here you can see the color is
green now
okay hover color you can change it to
red
or pink here it is it's pink you can add
margin
okay i'm gonna add and
what should i say on top 20 pixels
okay and here you can see product title
you can change the product title
color okay
everything it is simple product writing
action button you can change action
button
color
you can change the color
and upper price countdown
slider control slider control position
here it is on the center
because it is 50 percent if you can you
can move to the bottom
or bring it to the up and color
here i'm gonna change the color to black
okay and background color
okay background color is changed
lots of setting options okay that's all
i have completed all of this go to the
advanced you can add margin etc anything
okay so friends now i think
i could show you how you can add slider
i'm done i'm going to hit this update
button
i'm going to click here to see the
preview
i'm gonna scroll down and here is the
slider
okay that's fine
okay without spending any money you can
display a better slider on your website
and make sure you have
elementor page builder plugin installed
on your site
then install this add-on okay then you
will find everything
easy well friends that's all about this
training
you can share your ideas thoughts with
me through the comment
section below of this video i would love
to see your opinion
and that's all thank you for watching
don't forget to like
share and subscribe to my channel hope
to see you in a next video
English (auto-generated)
No comments:
Post a Comment