Return to previous page

Help resolve these 3 issues in Single Product Pages

This topic has 13 replies, 2 voices, and was last updated 1 years, 5 months ago ago by Rose Tyler

N Nandan

Participant

June 10, 2023 at 17:37

Hi,
I have 3 issues in single product page:
Issue #1:
I’m unable to find an option to remove “download this video” option on the single product page. This is critical because, without this option all my videos can be easily downloaded by anyone.

Please guide how to remove this option which is now default present in all videos. (Please check the screenshot).

Issue #2:
I’m unable to add Wishlist button on top of the product image gallery (It can be somewhere next to “Sale” label.)

Issue #3:
I’m unable to add 2 buttons (Add to Cart & Wishlist) side-by-side in single product page. Can you please let me know how to do this.

These features are now essential especially in mobile view. Check a reference screenshots.

Kindly help resolve these issues or provide alternatives. The main intention is to achieve end result at least by 80~90%.

Thank you team!

Please, contact administrator
for this information.

#359083 Copied Theme version: 9.1.6 WooCommerce version: 7.7.2

12 Answers
Rose Tyler

Support staff

June 12, 2023 at 07:13
Hello, N Nandan,

Thank you for contacting us and for using XStore.

Your screenshots cannot be opened but we think we understood what you described.
1/ In case you mean this button on single product pages → https://prnt.sc/4GW212hieQrQ then we can make sure that this functionality was there all the time but in last updates we made some css improves so this Product Video area was restyled. In case you would like to hide “Add product gallery video“ button you can activate XStore White label plugin (that was installed on your web-site → https://prnt.sc/WGGqkkYs9v8Y ) and add the next custom CSS to appropriate options ( https://prnt.sc/iXTwv8EmLOyI ):
```
#woocommerce-product-videos .add_product_video {
    display: none;
}
```
To hide full section ( https://prnt.sc/2CfKC29iYTAc ) you can add next custom CSS:
```
#woocommerce-product-videos {
    display: none;
}
```
2/ This option is unavailable if you are using Single Product Builder but this option exists if you are using non SPBuilder functionality. But you can figure it out by placing the Wishlist element in the same section you have product gallery in ( https://prnt.sc/X_vibzeuvesy ) and adding custom CSS:
```
.et_product-block .single-wishlist {
    position: absolute;
    right: 210px;
    top: 11px;
}
```
The result you can get is next → https://prnt.sc/HGBGC0cBXdC1 . But configuring the wishlist with setting up “Only icon“ option to active and background with making it transparent you can get next result → https://prnt.sc/ySkVqhBgzdZA
3/ Sorry, but we could not check your screenshots so it is impossible to help you in answering for this question. But you can check Wishlist options when your Single product builder will be disabled.

Kind Regards,
8theme team
#359166 Copied
Rose Tyler

Support staff

June 12, 2023 at 08:09
About “I’m unable to find an option to remove “download this video” option on the single product page.“ =>
We added next code to your child-theme/functions.php
```
add_filter('single_product_main_gallery_video_attributes', function($atts = array()) {
    $atts[] = 'controlsList="nodownload"';
    return $atts;
});
```
It prevents showing “download“ button on video accordion to Chrome browser docs → https://developer.chrome.com/blog/media-updates-in-chrome-58/#controlslist

Kind Regards,
8theme team
#359175 Copied
N Nandan

Participant

June 13, 2023 at 16:37

Hi, Thank you. Most of my problems are solved now. But here are a few challenges:
1) When I added the below custom CSS (as suggested by you) and switched on “Icon Only”… It appeared clean & neat on desktop mode but it was not visible on top of the product image in Mobile or tablet mode. Could you please help me make it appear on Mobile & Tablet mode as well? (similar to desktop mode as seen in this screenshot: https://prnt.sc/ySkVqhBgzdZA)?
.et_product-block .single-wishlist {
position: absolute;
right: 210px;
top: 11px;
}
[As of now, I have removed it as its not appearing in mobile & tablet mode].

2) In the frontend of the single product page, the “download” option in videos is now hidden… Thank you!
But… “Playback speed” & “Picture-in-picture” is still visible. Can you please help me hide everything on the 3 dots at the right bottom corner (including the 3 dots at the right)?
[Please keep the play, volume & full-screen option the same as it is. Just the 3 dots & everything inside those 3 dots at the right bottom corner of the video player should be removed].

Thank you.

#359321 Copied
Rose Tyler

Support staff

June 14, 2023 at 08:10
Hello, N Nandan,

1/ It is not possible to make perfect position next to “Sale“ label so we decided to give you a CSS snippet to make left position → https://prnt.sc/mJ7RUh9iko_8 , https://prnt.sc/j11Xp3scv0Wu , https://prnt.sc/g9Oyf1J6jC7e .
To achieve this result you still need to place Wishlist element above Product gallery in SPBuilder and add next custom CSS:
```
.et_product-block .single-wishlist {
    position: absolute;
    left: 23%;
    top: 11px;
    z-index: 1;
    width: auto;
}
@media only screen and (max-width: 649px) {
    .et_product-block .single-wishlist {
        left: 5%;
    }
}
```
2/ We modified the code sent to you previously to the next one:
```
add_filter('single_product_main_gallery_video_attributes', function($atts = array()) {
    $atts[] = 'controlsList="nodownload noplaybackrate"';
    $atts[] = 'disablepictureinpicture';
    return $atts;
});
```
So now you have hidden dots (and everything inside) → https://prnt.sc/e8svZ2Gw059n

Kind Regards,
8theme team
#359362 Copied
N Nandan

Participant

June 14, 2023 at 16:04

Thank you now the 3 dots are removed.
Also, the wishlist alternative that you provided is good enough for me & I really appreciate that you are providing an alternative.

1 last problem:
I’m unable to place the video on any single product page just after the first primary product image. Can you help me make the product video added in a single product page to appear in the frontend for customers/visitors as a second item in the product gallery? (the first being the primary product image).

Details: If I select the product video to appear first (via theme builder/editor), then my customers in the frontend will see a blank video player as soon as the single product page loads in the frontend. So to avoid it, I want the primary image on the single product page to appear first when the customer visits any single product page, but instead of the second image appearing next, can you please make the product video to appear second in the product gallery?
**Right now there are only 2 options… either the product video can only appear first or last in the product gallery (for customers/public in the frontend). Can you please make it appear second in the product gallery?

If this 1 thing is done, I can start uploading real products & go live!
Thank you!

#359411 Copied

Rose Tyler

Support staff

June 15, 2023 at 07:26

Hello, N Nandan,

As we understood you right you want to make the position of the video to be 2nd.
First image + video + image 2 + image 3 + etc.
By default, we propose you the option to have the video on first position or on last position (https://prnt.sc/QoFmu83C48Qo) that is possible to do without the “bad coding” technique that we don’t use in our projects.
If you want to customize your single product gallery in some unique way and place the video in the specific position 2nd or 3rd one then you should contact to customization service such as WPKraken team because according to our support policy, it does not include customization service -> https://prnt.sc/dT5j95yU9ems but we may assist you with the paths of files which you need to modify.
xstore/woocommerce/single-product/product-image-builder.php file should be copied to your child-theme/woocommerce/single-product/product-image-builder.php and then you may customize it to your needs.

Kind Regards,
8theme team

#359438 Copied

N Nandan

Participant

June 15, 2023 at 17:33

Alright. I do not want to do something that is deemed as a “bad coding” technique. I respect it when the theme author’s team tells that.

But alternatively, can you please help me get below mentioned at least as an alternative?

Expected result:
Can you help me make the product video autoplay & play audio (without being muted) together at the same time?

Problem: (In any single product page frontend) If a product video is added as auto-play, then the audio is muted by default and it has to be manually unmuted.

Details(why its important):
Currently whenever a visitor visits a single product page and the product video is in autoplay mode, then the visitor has to again click to unmute (and most of the time my visitors end up watching the product video content without audio & this gives a bad feel/experience of the product catalog).

Please help me make the product video in frontend for visitors be unmuted & autoplayed at the same time.

#359512 Copied

Rose Tyler

Support staff

June 16, 2023 at 08:32

Hello, N Nandan,

Once we try to check the video attributes with dev tools we are force redirected to next page → https://prnt.sc/GWsewhBpPaSB . But we already found a way to obtain this question.
About making video autoplay + loop then you should know that such “bug” question is not related to our theme but rather to the browser customer uses.
“Some modern browsers like chrome will not auto-play your video if it’s not muted. The general rule of many browsers is that a user must opt-in to certain actions before they can happen.
So we will have to adjust our code above by adding the muted attribute to get it to auto-play.
”
Here is official docs where you can check such question raised up → https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes. It means that you can only autoplay video if it is muted or not making an autoplay at all.
Thanks for understanding that it is really not related to our theme!

Kind Regards,
8theme team

#359543 Copied

N Nandan

Participant

June 16, 2023 at 08:54

I have disabled inspect element option.
I can enable it if you can actually help me give the code with which the product video will be auto-played and unmuted at the same time.
Please confirm and I will enable inspect element & developer tools in the front end for a short period until you need it.

Thank you!

Please contact administrator
for this information.

#359547 Copied

Rose Tyler

Support staff

June 16, 2023 at 09:01

Hello, N Nandan,

We are the support team of XStore theme, so we can assist with questions that are directly related to existing theme functionality only.

About making video autoplay + loop, you should know that such “bug” question is not related to our theme, but rather to the browser customer uses.
“Some modern browsers like chrome will not auto-play your video if it’s not muted. The general rule of many browsers is that a user must opt-in to certain actions before they can happen.
So we will have to adjust our code above by adding the muted attribute to get it to auto-play.”
Here is the official docs where you can check such question raised up → https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes. It means that you can only autoplay video if it is muted or not making an autoplay at all.

Thank you for understanding that this is not related to our theme and, unfortunately, we are unable to provide assistance in this matter.

If you have any other questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

#359549 Copied

N Nandan

Participant

June 16, 2023 at 13:27

This is very clear and well-explained. Thank you for the clarity. I understand the author’s limitation on the support levels. I really appreciate your detailing and answering each of my specific points. I will definitely look forward to extending your team’s support for the upcoming year as well. Good luck!

#359573 Copied

Rose Tyler

Support staff

June 16, 2023 at 13:36

Hello, N Nandan,

Thank you for being our сustomer.
We wish you all the best!

Kind Regards,
8theme team

#359575 Copied
Tagged: help, resolve issues, single product pages, template, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘Help resolve these 3 issues in Single Product Pages’' has been successfully resolved, and the topic is now closed for further responses

Help resolve these 3 issues in Single Product Pages

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection