[Resolved] Edit Gallery Stack element in Niche Theme

[Marcel]

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.

[David]

Hi there,

in your HTML – see this line:

<div class="woo-gallery-stack hide-on-mobile">

remove the hide-on-mobile class

[Marcel]

Perfect. And how could I add captions under images?

[David]

As you’re using Static HTML in the Hook you would need to add those captions in manually.

[Marcel]

Done. Thank you for that. And the last one: how to change the order of the grid template columns on mobile? Is it possible?

[David]

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;
    }
}

[Marcel]

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!

[David]

Try adding this PHP Snippet to your site:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

https://docs.generatepress.com/article/adding-php/

[Marcel]

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.

[David]

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) {}

[Marcel]

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

[David]

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!

[Author]

Posts