- This topic has 25 replies, 2 voices, and was last updated 5 years, 10 months ago by
.
Hi. I am facing problems getting my product images to display well on the site. I can easily adjust the amount of text to make the photos even, but even if I do that the images are NOT aligned. Because the products are configured to display in boxes, some boxes are longer than others. This is very strange as I have scaled each image width to a standard 600px. If I have to crop each image by trial and error I will be wasting a lot of time. Aren’t the product image boxes meant to auto fit each product image inserted?
Can you Kindly help me resolve this as we do have to go live with the website very soon? Attached is screen shot. Login credentials in private field below. Thanks!
Hi. to follow up, I will be sending you the uRL to the shop page where the problem is, so you can understand. I cannot change my product names. so what’s happening is an issue where the boxes are all uneven and really ugly. It needs to be easier to do this. Really need help on this. Thanks.
Hi @cheeks,
I hope you are well today and thank you for your question.
Please make sure all your woocommerce images are at least of size 660px X 660px
Best regards,
Shufflehound teamWhile I can adjust the image size to be at least 660px by 660px, does this guarantee the images will be neatly aligned? Is there anything else you can adjust so that I can resolve this problem once and for all? What happens to images with longer product names? Won’t the images then be misaligned? Please let me know. Thanks.
If the images are same size and product names & other data are same then they will display aligned.
Or you can try making their height same by developing custom solution as shared in the following pages.
https://premium.wpmudev.org/forums/topic/make-all-shop-items-description-boxes-the-same-size
Hi. I tried the solutions in the links you provided. However they messed up my page. Can you kindly troubleshoot by going into my site and trying custom code to help me with my problem please? I think this will work a lot faster as we have exchanged a few mails on this. I cannot change the name of my products, so I’d really need some help with CSS to force the height to be the same. Hope you can help by putting in the CSS and see if it works. I do not know how to code. Thanks again.
the URL is below in the box
here is how the code proposed in https://premium.wpmudev.org/forums/topic/make-all-shop-items-description-boxes-the-same-size
messed up the shop page. see screen shot.
Hi. I’ve tried more solutions from wordpress.org forums today, including using this code below. But it is not working. My product images are still misaligned. It could be theme specific so I do need Shufflehound’s help to resolve this. I cannot launch the website with misaligned imaged. the link is citytechchemical.com/shop. Please have a look at my site and help me add a code to resolve this. Appreciate it.
.product_item a.product_item_link {
min-height: 90px;
}.archive .product_item a.product_item_link img {
max-height: 150px;
}Please make sure all your woocommerce images are at least of size 660px X 660px then add the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.woocommerce.post-type-archive-product ul.products li .sh-woo-post-content-container { min-height: 190px; }thank you – the images are all of the same height now, but the images are all different sizes. eg. Some of the 5-litre bottles appear gigantic while some are not. Can you please let me know urgently how to fix this problem? please have a look at the same Shop page. are there settings or code I could use to fix this? Thank you. The images are all set to be at least 660X660px as you advised. Cheers.
This is happening because some images you have used on your site have large empty white space and some don’t have as shown in the attached screenshot so please either remove the white space or add them consistently in the image.
Also please try regenerating thumbnails using following plugin.
Thanks for getting back. In the regenerate thumb nails plugin settings, what size should I set the thumb nails, gallery images and single images to? I’m asking as there may be theme specific demands . Please get back to me so I can complete the build and launch the site asap. Thanks!
You don’t need to set any size in the plugin settings, Just regenerate the thumbnails.
I’ve regenerated the thumbnails per your advice, however the images in Shop are still of unequal size. while I understand what you mean by amount of white space varying per image, it is not possible for anyone to ensure each image has the same amount of white space for everyone. Thus, can you Kindly provide a code such that it forces all the images in the Shop listing page to be of the same size. I have gone back and forth to edit the images — several times — in GIMP. and it is very much a trial and error and time consuming exercise. Hope you can help. Thanks. (see screen shot)
Hi I am aware you added custom code to enable the products in the Shop page to be of the same height. It worked fine yesterday. However, today, as I edited the product images, the alignment has gone of of back again. Can you look into it and help troubleshoot. I am baffled what’s happening. Please see screen shot. Login credentials in the box below. Thanks.
I wanted to add that what I did was to change the no. of products be displayed to 21 instead of the previous setting, was 11, or 12, I think… how does that affect the alignment of the product images? It has been quite frustrating trying to get this right, as I am unsure if it is a theme specific issue.
Hi — you will see that the last 2 rows are misaligned.I hope we can solve this problem once and for all as there have been too many tickets raised on this. appreciate your help.
Hi more misalignment in the Shop page for your reference. Please help me urgently as we are over due in launching the site. Is there a bug in the theme?
I’ve regenerated the thumbnails per your advice, however the images in Shop are still of unequal size. while I understand what you mean by amount of white space varying per image, it is not possible for anyone to ensure each image has the same amount of white space for everyone. Thus, can you Kindly provide a code such that it forces all the images in the Shop listing page to be of the same size. I have gone back and forth to edit the images — several times — in GIMP. and it is very much a trial and error and time consuming exercise. Hope you can help. Thanks. (see screen shot)
The theme displays images in same size 660px X 660px as described above but you added unequal white spaces in the images therefore they look differently.
We can’t remove white space from images developing custom code and make them same look same size so you have to do this yourself.
Hi I am aware you added custom code to enable the products in the Shop page to be of the same height. It worked fine yesterday. However, today, as I edited the product images, the alignment has gone of of back again. Can you look into it and help troubleshoot. I am baffled what’s happening. Please see screen shot. Login credentials in the box below. Thanks.
Actually this is how the WooCommerce displays products.
If you want to display products in same size then to achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
<div class=”bbp-attachments”></div>
