[Resolved] Edit Gallery Stack element in Niche Theme

Home Forums Support Edit Gallery Stack element in Niche Theme

  • This topic has 11 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1303407
    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.

    #1303468
    David
    Staff
    Customer Support

    Hi there,

    in your HTML – see this line:

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

    remove the hide-on-mobile class

    #1303704
    Marcel

    Perfect. And how could I add captions under images?

    #1303723
    David
    Staff
    Customer Support

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

    #1303799
    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?

    #1303850
    David
    Staff
    Customer Support

    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;
        }
    }
    #1303991
    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!

    #1304580
    David
    Staff
    Customer Support

    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/

    #1304626
    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.

    #1304645
    David
    Staff
    Customer Support

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

    #1304690
    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

    #1304814
    David
    Staff
    Customer Support

    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!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.