Woocommerce Video Shopping Snippet For 9:16 Videos

Transform your WooCommerce store into a modern social-commerce experience with Reels Style Video Shopping. This feature displays products through engaging full-screen vertical videos, allowing customers to browse, discover, and purchase products just like they do on popular social media platforms. Users can simply swipe through videos, view product details instantly, and complete purchases with a single tap.

Designed specifically for mobile users, the system offers smooth vertical scrolling, autoplay videos, product overlays, pricing information, and quick buy buttons to increase engagement and conversions. Whether you’re selling fashion, electronics, beauty products, or handmade goods, Reels Style Video Shopping helps create an immersive shopping journey that keeps visitors engaged and encourages faster buying decisions.

Key Features:
• Full-screen vertical video reels
• Mobile-first responsive design
• WooCommerce product integration
• Autoplay video playback
• Product name and price overlays
• One-click Buy Now button
• Smooth swipe navigation
• Lightweight and easy to customize
• No additional plugins required

Give your customers a Instagram-inspired shopping experience directly on your WordPress website and turn product discovery into an interactive, conversion-focused journey.

For Better Setting Follow Steps :-

Replace product_id values with your WooCommerce product IDs.

2. Add Short Code Where Ever You Want To Display on Website [video_shopping_reels]

Its a Easy To Setup For Any WooCommerce Website.

/**
 * WooCommerce Reels Style Video Shopping
 * Add via Code Snippets plugin
 */

add_shortcode('video_shopping_reels', function () {

    $videos = [
        [
            'video' => 'https://yourdomain.com/wp-content/uploads/reel1.mp4',
            'product_id' => 123
        ],
        [
            'video' => 'https://yourdomain.com/wp-content/uploads/reel2.mp4',
            'product_id' => 456
        ],
        [
            'video' => 'https://yourdomain.com/wp-content/uploads/reel3.mp4',
            'product_id' => 789
        ]
    ];

    ob_start();
    ?>

    <div class="vs-reels-container">

        <?php foreach ($videos as $item) :

            $product = wc_get_product($item['product_id']);

            if (!$product) continue;
            ?>

            <section class="vs-reel">

                <video autoplay muted loop playsinline>
                    <source src="<?php echo esc_url($item['video']); ?>" type="video/mp4">
                </video>

                <div class="vs-overlay">

                    <h3><?php echo esc_html($product->get_name()); ?></h3>

                    <div class="vs-price">
                        <?php echo $product->get_price_html(); ?>
                    </div>

                    <a href="<?php echo esc_url($product->add_to_cart_url()); ?>"
                       class="vs-buy-btn">
                        Buy Now
                    </a>

                </div>

            </section>

        <?php endforeach; ?>

    </div>

    <style>

    .vs-reels-container{
        height:100vh;
        overflow-y:scroll;
        scroll-snap-type:y mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .vs-reel{
        position:relative;
        height:100vh;
        width:100%;
        scroll-snap-align:start;
        overflow:hidden;
    }

    .vs-reel video{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .vs-overlay{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding:25px;
        color:#fff;
        background:linear-gradient(
            transparent,
            rgba(0,0,0,.8)
        );
    }

    .vs-overlay h3{
        margin:0 0 10px;
        font-size:24px;
    }

    .vs-price{
        font-size:20px;
        margin-bottom:15px;
    }

    .vs-buy-btn{
        display:inline-block;
        padding:12px 24px;
        background:#ff2d55;
        color:#fff;
        text-decoration:none;
        border-radius:50px;
        font-weight:600;
    }

    @media(max-width:768px){

        .vs-overlay{
            padding:20px;
        }

        .vs-overlay h3{
            font-size:20px;
        }

        .vs-price{
            font-size:18px;
        }

        .vs-buy-btn{
            width:100%;
            text-align:center;
        }
    }

    </style>

    <?php
    return ob_get_clean();
});