Thursday, 9 December 2021

Adjust Woocommerce Product Image Size and Woocommerce Product Title Length


how you can make your will commerce site look a bit tidier this is especially

useful if you're running a wasone site and you've been pulling products in from Amazon and they've got really long titles and different size images I'm

gonna show you how you can reduce the length for those titles and make those

images all the same size so let's go hello it's Alex here from WP eagle I hope you're all well before I start if you're new to my channel hello welcome

thanks for dropping by I would love to have you as a subscriber

to become a subscriber simply click th red button bellow and click that bell

and you'll be notified when I upload new videos but anyway this video is all about making your route commerce site look better this is especially for you

guys that are running wasone if you don't know what Woo's owned is it's basically a plugin that you can attach

to WooCommerce and it enables you to create an Amazon affiliate site by downloading those our products and stuff from Amazon I've got plenty tutorials on

the channel about how you can create one of those sites I'll put some links to

those in the description so this is a topic that came up on the live stream just last night where one of my viewers said I need to reduce my product titles and I want to make the images all the

same size to make my site look better by the way and I've seen you on the stream you can find it on my channel on a

Wednesday at 8 p.m. at UK time but anyway that's enough looking at my face let's go on the computer sort out our WooCommerce site so I'm over at beer shirt stock code UK which is one of my

Amazon affiliate websites I've got a complete video on the channel how I built this website it's a tutorial video go check it out if you've not already seen it I'll put a link up in a cart now probably and also a link in the description of this video it's a widow site so it pulls in products from Amazon using the API it's also running WooCommerce of course to do

the whole ecommerce thing and as you can see these products are looking a little bit untidy the the images are all kind of different sizes that

next is different because we've got three lines or two lines so what I'm gonna do is I'm gonna try and tidy it all up I want the text to just be on two

lines and I want the images to be kind of the same size if we have a look at one of the category pages just a simple

WooCommerce category again we've got probably the images and the text spilling over into many many lines so first thing we're going to sort out is the text so I'm going to install the

plug-in to do that so I'm going to go to dashboard then plugins and add new and up here in this keyword box gonna type in whoo title and it says plug-in here

whoo title limit click install it's now I still click activate to turn it on and there we go so now we've got some options in the settings section here is whoot title limit so it's going

there take a look and here we can adjust the character limit for different

sections on our WooCommerce site so we've got the shop page the category page a product page the home page and that's it so this is the shop page so on

my shop pagent me just fire plan tab so we can take a look at the front while we're in the back I think it's free over at shop here we

go shop page is basically the same as the category pages it's got four columns so this is going to need to be premiere a smaller number than the home page

because the home page is a bit wider so I think we should just go for 30 I mean

you're gonna have to experiment depending on the theme you're running the layouts that kind of stuff experiment with the character limit to

get it as you want it I'm gonna add these little dots because then people know that it's been shortened and they can click through to get the the full thing on the product page I

don't want to adjust that one it to be the full character limit on their selves gonna crank that up to two hundred although I don't think there's any

higher than that I can take a page gonna do the same thirty and then the home page can be maybe a little bit more we could probably go for forty five and

yeah I want to add these little things actually not that one but those yet so I'm aiming to get everything onto two lines when it comes

to the product title so it's refreshed this is the shop page category page whatever some have actually gone on to one line that's on two lines still not

consistent so quite sure why that's any one line maybe it's because these categories are particularly thin these categories these characters even if I can speak I don't know let's up that a

little bit let's go for thirty-five just see what that looks like so you're gonna need to play around get it working as you want it just does this it even that

long yeah yeah okay let's go for forty we'll check out the home page in a second okay two lines two lines looking

good so let's have a look at the home page that's all to eyes to fact that may even be a little because the second line

is getting a bit it cut off tab it too quickly so let's just up that to I don't know let's say at another tent okay 55

okay that's not too bad so that's our product title was shortened looking good so let's sort out these images now this

is going to depend on the theme that you're running different themes set different image sizes but the problem

we've got here is that when we're pulling in stuff from Amazon it's probably not so much important if you're

adding your own products too you would call my site because you can make sure

the images are all the right size and the same size before you upload them but when we're using wasone and the Amazon

API and we're pulling product images down from Amazon they're all different shapes and sizes and we get this effect

going on which is a bit uglier so this is the storefront theme but the settings

are the same for any theme and the settings can be found in appearance and

customize and we're gonna go into Woo's own and then we're gonna go to product images and then we're going to adjust the cropping it's currently set to 1 to

1 I'm going to adjust it to custom again you're gonna need to play around with

this depending on the theme you're running but I've found that if you switch to a 16:9 ratio which is the same as your widescreen TV everything seems to look a little bit better so that's

published let's head back refresh see now they're all the same size looking a

little bit better let's take a look at the shop there was that weird image the first product which was a bit small

don't know if that's going to have been fixed but we'll have a look no that's an issue because the image is really small so ones like that there's not a lot we can really do much about apart from

maybe fix the image up by editing it in some graphics program but generally

that's looking better just play around with the ratios until it works for you

some of these yeah they're a bit small so it's jumping up a little bit but it's looking better than it was so I'm happy

with that and that's it so that's the end of this video I hope you found it useful if you've got any questions or

comments and please leave them below I'll do my best to read as many as I

possibly can you know already subscribed then please click on the little Eagle up

there click the bell as I said to be notified of new videos here is the vo chosen specially for you so I hope

you enjoy it and there is my other channel my vlog channel go check it out

till next time bye for now

1 comment:

  1. Great tutorial on adjusting WooCommerce product image sizes! It really helped optimize my store's visuals. For those looking to make a difference, check out Donate food near me to support local communities.

    ReplyDelete