[Support request] Scrolling Woocommerce product images with sticky add to cart box

[Sam]

Hi, can you tell me this kind of scrolling images is possible with GeneratePress on desktop only like here: https://shopkeeper.wp-theme.design/shop/women/button-embellished-printed-cotton-jersey-top/

thanks
Sam

[David]

Hi there,

tricky one would require some custom development, not really sure on this but maybe we could do something similar like so:

1. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
1.1 Add this code in the hook:

<div class="woo-gallery-stack hide-on-mobile">
<?php if ( has_post_thumbnail( $product->id ) ) {
    $attachment_ids[0] = get_post_thumbnail_id( $product->id );
    $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>    
    <img src="<?php echo $attachment[0] ; ?>"/>
<?php }	

global $product;
$product_image_ids = $product->get_gallery_image_ids();

foreach( $product_image_ids as $product_image_id ) {
    $image_url = wp_get_attachment_url( $product_image_id );
    echo '<img src="'.$image_url.'">';
}?>
</div>

1.2 Select the woocommerce_before_single_product_summary hook from the list.
1.3 Check Execute PHP
1.4 Set your display rules to the Product > All Products

2. Add this CSS:

@media (min-width: 768px) {
    .woocommerce-product-gallery {
        display: none;
    }
    .woo-gallery-stack {
        width: 50%; /* adjust % to match container layout */
        float: left;
    }
    .woocommerce div.product div.summary {
        position: -webkit-sticky;
        position: sticky;
        top: 60px; /* Adjust vertical position of sticky summary */
    }
    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 50%; /* match width of gallery stack */
        display: inline-block;
    }
}

Will require some tweaking i am sure.

[Sam]

Wow! that worked perfectly with only minor CSS tweaking.

Thanks so much!

Sam

[David]

That’s awesome – glad to be of help.

[Willya]

Hi David, do the above codes still work on the latest version of GP? I tried them locally, but got a warning like this:

Warning: Undefined variable $product in /Users/admin/Local Sites/toko/app/public/wp-content/plugins/gp-premium/elements/class-hooks.php(215) : eval()’d code on line 2

Warning: Attempt to read property “id” on null in /Users/admin/Local Sites/toko/app/public/wp-content/plugins/gp-premium/elements/class-hooks.php(215) : eval()’d code on line 2

Warning: Undefined variable $product in /Users/admin/Local Sites/toko/app/public/wp-content/plugins/gp-premium/elements/class-hooks.php(215) : eval()’d code on line 3

Warning: Attempt to read property “id” on null in /Users/admin/Local Sites/toko/app/public/wp-content/plugins/gp-premium/elements/class-hooks.php(215) : eval()’d code on line 3

[David]

Hi there,

that codes is out of date.
However it was that request that lead me to build the Niche site – see here:

https://gpsites.co/niche/product/woo-album-3/

If you’re working locally, import that site, it has the necessary code in 2 x elements:

1. Gallery Stack
2. Close Summary Wrap

And the CSS for it to work is in the Customizer > Additional CSS.

Let me know if that works for you

[Author]

Posts