Single product template > How to add gallery?
-
I have installed the “Games” Woodmart template. On the Single product template, how can I add a Gallery or Slider whose pictures change depending on the product shown? All I am able to do now is add a “fixed” Gallery or Slider, but the pictures included there remain the same for whatever product, which is something I don’t want.
Can you you advice, please?
Attachments:
You must be
logged in to view attached files.
Hi mjdavid007,
Thanks for reaching to us and appreciate your patience.
1. Please make sure you added galleries images to the products.
2. You are using Custom WooCommerce Builder layouts, which is part of WooCommerce Builder from WoodMart. Navigate to Layouts > Edit Single Product Layout > select Product gallery widget and change the layout.
Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/
3. Or you can go to Theme Settings > Single Product > Gallery and here you can change the thumbnails layout.
Regards,
Thank you, but that way, both parts (main product image) and this new added gallery would show the same images. Isn’t there a way to show only the main product image (and video) at the top and then add a customized gallery on the other part?
Hi mjdavid007,
Thanks for details.
If I understand correctly, you are referring to fixed gallery or slider image in Custom Layout. If so, it’s just a preview, inside each product you need to upload Product Image and its gallery to show in real view.
Regards,
What I meant is that, if I add a gallery of images, they will be shown on the main product image placeholder AND on the new added gallery I mentioned. I’m attaching an image so you can check. I want different pictures on both places. Thanks!
Attachments:
You must be
logged in to view attached files.
Hi mjdavid007,
Unfortunately, it is not possible to do that at the moment. Because on a single product there can be 1 gallery with images for products, and it is technically impossible to fix it. But you can add a gallery element with the images you need in the description of each product.
Regards,
Thanks for the answer. Then, is it possible to hide the first image on the second gallery? So it shows all the pictures except the main one, which is already visible at the top. Thanks.
Attachments:
You must be
logged in to view attached files.
Hi mjdavid007,
Please provide URL of the mentioned page, so I can take a closer look.
Regards,
https://www.mjdavid007.com/product/all-titles-dvd/jackson-cbs-summer-variety-shows-4-dvd/
There you are. In the product gallery below, I don’t want to show the main product image. Also, I don’t know why but the image on the right show both labels of discount and “Hot”.
Hi mjdavid007,
Thanks for the link.
1. Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
.woocommerce-product-gallery .wd-carousel-wrap .wd-carousel-item:first-child{
display: none;
}
2. HOT
It is also called Featured product. Please see screenshot to know how to turn it off https://xtemos.com/wp-content/uploads/2024/08/Featured_Products.jpg
Regards,
1. Unfortunately that does not work, as it also hides the main picture from the main part of the page (the top). I only want it hidden in the secondary gallery.
2. But it should not show “HOT” on the product gallery, right? Only in the thumbnails. Check it in the image attached.
3. How can I show full titles of products? See image attached, it gets cut.
Thanks!
Attachments:
You must be
logged in to view attached files.
Hi mjdavid007,
To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.
Kind Regards,
Hung PD
Ok, I have done that. Please let me know how can we proceed.
Hi mjdavid007,
1. You need to add custom class to second Product gallery widget, for e.g: screenshots https://ibb.co/6c3NT4Jw
And use below code:
.screenshots .woocommerce-product-gallery .wd-carousel-wrap .wd-carousel-item:first-child{
display: none;
}
2. Because you use same Product category widget so it will displays Product labels same main one. Please use below code:
.screenshots .product-labels{
display: none;
}
3. You set 1 line title in Theme Settings and it also applied to Products (grid or carousel) widget, you can use custom class, for e.g related-products https://ibb.co/0prD5R44 and use below Custom CSS:
.related-products [class*="title-line-"] .wd-product .wd-entities-title {
overflow: visible;
max-height: 100%;
}
Regards,
Hung PD
.
