Return to previous page

Single Product Gallery Alignment and Thumbnail Height

This topic has 6 replies, 3 voices, and was last updated 8 months, 3 weeks ago ago by Andrew Mitchell

Ajaz

Participant

April 2, 2024 at 17:51

The issue affects the PC and tablet view, the mobile view is ok. I have tried to look for options in “theme options” to resolve this but I am struggling to find and apply options to resolve the issue below.

My current settings for my single product page for the large image and the thumbnail is that the large image has a gap at the top which also must be aligned with the top thumbnail, and the thumbnails are longer than expected, they are normally a smaller square of 100px.

Another issue with this is that when I change the option in Theme options > Woocommerce > product images > current setting: custom 4*7 to either “uncropped” or “thumbnail width”, the main image on the single product gallery becomes larger but still short in width and the thumbnails change to the correct square size but this also creates major issues elsewhere.

If the settings above are applied to edit the thumbnail size Theme options > Woocommerce > product images, my product images on the homepage, “image carousel” and “products images on the “shop page”, also become square which cannot happen.

My homepage product image carousel and shop page product images are perfect as they are and we have been through a lot to set the alignment and size for both pages, these cannot be edited in any way.

If you look at the single product, you will see exactly what the issue is stated below: (the zoom-in effect is applied which is needed)

What I need is to resolve 2 issues on the single product gallery page:

1. The single product gallery large image be aligned to the top thumbnail, and the large image must remain the same size and same alignment when hovering and not hovering over the image as this currently does not.

2. Thumbnails: these are long, these need to be square at size 100px, aligned where they currently are: left of the large image.

#389724 Copied Theme version: 9.3.2

5 Answers
Luca Rossi

Support staff

April 3, 2024 at 10:51
Dear Ajaz,

We hope this message finds you well.

We have noticed that the custom thumbnail size has been modified to 4×7 dimensions, which has subsequently impacted the display on the single product page.

To address this issue, we kindly request that you insert the following custom CSS code. You can do this by navigating to Theme Options, selecting Theme Custom CSS, and then placing the code in the Global CSS section:
```
@media only screen and (min-width: 650px){
    .single-product .swiper-vertical-images .vertical-thumbnails-wrapper img {
        object-fit: cover;
        width: 158px;
        height: 158px;
    }
}
```
We appreciate your prompt attention to this matter. Should you require any further assistance, please do not hesitate to reach out.

Warm regards,
The 8Theme Team
#389819 Copied
Ajaz

Participant

April 3, 2024 at 12:02

This has worked for the thumbnails, fab, thanks.

1 issue with this page:

How can I adjust the height of the large image, I have tried to edit the code below but the height does not adjust:

.woocommerce-shop .content-product .product-content-image,
.single-product .content-product .product-content-image {
width: 300px !important; /* Adjust the width as needed */
height: auto; important;
margin: 0 auto;
overflow: hidden;
}

#389833 Copied
Luca Rossi

Support staff

April 3, 2024 at 13:43
Hi @Ajaz,

Reduce the heigh of image will make the width is reduced also.

Please try with this custom CSS:
```
@media only screen and (min-width: 650px){
    .single-product .woocommerce-product-gallery__image a img {
        max-height: 500px;
        width: auto;
    }
    .single-product .with-vertical-slider .swiper-slide {
        align-items: start;
    }
}
```
Warm regards,
The 8Theme Team
#389850 Copied
Ajaz

Participant

April 3, 2024 at 14:11

I have tested with the code and yes, it does not look as nice because the width is also reduced.

The topic is resolved, thanks Luca.

#389857 Copied

Andrew Mitchell

Support staff

April 3, 2024 at 14:11

Dear Ajaz,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#389858 Copied
Tagged: custom woocommerce design, optimized woocommerce layout, product gallery alignment, single product display, thumbnail height customization, woocommerce templates, wordpress ecommerce
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Single Product Gallery Alignment and Thumbnail Height’' has been successfully resolved, and the topic is now closed for further responses

Single Product Gallery Alignment and Thumbnail Height

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection