Scrolling Woocommerce product images with sticky add to cart box

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.

Wow! that worked perfectly with only minor CSS tweaking.

Thanks so much!

Sam

That's awesome - glad to be of help.

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

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