Question 165116 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress & Woocommerce support video content for products?

I’m trying to display video contents for products. Not wanting to disable the product thumbnails, but to display video contents whenever there is one available in the product gallery. The video contents will be uploaded to the media gallery and from Youtube. I tried several ways but none works.

  1. Use ACF: I created a custom field product_video with field type oembed. I use the below code. There is no error message but the video doesn’t display or show.
add_action( 'woocommerce_before_shop_loop_item_title', 'action_template_loop_product_thumbnail', 9 );
function action_template_loop_product_thumbnail() {
    global $product;

    $file = get_field('product_video', $product->get_id());
    // $file2 = get_field('product_video_text', $product->get_id());

    if( isset($file['url']) && ! empty($file['url']) ) {
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

        echo '<video width="200" muted loop autoplay src="' . $file['url'] . '"></video>';
        // echo $file2 ;
    }
}

Why is it not showing?

2)Use product video plugin. It works on the front end but there is an error Uncaught TypeError: jQuery(...).slick is not a function from the file afpv_front.js. I enqueued the slick.js thinking it will correct the issue but it doesn’t. It brings up more errors.

    
 function enqueue_slick() {
        if(is_shop() || is_product() || is_product_category() ) {  
        wp_enqueue_script( 'slick-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.css'); //do not mind the relevancy of the folder name, just a quick fix for now
        wp_enqueue_script( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick-theme.css');
        wp_enqueue_script( 'slick-min-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js');
        }
 }
        add_action( 'wp_enqueue_scripts', 'enqueue_slick' );

It produces errors like these:
Uncaught SyntaxError: expected expression, got '.' from slick.css
Uncaught SyntaxError: illegal character U+0040 from slick-theme.css:1
Error: Promised response from onMessage listener went out of scope

What is the right way to add video contents for products?

Tags:

2

Answers


  1. 0

    For the first option with ACF – did you try to get what’s inside the $file variable? If you get no error, it might be a wrong key ( not ‘url‘ for example ) or empty ‘product_video‘ field.
    As a quick test, you can use print_r( $file ) before your ‘if’ statement to test.

    For the second option – I can recommend you to set your script as dependent to jquery, like:

    wp_enqueue_script( 'slick-min-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', array('jquery') );

    At the same time, styles should be connected using wp_enqueue_style, not wp_enqueue_script.

    Login or Signup to reply.
  2. 0

    I was also struggling with the same issues, On their website I see the same errors. Have not tried the ACF.

    But it will work when I add this blow script in my header before closing the tag.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

    Not good but it fixed the issue for me.

    Screenshot to add a script in header

    I also tried this WooCommerce Product Video Plugin this plugin and it looks like they both used the same slick slider but this works fine for me on both shop and single product pages.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search