Product Gallery Size, Thumbnails

After Regenerating Thumbnials and set product images size, the main images aliegned to top and thumbnails still showing only 3 imgs!

1. How to align main product Images into center? >> “Check img1”
2. Show 5 or 6 Thumbnails >> “Check img1”
3. Hide quantity field in the product Page >> “Check img2”
4. adjust spaces between thumbnails in mobile view >> “Check img3”
5. Full width Add to cart Button
6. Full with Add to wishlist Button

I tried with css, but still did not get what I want exactly.
Looking for your support.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

1- Regarding the Product Image alignment issue that you are referring to is related to the Product Image size issue because on your shared Product link, you can actually see that the first Image of the Product is appearing correctly and centered because it has the Image Size originally: https://i.snipboard.io/wDBf0t.jpg

So, you can try to have a better Image Size originally to have the Product Image centered already. You can read more about it here:
https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

2- By default under the Theme right now, it shows 3 Thumbnail Images only and for further Images, you need to click on Arrows to navigate: https://snipboard.io/7HGSaR.jpg

There isn’t an option available right now to increase the number of default views of Thumbnail Images.

3- There isn’t an option available to hide the Quantity from the Single Product Page, so you can try out the following Custom CSS in this regard and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.single-product .quantity { display: none !important; }

4- The Thumbnail Images in Mobile view have a certain Width and Height defined with 0 Padding already. So, it is a bit of a default Gap that can’t be adjusted more.

5- For the Add to Cart button Full Width, please try using the below Custom CSS:

.single_add_to_cart_button { flex: 1 1 100% !important; }

For the Wishlist button Full Width, please try using the below Custom CSS:

.wd-wishlist-btn { width: 100% !important; }

Best Regards

Thank you Aizaz for the Help..

Still facing a new issue, that havent faced before. which is the equal height on products grid or carousel!
I tried to change to basic them and its working, but in your them its not!

Could you please provide a solution. Check attached for more

Attachments:

You must be logged in to view attached files.

Hello,

If you want to make the Product Grid even, then you can go to Dashboard > Theme Settings > Product archive > Products styles > in that under the Layout > you will find the option of Even product grid for desktop: https://i.snipboard.io/pDjV5T.jpg

You can enable that to make your Grid of even size. This option is available for Tablet and Mobile views too.

Best Regards

Hello Aizaz,
After a lot of work, I just fixed #2 and #4 as below:

#2. I used bellow codes in “Custom CSS for desktop” to adjust the Thumbnails size and expand the slick slider height to show more Thumbnails.. and Its working for me and showing as many thumbnails as i want deppending of the main image heigh:

* Code A: Change Thumbnails Size:
.woocommerce-product-gallery .thumbnails img{
width: 50px;
height: 50px;
object-fit: contain;
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;}

* Code B: expand the slick slider height
.woocommerce-product-gallery .slick-slider .slick-list{
height: 300px !important;}

#4. I adjusted the Thumbnail Images padding in Mobile view using this code in “Custom CSS for tablet, Mobile “section:

.woocommerce-product-gallery .thumbnails.owl-carousel .owl-item{
width: 80px !important;
}
so that disabled the padding that genrated automaticly between Thumbnails in mobile View..

*** Now, I need your help to fix

#5: the auto scrolling in the thumbnails slider, Check this video for more..
https://www.awesomescreenshot.com/video/12934702?key=6cb471d254c051cd6f3de373c26bed0f

I think it causing by my Css, I just tried to disable the transform and transition, but its affect the whole products carousels slider in the them, SO it need some special class or something else to call the function, or by doing something else..

#6: Adjust the navigation arrows location in the top and buttom insted of inline!
check this screenshot: https://prnt.sc/ZAWetbmYx7d9

Finally, I would love to see these changes in your next update, because It took a lot of work with me.

Thanks.

Hello,

5- The Auto Scrolling effect is the default functionality under the Theme right now for the Thumbnail Images selection and right now there isn’t any option available to change that but the large space that is appearing after the last selection on your Site for the Mobile view is because of the following CSS that you have applied:

.woocommerce-product-gallery .thumbnails.owl-carousel .owl-item{
width: 80px !important;
}

So, you need to reconsider this CSS and remove it to make the Thumbnail work correctly for the Mobile view.

6- Regarding the Arrow adjustment, please try using the following Custom CSS on your Site:

.thumbnails.slick-slider>button.slick-prev {
    order: 1 !important;
    margin: 0 auto !important;
}

.thumbnails.slick-slider>button.slick-next {
    order: 2 !important;
    margin: 0 auto !important;
}

Location to paste Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> paste the CSS.

Best Regards

[Author]

Posts