Video Post Indicator or play button in catalog mode!!

I am surprised that this feature is missing. I will sell virtual product ex: graphic element and video element in my site. So how can i display a product that its a video file? Is there any way to add a play button or any label or something similar that will indicate that it’s a video product in the catalog mode! Otherwise, visitors cant determine which one is a graphic product and which is a video product.

If i can add a play button on top of thumbnail image that would be nice! PLay button doesn’t have to be functional, just a static button will also work for me. My main purpose is to show the audience that its a video file. If the button can play the video in a popup that would be very nice!

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area.

I have checked at my side: I have set the catalog mode and added a video to the virtual product, it works correctly https://gyazo.com/ada35fc3e396b4f18a8fd4a1fcacd854

Also, check the video URL and make sure you are inserting the proper format, for example: https://www.youtube.com/watch?v=lM02vNMRRB0

Best Regards

I hope i was not clear to make you understand. This is not what i wanted.

You have video player button in your theme ex: http://prntscr.com/qzj4z6 but not for product thumbnail. I want to add this player button on some products thumbnails ex: http://prntscr.com/qzj5p9 how can i achieve this? I dont want this player button in all thumbnail but few of them.

Can you give me a code that i can paste in child theme to add this player button on certain product thumbnails?

Hello,

The video button you show is not the functionality of our theme, in any case there is no option to add it to the grid. You will have to find a plugin.

Best Regards

1. Please recommend a plugin.
2. Do you provide paid customization service? If yes then what will be the price to add a play button in grid?

Hello,

We have not tested any plugins that is why we can hardly recommend it.

We provide only support within our policy frames, if you need additional customization you can find a developer or try to contact our partners https://wpkraken.io/?ref=xtemos.studio

Best Regards

1. How to move the Play button in the center and make 2X bigger?
http://prntscr.com/r06kx2
2. How to disable the mouseover button expand area with “watch video text”
http://prntscr.com/r06wmn

Hello,

We can make the button bigger, however, we can hardly ever fix it in the center, it would not disappear after clicking. I suggest it make bigger but leave in the bottom or move to the top corner to the left. Yes, it is possible to move expanding button. Please advise your decision.

Best Regards

1. please give me the css that will make the button bigger.
2. please give me the css to move it center. If it does not work perfectly we will not use it.
3. please give me the css that will disable mouseover expand effect

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-video-button a:hover>span {
    display:none;
    transition: none;
}
body .product-video-button>a {
    min-width: 100px;
    min-height: 100px;
	  border-radius:100px;
}

This code hides the expanding and makes the button bigger and round. At the same time HTML structure does not allow to place the button on the center.

Best Regards

Hi 2 problems in your code

1. Now button is bigger but not the play icon
http://prntscr.com/r0nd1x
2. In mobile view, this button is not responsible. this button does not scale down like others label do ex: new, discount label
http://prntscr.com/r0ngbx

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

.product-video-button a:hover>span {
    display:none;
    transition: none;
}
body .product-video-button>a {
    min-width: 100px;
    min-height: 100px;
	  border-radius:100px;
}

body .product-video-button>a:before {
    display:block;
    font-size: 40px;
     min-width:40px;
     min-height:40px;
     margin-left:30px;
}

Remove all from Global.

Best Regards

[Author]

Posts