Woocommerce Advanced Tutorial in English: How To Replace Woocommerce Product Thumbnail with a Video


hello friends welcome to this video
tutorial by perfect web solutions my name is Imran Qasim and in today’s
video Tutorial, basically this is a request from one of my followers that he watched
a video of mine that I have shown you how you can convert a placeholder image
to any other image so what he want that he want to change the product itself
like digital product page and from here normally it shows that thumbnail image
but I have replaced it with that video and the client wants that as well not
only that we also want that on the shop page we’ll choose the product company
like this is also show a video thumbnail rather than these images so I can show
you that I have done them and here these two are the videos which are one of them
both of them are for my channel one is from the other side from Congress that
the same places are in the setting so this period time to know the tongue and
you can see them very easily I have done this using another plugin
called Ethier action advanced custom piece
plugin but you have reproduced without using any other plug-in advanced you can
do it with custom field but as the ICS plug-in is more powerful so I’m using it
here but that doesn’t mean you can’t do it I will show you both ways but I will
show you how you can do it easier I had one person field after that I will show
you without using if you have just simply using the custom field office
which is a built-in feature inside color press so let’s get started let me open
my text editor and it is a function dot PHP file and also I have loaded my
existing which is our PHP file as well and I have opened the blue comics
plug-in here as it is the plug-in folder and in the the PBA admin dashboard in
the cup confuse after each option when you install advanced custom field light
like it don’t need to go for pro closet you can use the light which is free
version on the github on the WordPress repository so you can go to custom theme
in the custom field you can create a new group I have created these newcomers
which are greedy there are two deniability but we have content it’s
become a sweet video and there is only one filled with it so let me show you
edit it and here is the name of this feature peel group and then it is the
field label and the most important thing is that location tab and the rule you
need to set the rule post type from here you select post type and then is equal
to product make sure you not electric that product and then add this new field
you can click it the loop will by default layer you can click on added and
it will show you many options like this and here you type the title any type
indeed type field type and then this is the instruction default value you can
put a default image a placeholder text what you want to use a page appetizer
placed inside the text box then you can use the rest of them less than 50 part
after that click on publish and I have updated because of our ability of
published it so go to customs if you define this one here so next go to the
product tab and added any of your products let me do these two I have done
basis click on edit or you can add new product ever so here you will see a
featured video go to the cube and get ideas et secta you can place this
anywhere under this product anywhere on the top bottom left right I have put it
on vilified part where ever ended so I have put here YouTube video ID you can
get your YouTube video ID by editing or by watching any video and it will show
you the ID air and the rid of the music suppose if i play any video it will show
me that ID over here you can copy that ideally and paste it here that’s it for
the packet part load let’s move to the coding part for that coding part open
your favorite text editor – top line pack 3 you can use any of your trust and
here I have fused to function basically one filter and to
function the fish AI views in a book on that single product image and I wrapped
it inside book under guide product video it complete not function exists that is
decision does not exist then this function will be created otherwise this
machine will not work so this is just a check so this like an interview from a
single product in which family HTML make sure you should repeal it black this
position this is the freezer inside you compress which is responsible
for displaying single page this menu click on the pages here chosen this is
the single product image and it this is that with analytical product image
thumbnail so I have use this picture and I created my own function this function
except one parameter which displays the default image so I have a time featured
video variable that gets it is this get feel is a function of idiot light so I
passed the fielding and then get the ID functions it kept ID function is the
exact idea of current technical product quality post but because the TV
everything involvement in the post that is a portfolio gallery product whatever
is supposed so you get it by this and it will say fill that with the value of
this featured video which you have given here this one this value is sleep inside
this feature video variable no I check this if this feature it is not empty
simply return the video the type import it is a standard embedding code of duty
you can choose remove you can use other any video link you can see here you can
put it here if I am currently I’m using YouTube so that supplier code here
yuju embedding code and if it’s empty in there is no featured video it will
return the default image as you can see as you can see many other products like
if I open this product ship your idea it won’t show you that video it is showing
into 40 mystic Artes equal the product does not have pictured
video added inside it yes when I edit a position so I hope you
get it how to use this filter option so and display that product video on this
phenol product until the next part where will you need to click the video here so
after a such a consistent chemistry regardless I found that that this who
comment get product Hamlet is a function which display the so this book on a
product thumbnail function is responsible for displaying these
thumbnail right so what I did here I did make a kick that into canvas it also
added apt inside with ignore function ended so I just copied it and then I pay
Phillip this function all function here and make them it’s a 2d changes that I
put the main board which is this one under L and in the normally I put a
simple and then I get the featured video the featured videos pacing and the post
ID a because we have a global course variables rising that goes I did with
and showing the full circle idea of the canvas and the rapid same that if not
amputee streams repeated videos return this time
so if there is no video video use as this property is equal to this if if I
can show you this function is included it Goutham res folder in fuel WT
template crucial dot PHP file here this one I just copy this portion if it also
it has a check yet if not connected so when you create it it means it is
existing code that WordPress the group on the small create that function by in
the bicep so if we use this function and it will convert any of your image
thumbnail into video so you can do more like you can put a check in size using a
PHP you can put a check whether you mode video as you want at the Parliament so
it’s up to your logic how you going to use it this is the veg
using is here but you can use custom please like if you go to screen options
and by default some time determining an object so you click clear custody and it
will come here and same thing you can enter English here is featured video
variable this one is featured video so I make it video featured video feature
just to show you the difference and the value will be same like this one I put
the value here so that the ad can complete click so now we have a complete
video featured and a featured video to cut reveal right we get this week using
the get these option but we will get this because it is a ballboy procedure
so we will do get post meta function let me show you I will update it and make
sure this is product without featured image me this is product without
featured in digital product we can editing right now here so that we have
both seen it same values now go to my code editor and I will product go to
work update and rewrites it which typically is equal to this I will
complete it out so rather than I will just put it so
that the quantum wave and the other I will just open this VM so no there is no
feature within it and if I reload the page you will see here move because this
product comes having a different app and so both remove that both the product
doesn’t have video right now then come here so now before we should get it now
would you get both meta it accepts the post ID so here we will
put post ID and then I will put a feature that’s very visual feature video
feature because I created this the key values video in check so that why I put
it video because you can pop it so that and this balls make it true
so that it will deter its value to this visit but save it and now go here we
load up see that this video will come back again and why not it and you will
see that it’s not coming yet because in this particular product we didn’t put
any poor for featured video but featured we live this for most matter but we did
put it for but we did put it far easier but we did it with first post meta but
that is why it is marshalling video here the as soon as I comment out this one
and uncommon this one Harry Reid or a paper and if we show video file photo so
then this concludes our tutorial am sure you like this career and with this to
know especially dedicated to one of my followers who requested this video
tutorial that how can see the product individual a product video so i’m sure
other watching also liked this video please thumbs up and click the like
button and do subscribe my channel and do make requests if I can do that
I will surely do it for you and I’ll put you as an honest that this tutorial
especially for my follower and if I can show you and then I can show you is
coming this one comment I going to body plug-in so and here you can see nice
tutorial and here you can see they’re all in n comedian voice op has
recognized how to place product image by out video so I have explained it so that
I mean I endorse in advance I tolling that okay I’ll be the three cross for
you and my friend here is a screen loss for you and thank you very much for
liking my videos and subscribe to my channel and let and show you subscribe
to my channel thank you very much once again and take care bye


  1. Excellent!! I will try it in the next hours! So exiting, great tuto Perfect Web Solutions!! (Y)

  2. do you know where to find the plugin custom fields, please? my search results seems not to be the one you are using in the video… 🙂

  3. Perfect Web Solutions, can i send you my functions.php? In comparison, i don't have the same lines than you :-

  4. Hi sir. Your video is awesome. I want to know how to add a video in Users tab.For Example I am an administrator and i want to add a video to my profile. How to add a custom video field to upload a video and it should display in the author page after uploading the video through admin. I added custom text fields but i am not able to add a video field to upload a video. There is a profile pic upload option but no option to upload a video. Will you please make a video on that. Thank you so much

  5. Hi sir, I uploaded the video on author page using plugin ACFLite( Advance Custom Fields Lite). But how to display that upload video in the frontend author page after uploading it , Please tell me sir. Thank you

  6. Hi, thanks for uploading the video, can you send me the code, I am not a developer I just need a quick thing for my new store.


Please enter your comment!
Please enter your name here