How to enable vendors to upload video in the product gallery? Dokan | Woocommerce

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post, I will tell you How to enable vendors to upload video in the product gallery? Dokan | Woocommerce

Guys if you are new in WordPress or in WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

Guys here is the working steps and please follow carefully:

To enable vendors to upload videos in the product gallery on your Dokan multi-vendor marketplace, you can integrate a WooCommerce-compatible plugin that adds this functionality. One such plugin is the WooCommerce Product Video Gallery.

Steps to Implement:

1. Install and Activate the Plugin:

• Navigate to your WordPress dashboard.
• Go to Plugins > Add New.
• Search for “WooCommerce Product Video Gallery” and install it.
• After installation, click Activate.

1. Configure Plugin Settings:

• After activation, go to WooCommerce > Settings > Products > Product Video Gallery.
• Adjust the settings to allow vendors to add videos to their product galleries.

1. Vendor Usage:

• Vendors can now add videos to their product galleries by editing a product and using the new video upload options provided by the plugin.

This integration will enable vendors to enhance their product listings with videos, providing a richer shopping experience for customers.

For a visual guide on allowing vendors to enable customer file uploads, you might find the following video helpful:

Guys here is with custom coding:

To enable vendors to upload videos to the product gallery with custom code in your Dokan multi-vendor marketplace, you’ll need to extend the Dokan functionality and modify the product editing form to include video uploads. Here’s a step-by-step guide:

Step 1: Enable Video Uploads in WordPress

1. Add video MIME types to WordPress if not already allowed:
   Add the following code to your theme’s functions.php file to allow video uploads:

   function allow_video_uploads($mime_types) {
       $mime_types['mp4'] = 'video/mp4';
       $mime_types['mov'] = 'video/quicktime';
       $mime_types['avi'] = 'video/avi';
       return $mime_types;
   }
   add_filter('upload_mimes', 'allow_video_uploads');

2. Ensure the maximum upload size is sufficient in your WordPress and hosting settings.

Step 2: Extend Dokan Product Form

Modify the Dokan product form to include a video upload field:

function add_video_field_to_dokan_product_form($product_id, $post_data) {
    ?>
    <div class="dokan-form-group">
        <label for="product_video"><?php esc_html_e('Product Video', 'dokan'); ?></label>
        <input type="file" id="product_video" name="product_video" class="dokan-form-control" accept="video/*">
        <?php if ($product_id) : ?>
            <?php $video_url = get_post_meta($product_id, '_product_video', true); ?>
            <?php if ($video_url) : ?>
                <p><?php esc_html_e('Current Video:', 'dokan'); ?> <a href="<?php echo esc_url($video_url); ?>" target="_blank"><?php echo basename($video_url); ?></a></p>
            <?php endif; ?>
        <?php endif; ?>
    </div>
    <?php
}
add_action('dokan_new_product_after_product_tags', 'add_video_field_to_dokan_product_form', 10, 2);
add_action('dokan_product_edit_after_product_tags', 'add_video_field_to_dokan_product_form', 10, 2);

Step 3: Save Video Metadata

Save the uploaded video file when the vendor submits the product form:

function save_dokan_product_video($product_id) {
    if (!empty($_FILES['product_video']['name'])) {
        $uploaded_file = wp_handle_upload($_FILES['product_video'], ['test_form' => false]);

        if (isset($uploaded_file['url'])) {
            update_post_meta($product_id, '_product_video', esc_url($uploaded_file['url']));
        }
    }
}
add_action('dokan_process_product_meta', 'save_dokan_product_video');

Step 4: Display the Video in the Product Gallery

Modify the product gallery template to include the video:

function display_product_video_in_gallery($content) {
    global $product;
    $video_url = get_post_meta($product->get_id(), '_product_video', true);

    if ($video_url) {
        $content .= '<div class="product-video">';
        $content .= '<video controls><source src="' . esc_url($video_url) . '" type="video/mp4">' . esc_html__('Your browser does not support the video tag.', 'dokan') . '</video>';
        $content .= '</div>';
    }

    return $content;
}
add_filter('woocommerce_single_product_image_html', 'display_product_video_in_gallery');

Final Notes

1. Security: Ensure the uploaded files are sanitized and validated to prevent malicious uploads.
2. Testing: Test thoroughly for compatibility with other plugins and themes.
3. Customization: If needed, style the video display using CSS to match your site’s design.

This approach allows vendors to upload videos directly to the product gallery, creating a seamless experience.

Guys if you will have any kind of query then feel free to comment below.

Ajay

Thanks