Return to previous page

Product Images alignment on the homepage

This topic has 22 replies, 4 voices, and was last updated 7 months, 2 weeks ago ago by Andrew Mitchell

Ajaz

Participant

March 28, 2024 at 23:32

Hi,

Regarding the product images element on the home page, there are currently 2 images, that always align to the left, how can I centralise this section without reducing the size and quality?

I am a beginner and have no idea how to create custom pages and this I would like to avoid.

I have set this to a 4-row image gallery but when there are 1, 2, or 3 products/images, they automatically enlarge and the images lose quality resulting in blurry images.

I need to leave this as a 4-row, but always be able to have the images to remain centre, the same size as they are or a size that I prefer and not lose the image quality?

More than 4 in a row automatically creates another row and this should also have identical settings, how is this possible?

Ajaz

#389007 Copied Theme version: 9.3.2

21 Answers

Ajaz

Participant

March 28, 2024 at 23:33

Apply the same settings to the shopping product page, again, without creating a custom page.

#389008 Copied

Rose Tyler

Support staff

March 29, 2024 at 07:56

Hello, Ajaz,

Thank you for getting in touch with us.

Here is just an example of alignment – https://prnt.sc/FMCXSonZi68r ( https://prnt.sc/y-SR83f7kHhg )

We would recommend you replace the Products element on your Home page with Products Carousel or Products Grid.

Kind Regards,
8theme team

#389032 Copied

Ajaz

Participant

March 29, 2024 at 13:47

Hi Rose,

I have added the product carousel. The image size is correct but when I hover over the image, it zooms in like I need it to but the image becomes bigger and I am not sure how to stop the image enlarging when hovering over.

I need the hover zoom-in effect to stay but without the image enlarging.

Also, the arrows are tiny, how can they be resized?

I can remove the built-in product image section as soon as the carousel is working correctly

Thanks,
Ajaz

#389117 Copied

Ajaz

Participant

March 29, 2024 at 14:28

Hi,

This setting has changed my single product image layout. The image has become smaller in width and height and when you hover over the image, it enlarges.

What I need is for the image to be set back to its original layout in the single product image layout, this width was fitted in the area that is still visible and the height was aligned to the bottom of the “but now” button.

Thanks,
Ajaz

#389122 Copied

Ajaz

Participant

March 29, 2024 at 20:06

I have deleted and added a new carousel. The issue is that I am not able to resize this to my preference, how can this be done?

#389189 Copied

Rose Tyler

Support staff

March 29, 2024 at 20:55

Hello, Ajaz,

About Products on your Home page, there are Image resolution settings https://gyazo.com/d7b33df9d910938f78cbc3121eb6766f , for example, custom size – https://gyazo.com/68c6775ab3da7c19e0285ef2c1f5b8aa

Changes in the Home page content editor do not affect a single product page.
The layout of product page can be edited via Theme Options https://gyazo.com/02832528ef3ea61ac27e3dc4a0e4cfca
Do not forget about Main Image Width – https://gyazo.com/ed12a013257ed0498acda1193867be54

Should you decide to alter the image size settings, please be aware that regenerating thumbnails is a necessary step to ensure proper display. You can find more information on this process at the following resource: https://www.8theme.com/documentation/xstore/woocommerce/product-images/.

Thank you for your attention to these details. Should you require any further assistance, please do not hesitate to reach out.

Kind Regards,
8theme team

#389199 Copied

Ajaz

Participant

March 29, 2024 at 22:42

Hi Rose,

The issues with changing the thumbnail cropping option to custom:

The product images on the shop page become larger, this I need but a little smaller than it currently is but not as small as the resolution settings do because they are too small.

I have tried adding margin and padding but nothing works even though the container is set to full width.

With this setting applied, the thumbnails on the single product page become long which ruins the whole layout.

I have left this setting for you to see what I mean.

All I need is for the shop page product images to be smaller than they are but to my preference, is this possible?

And the thumbnails to stay the size the are when the thumbnail cropping option is selected in the “product images” option.

Thanks,
Ajaz

Thanks,
Ajaz

#389211 Copied

Ajaz

Participant

March 30, 2024 at 19:03

Tony has provided the CCS code below to change the shop page images to my preference and this works.

Can there be a similar approach to this? if yes, what is the code?

CSS code
.woocommerce-shop .content-product .product-content-image {
width: 300px !important; /* Adjust the width as needed */
height: 500px !important;
}

Thanks,
Ajaz

#389307 Copied

Rose Tyler

Support staff

March 31, 2024 at 09:38

Hello, Ajaz,

We would like to inform you that the custom size feature, as shown in the screenshot provided https://prnt.sc/1gwCtvOSHAGx allows you to adjust values to meet your specific requirements. In the example depicted, it was configured the settings to a width of 100px and a height of 100px. Please feel free to modify these dimensions to align with your needs.

Should you require any further assistance, please do not hesitate to reach out to us.

Kind Regards,
8theme team

#389361 Copied

Ajaz

Participant

March 31, 2024 at 13:22

Hi Rose,

I don’t think I mentioned this but I have tried this multiple times and the width does expand when applied but the height does not go more than the container size.

I cannot enlarge the container, I have tried but no luck.

There is a limit on the height in the container and I am not able to adjust freely.

I have changed the W and H for you to see.

The image sizes on my shop page are w300 x h500 and this is exactly what I need on my home page for the products carousel, I need to be able to centralize them without the sizes being compromised.

Tony provided the code for this.
CSS code
.woocommerce-shop .content-product .product-content-image {
width: 300px !important; /* Adjust the width as needed */
height: 500px !important;
}

Ajaz

#389388 Copied

Rose Tyler

Support staff

March 31, 2024 at 15:43

Hello, Ajaz,

We would like to inform you that the implementation of custom code is considered a measure of last resort.

Could you please take a moment to review how the products are currently displayed on your homepage and confirm that everything appears as intended?

Kind Regards,
8theme team

#389404 Copied

Ajaz

Participant

April 1, 2024 at 13:01

.

Please contact administrator
for this information.

#389522 Copied
Luca Rossi

Support staff

April 1, 2024 at 15:00
Hi @Ajaz,

Can you please confirm how many products do you want to display on the home page now?

We could see it’s 2 products displaying for now.

https://prnt.sc/DR5mp3ksmfzY

I need however when you hover over them, the zoom effect applied is what I need but the image enlarges and this is incorrect. When hovered over, the image must remain the same size.

Please also add this custom CSS for the home page:
```
.home .etheme-product-grid-image a {
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}
```
Kind Regards,
The 8theme Team.
#389559 Copied
Ajaz

Participant

April 1, 2024 at 17:44

The row is set to show 4 products.

I will be adding more products in the future and the will be more rows to follow.

As long as the images are automatically centered without the image size adjusting, this should be good.

Currently, when 1, 2 or 3 images are added, they are placed to the left of the carousel.

Ajaz

#389572 Copied

Luca Rossi

Support staff

April 2, 2024 at 03:57

Hi @Ajaz,

We’ve changed the number of products per row to 4 on desktop(https://prnt.sc/DUQP1QKL78Mn) & 2 on mobile(https://prnt.sc/W5PaE_JRj-N-). Here is how the products look like now:

– Desktop: https://prnt.sc/zavh0uBqpD3n
– Mobile: https://prnt.sc/WmqBVK6OFfTr

It means when you add more products, the layout would be same as now.

Kind Regards,
The 8theme Team.

#389595 Copied

Ajaz

Participant

April 2, 2024 at 04:52

Mobile version looks perfect for image placement. I will check this on my pc later today.

Please reopen my FAQ topic because this still has an issue.

#389597 Copied

Luca Rossi

Support staff

April 2, 2024 at 10:23

Dear Ajaz,

We regret to inform you that we are unable to reopen the previously closed topic due to restrictions on our permissions. However, we are eager to assist you and would kindly ask if you could initiate a new topic for discussion.

Please let us know if you require any guidance in creating the new topic, and we will be more than happy to help.

Thank you for your understanding and cooperation.

Best Regards,
The 8Theme Team

#389644 Copied

Ajaz

Participant

April 2, 2024 at 13:20

Actually, I will open a new topic because I have had issues from the previous person.

I only want a solution so expecting a new topic to resolve the issue rather than create issues for me.

#389683 Copied

Luca Rossi

Support staff

April 2, 2024 at 14:24

Thanks for understanding!

Best Regards,
The 8Theme Team

#389702 Copied

Ajaz

Participant

April 2, 2024 at 17:14

This is now working correctly.

Thanks,
Ajaz

#389717 Copied

Andrew Mitchell

Support staff

April 2, 2024 at 17:14

Dear Ajaz,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#389718 Copied
Tagged: e-commerce website design, online store optimization, product images alignment, woocommerce image layout, woocommerce templates, wordpress e-commerce solutions, wordpress homepage
Viewing 22 results - 1 through 22 (of 22 total)