Archived topic
Edit Gallery Stack element in Niche Theme
11 replies · Started by Marcel on May 27, 2020
I modified the Gallery Stack element a bit, in the sense that I want all Woocommerce products to have exactly the same images (if you are wondering why I would do this - they are different products but using the same materials, and the customer sees the materials in the pictures). I also added a video before the images. The problem is that on the desktop it's fine, but on the mobile, I don't see any change.
This is the code I added:
<div class="woo-sumamry-wrap"><!-- open wrap -->
<div class="woo-gallery-stack hide-on-mobile">
<iframe width="600" height="415"
src="https://www.youtube.com/embed/KZ0f9A3kNiA">
</iframe>
<img src="/wp-content/uploads/2020/05/2749.jpg" alt="Girl in a jacket" width="500" height="500">
<img src="/wp-content/uploads/2020/05/2746.jpg" alt="Girl in a jacket" width="500" height="500">
<img src="/wp-content/uploads/2020/05/2742-1.jpg" alt="Girl in a jacket" width="500" height="500">
<img src="/wp-content/uploads/2020/05/2739-1.jpg" alt="Girl in a jacket" width="500" height="500">
</div>I've tried to remove from the additional CSS this snippet:
@media (min-width: 768px) {
.woocommerce-product-gallery {
display: none;
}but without any positive results on mobile.
I would also like to add captions under each image added in the Gallery Stack element. Can you guide me a little how to proceed? Thanks.
Hi there,
in your HTML - see this line:
<div class="woo-gallery-stack hide-on-mobile">
remove the hide-on-mobile class
Perfect. And how could I add captions under images?
As you're using Static HTML in the Hook you would need to add those captions in manually.
Done. Thank you for that. And the last one: how to change the order of the grid template columns on mobile? Is it possible?
If you want the Summary to come before the Gallery then add this CSS:
@media (max-width: 767px) {
.woo-sumamry-wrap {
display: flex;
flex-direction: column;
}
.woocommerce #content div.product div.summary {
order: -1;
}
}David, thank you.
I promise this is the last question (for this topic :)): everything works nice, but on mobile, after the last image I have inserted in static HTML in the Gallery Stack element, it appears the woocommerce placeholder image. I would like to hide it. On the desktop, it does not appear, just on mobile.
Thank you!
Try adding this PHP Snippet to your site:
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
Unfortunately, it does not work. I think it is something related to mobile behaviour CSS, as long as the placeholder images appear only on mobile devices, but not on desktop.
Where did you add that code ?
Alternatively yes the site does use CSS to remove it on desktop ie. this code:
@media (min-width: 768px) {
.woocommerce-product-gallery {
display: none;
}
}For it to apply to both just move this:
.woocommerce-product-gallery {
display: none;
}outside of the @media (min-width: 768px) {}
Hello, David.
I've added the PHP code directly on function.php on my child-theme.
The CSS snippet modification solved my problem.
Thank you very much for your time and effort to solve my goal. I've made a small donation, in respect for your work and ongoing development.
All the best,
Marcel
thats odd the PHP didn't work.
But if the CSS works for you - then thats great!
And thank you for the donation it's really appreciated!
