to deal with resizing images in
WooCommerce I've got almost 27,000 views
so far it ranks number one in Google for
this particular search too however
there's a problem with it it's out of
date on the way that you actually deal
with resizing things has changed inside
the WooCommerce so today we're gonna
take a refresher and take a look at how
we actually go about resizing and then
all those kinds of good things with
images inside the WooCommerce
hi and Wonga - Paul see this is wptouch
unlisted the channel where i help you
get more from WordPress if you'd like to
learn more about WordPress and all the
things you can do with it hit that
subscribe button now and smash that Bell
I could be notified every time we
release new videos every single week
okay so let's jump into the dashboard of
WordPress and take a look at how we go
about actually resizing images in the
later versions of will commerce so we're
gonna jump back over into the dashboard
you can see this is what we're seeing at
the moment on the normal sites we've got
these images set to 1 to 1 everything
looks pretty good on there it's just
something in the dashboard itself I
wanna do is come down into WooCommerce
we're gonna take a look at the settings
now previously we had a table inside the
settings that allows go through and
customize the images however that's no
longer they so how do we go about
actually resizing these images and
dealing with the aspect ratios the
cropping and all that kind of thing
well now it's be moved what we need to
do is come over into the actual
customizer for WordPress and the theme
so we're gonna do is going to come to
the appearance tab we're gonna come in
to customize now it doesn't matter what
theme you have installed you should
still have a tab in here for dealing
with WooCommerce now undated with the
ocean WP that's the theme I've got
installed like I say it doesn't make any
difference because we could end up with
a custom tab in here just for
WooCommerce so we take a look on the
left hand side you can see wuhan which
is one of the options we're gonna open
that up and take a look at the settings
so once this loads into the customizer
which seems to be taking a little bit of
time at the moment so there we go
there's our page there for our homepage
we oughta commit the WooCommerce section
and you can see we now have a range of
different options what we're interested
in is the product images so we're gonna
click on product images and you can see
that gives us a range of different
options it now loads in the customizer
in Lowe's and all the settings and also
opens up a walk on a store page so we
can see where we're making change
this exactly what's going to happen this
is broken down into two distinct
sections the first is the actual main
image width and the thumbnail image
width the second is the actual cropping
so the first thing you take a look at is
the actual width of both the image and
the thumbnail now you can see these are
predefined we can change these to any
value we want and based upon the
cropping section underneath that will
dictate the value of the opposite side
so in other words if we set the width to
600 and we set something like a 16 by 9
ratio we might end up with something
like 600 by 300 somewhere on that kind
of ratio now if you remember the old
version we used to be able to set both
the width and the height this is a more
kind of versatile way of working that as
needing to kind of calculate what we
think the opposite sides going to be for
the height so all we need to do is make
sure that we set the width that we want
for both the main image and also for the
thumbnail now these are referenced in
different parts of the site so you're
gonna find that the main image is going
to be when you click on a product it's
out so we go in and say we want to view
the product that's we will see the main
image where is it we're taking a look at
the moment we take a look at the
thumbnail which is a smaller version
based upon actually viewing all the
different products on a page now so once
we set those values in there the next
thing I'm putting the most important
thing when it comes to setting things up
to look consistent is the thumbnail
cropping now at the moment this is set
to 1 to 1 so what that basically means
is if you have a width of 600 you're
gonna have a height of 600 the same goes
to the thumbnail a width and a height
were both equal or value we set in this
position next step we've got custom we
can click on there and you can see what
we can do is we can set an aspect ratio
so it's worth bearing in mind that
whatever value you set in the image
width for both the main image and the
thumbnail that will be the 16 value in
this example the 16 is going to be the
width the 9 is going to be the height
now you can see from the examples we've
got on screen at the moment where it's
updated itself you can see this is now
using that 16 by 9 aspect ratio if we
set that to something else let's just
say we set this to 4 by 3 which is gonna
be your old aspect ratio we would have
seen on old TVs you can see after a
couple of seconds it updates and shows
exactly what's going on them now what
this is gonna do is this will say the
image will be cropped to a custom aspect
ratio this is something new to bear in
mind the image is actually being cropped
down to that aspect so if you don't want
that to happen
images to remain uncropped then you can
choose the uncropped option and you see
this will display the images using the
aspect ratio in which they were uploaded
but this is something that if you are
creating images for your online store
and you can create a template and all of
the different images you upload will
always use that same template you could
use uncropped if you want to that's
gonna give you the perfect end result
based upon what you uploaded to again
taking into consideration the values you
set for these main width and the
thumbnail width so that's just something
to bear in mind but that's how easy it
is now to go in and update and change
the both the widths and also the
cropping and the thumbnail aspect ratio
that's going to be used throughout your
entire store now if you ask me this is a
much simpler way of working over the old
version that did seem to cause a lot of
problems for all the people that they
didn't get the results they were
expecting when they started getting in
and tweaking and configuring the
different values this is much easier now
speaking of being easier if you want to
learn more about WordPress WooCommerce
and all those kinds of things you can do
check out the videos in the corner right
now they're gonna get you up to speed
with getting more out of WordPress as
always all applicable links in the
description below and my name is Ben
policy this has been wptouch until next
time take a
No comments:
Post a Comment