Problem with WooCommerce Video Plugins

Hi guys,

i’m trying to use video instead of featured image, but none of the plugins can actually do the job, because of the custom image gallery used in the Basel Theme.
The plugins i’ve already tested:

1) https://codecanyon.net/item/videos-plugin-for-woocommerce/11425598?s_rank=3
2) https://yithemes.com/themes/plugins/yith-woocommerce-featured-audio-video-content/
3) https://bg.wordpress.org/plugins/yith-woocommerce-featured-video/

Link to product with video: http://dev.malchugani.com/produkt/teifoc-4500-lyatna-vila-2-modela-130-chasti/

The YITH plugin (free or premium) place the video as featured, but it’s always shown at front and the image gallery cannot be used. I’ve saw that the custom gallery didn’t recognize the video as gallery element and the video itself use display: none; for the first image element.
Can you advise how to proceed and how to use both video as featured and image gallery.
I think an option would be if default gallery could be used or to give us some advise how to fix the problem above.

Best Regards

Hello,

Thank you for contacting us.

Unfortunately, we don’t have any instruction about how to quickly implement those plugins functions with our custom product images gallery. Probably you will need to disable our gallery at all and start customizing standard woocommerce one, that should be compatible with those plugins. You can disable our gallery by removing (or simply rename) the following files

basel/woocommerce/single-product/product-image.php
basel/woocommerce/single-product/product-thumbnails.php

Regards

Hi,

I’ve tried to delete the files, but it doesn’t put the standard Woo Gallery. I’ve attached how it looks like.

Link: http://dev.malchugani.com/produkt/teifoc-4500-lyatna-vila-2-modela-130-chasti/

Also i’ve tried to add Jquery click event on the first image to hide the featured video when it’s pressed, but due to the preventDefault() function it doesn’t work.

Code:
$(“.current-image”).on(“click”, function() {
$(“.ywcfav_has_featured”).show();
});

Please if it’s possible can you just write me the correct jquery code and i think this is all.

Best Regards

Actually it is standard gallery but without styles and scripts. And here is the right code for click event

$("body").on("click", ".current-image" function() {
$(".ywcfav_has_featured").hide();
});

Hi,

i’ve replace the code with yours but with no result again. The code is in the “On document ready” field.

Link: http://dev.malchugani.com/produkt/teifoc-4500-lyatna-vila-2-modela-130-chasti/

When I inspect the code, the things that I see as JS script on the image links are:
1) dragstart …. /wp-content/themes/basel/js/theme.min.js?ver=4.5.3:4
function(a) {
a.preventDefault()
}
2) dragstart …. /wp-includes/js/jquery/jquery.js?ver=1.12.4:3
k = r.handle = function(a) {
return “undefined” == typeof n || a && n.event.triggered === a.type ? void 0 : n.event.dispatch.apply(k.elem, arguments)
}

And on the body I see the click events, but this click event from the document ready field isn’t there. I think when it’s used the “$(“body”).on” the code must be visible somewhere when I inspect it.

Where I go wrong? Is there any other place where I can put the code and to be executed properly?

Thanks for the clarification and help so far.
Best Regards

We see two errors in your JS console. First comes from this custom JS https://gyazo.com/807c4bab5f199861caeae9d7f8c85a1f please remove it. And second about your code snippet, try to change it to this one

jQuery("body").on("click", ".current-image", function() {
jQuery(".ywcfav_has_featured").hide();
});

I’ve disabled the zopim widget and now there is no error. But also there is no success with the new jquery code.

Best Regards

There is one more error in your JS https://gyazo.com/3be875b7e8b301b5a1567fc9feac9aa7

Oh,

sorry. I didnt saw this. Now it’s gone.

Best Regards

Okay, we moved your code to the “Document ready” section, now it works as you expected.

[Author]

Posts