Image Fit + Text Placement

Hi there @mmk175,

Thank you for reaching out.

Storefront, should automatically resize your images to fit within the thumbnail box. However, if the images are not being resized properly, you may want to try using a third-party plugin like Regenerate Thumbnails, which can resize your existing images to match the thumbnail box size.

As for your product cards, it’s likely due to the variable length of your product titles. You can consider limiting the title length to ensure they only take up one line.

Alternatively, you can use custom CSS to set a minimum height for the product title area, which would keep the ‘Add to Cart’ buttons aligned. Here’s a simple example you can try to use:

.woocommerce ul.products li.product .woocommerce-loop-product__title {
min-height: 50px;
}

Please adjust the pixel value to suit your needs. You can add this CSS to your site by navigating to Appearance > Customize > Additional CSS in your WordPress dashboard.

I hope this helps!

Hi @ckadenge

Thanks for this. I am currently building out the the pages etc so I might come back to this but the CSS you provided will likely come in very handy when I get around to using it.

Much appreciated. I will make sure to comment back when I use it so others can see if it works.

Hi @mmk175,

Glad to hear it, let us know if you need further assistance with this.

All the best.

Hi @ckadenge

Just getting back to you on this as I have rebuilt the pages of the site.

You mention before that the storefront theme should resize it. I think it’s doing it’s best but if you can view this link or anything other links you will see similar results for my images.

https://matthewm288.sg-host.com/saint-christopher-gifts/

Also, yes some of the product cards are off by the text but you will see here it has to be the image that’s causing the issue. In that case I think your CSS would not help me.

That plugin you mentioned “Regenerate Thumbnails” does it resize my actual image files or what does it do?

Note: Current image settings include:

1. Settings > Media > Thumbnail size = width 150 X height 150.

(ticked box) Crop thumbnail to exact dimensions (normally thumbnails are proportional).

2. Customize > Woocommerce > Product Images > Thumbnail Cropping 1:1

Images will be cropped into a square

You’ll see from the link above this doesn’t appear to be happening.

Hi @ckadenge

I replied to your message but the thread was resolved. My mistake I think.

Also

I tried this code

.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 50px; }

I played around with the 50px but nothing changed for me.

Hi again @mmk175,

No worries about marking the thread as resolved. I’ll try helping you solve the issue.

I noticed we have a recent update for the Storefront theme, could you try updating to version 4.6.0 and see if it would help in any way?

Hi @ckadenge

Sorry I was off on leave there. The update went through automatically it would seem.

I am currently making the images fit by doing the following.

Using products (beta) to populate products I want.

Click thumbnail, resize images 150 x 150, Scale = Contain, Scale Badge Alignment =Centre, Image Sizing = Full Size.

So for now the images will look better.

Can you help me fix the positioning issue I have though? They look on desktop but very bad on mobile.

Hello mmk175

Thank you for your reply.

I am glad to know that you have found a solution to make the image fit.

Regarding the positioning issue, could you share screenshots of your screen?
I want to see how they currently appear on desktop and mobile devices.
Also, describe how you want them to appear correctly.

Once I have a better understanding of your requirements, I will be happy to assist you.
Looking forward to your response. ??

Best regards.

Hi @doublezed2

Thanks for getting back to me.

This is an example of one page. You can see the image is a little to the left.

https://prnt.sc/vxQcWat8Eb-2

This is showing that pages backend settings.

https://prnt.sc/JQBjXW1iLM1a

This is that page in mobile view. You can it is very bad.

https://prnt.sc/_yNjKB9WyJQj

I’d like everything to be nicely centred on desktop, tablet, mobile etc. For all pages.

Happy to provide admin access if you’d like.

Live link to the same page: https://matthewm288.sg-host.com/candles/

• This reply was modified 6 months ago by mmk175.
• This reply was modified 6 months ago by mmk175.

Hello mmk175

Thank you for sharing screenshots.

I have checked the product page you shared and noticed the images are of different sizes.
If you could maintain a single size for all the product images that would solve the alignment issues.
I recommend using the 1:1 Aspect Ratio (equal width and height) for best results.

I have created an example image for you using a free online tool called Canva.
Click here to download it and use it on your website to see the results.

Let me know about your feedback on this. ??

Best regards.

Hi @doublezed2

Thanks for your help. When you mention 1:1 aspect ration do you mean when taking the images with a camera?

I currently have the 1:1 Thumbnail cropping setting enabled via Customize > Woocommerce > Product Images. I actually thought I had this disabled.

Hi @mmk175

When you mention 1:1 aspect ration do you mean when taking the images with a camera?

Yes, you can optimize the quality of your photos either during the shoot or in the editing process. I recommend using a photo editing tool like Canva to edit your photos. Aim for a 1:1 ratio, such as 600 pixels in width and 600 pixels in height, to achieve the best quality.

I currently have the 1:1 Thumbnail cropping setting enabled via Customize > Woocommerce > Product Images. I actually thought I had this disabled.

This is great. However, you’ve uploaded some pretty small images. Take this one, for instance. It’s only 184X400. So, it’s quite normal for this image to align left when viewed from a mobile device. The responsive behaviour will fill the remaining area with white space to adjust.

Make sure to upload all your product photos at 600X600 pixels or above. Once you do this, the system will automatically resize them to match your theme’s width and height settings.

If this makes no difference, navigate to WooCommerce > Status > Tools > Regenerate shop thumbnails.

Some resources worth to read to create a best product images:

• https://webappick.com/woocommerce-product-image-size/
• https://woocommerce.com/posts/how-to-take-professional-product-photos-top-tips/
• https://www.commercegurus.com/woocommerce-images/
• https://woocommerce.com/posts/fast-loading-product-photos/

I hope this provides some clarity. Please let us know if you have any other questions!

Hi @shameemreza

This is all very useful information. I knew the images might come back to bite me in the ass at some point but I really appreciate your help here.

I am happy to mark this issue as resolved. Kind Regards

Hi again, not sure if this will get picked up but I would love help on this final issue. I mentioned it above but it got lost in all the other parts.

If you view https://matthewm288.sg-host.com/candles/

You’ll see the images appear a little better but there is clearly a space on the left hand side. I think this is caused by the sidebar.

Can this be fixed?