Video Post Indicator or play button in catalog mode!!

This topic has 11 replies, 2 voices, and was last updated 4 years, 10 months ago by Elise Noromit.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
February 8, 2020 at 12:48 pm #172234

bdcloud
Participant

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!

February 8, 2020 at 8:25 pm #172297

Elise Noromit
Member

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

February 8, 2020 at 9:54 pm #172309

bdcloud
Participant

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?

February 9, 2020 at 10:25 am #172338

Elise Noromit
Member

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

February 9, 2020 at 4:24 pm #172376

bdcloud
Participant

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?

February 9, 2020 at 8:34 pm #172414

Elise Noromit
Member

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

February 10, 2020 at 1:18 pm #172527

bdcloud
Participant

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

February 10, 2020 at 7:50 pm #172588

Elise Noromit
Member

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

February 11, 2020 at 4:38 am #172633

bdcloud
Participant

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

February 11, 2020 at 9:28 am #172688
Elise Noromit
Member
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
February 11, 2020 at 10:51 am #172716

bdcloud
Participant

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

February 11, 2020 at 1:44 pm #172790
Elise Noromit
Member
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