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

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

Home Forums Support Scrolling Woocommerce product images with sticky add to cart box

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #922858
    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

    #922915
    David
    Staff
    Customer Support

    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.

    #923524
    Sam

    Wow! that worked perfectly with only minor CSS tweaking.

    Thanks so much!

    Sam

    #923649
    David
    Staff
    Customer Support

    That’s awesome – glad to be of help.

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