Product videos bugs: Play button doesn’t appear on desktop, preview doesn’t appear on iOS

Hello @alexjourneyworldwide,

The video display may vary depending on the device you are using. If you would like the “Play” icon to appear on your desktop browser, you can achieve this by adding some custom CSS, for example:

.main-images .woocommerce-product-gallery:has(video):before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    content: '\e901';
    font-family: 'xstore-icons';
    font-size: 50px;
    z-index: 999;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main-images .woocommerce-product-gallery:has(video) {
    position: relative;
}

.main-images .woocommerce-product-gallery:has(video:focus):before {
    display: none;
}

Could you please check whether the video is displayed correctly on another device?

Best regards,
The 8Theme Team

Hello @alexjourneyworldwide,

We believe that some of your friends or colleagues might make such tests from their devices. We kindly ask you to check the issue from their device and share your feedback with us.

Best regards,
The 8Theme Team

Hello @alexjourneyworldwide,

Unfortunately, there are no available settings to display the video in the second position on mobile devices. However, you can display it as the last item on mobile devices by adding the following filter to your child theme’s functions.php file:

add_filter('theme_mod_product_video_position', function($value) { return wp_is_mobile() ? 'last' : $value; });

Additionally, since it appears that you are using the LiteSpeed Cache plugin, we recommend following the instructions provided here: https://docs.litespeedtech.com/lsws/cp/cpanel/long-run-script/ to set “no abort.” Please also try increasing the max_execution_time value and let us know if this resolves the issue.

As an alternative, you may choose to disable the video gallery item on mobile devices and display only static images. To do this, copy the file xstore/woocommerce/single-product/product-image.php to xstore-child/woocommerce/single-product/product-image.php and modify it using conditions similar to those shown here: https://gyazo.com/ced0b3f112f30e28774288ae66237b7c (before modification: https://gyazo.com/fd0e338c9e5a6736b109c4013a03ad5a).

Best regards,
Jack Richardson
8Theme Team

Hello @alexjourneyworldwide,

Could you please review the article mentioned in the previous reply? It provides detailed information about the settings, as shown here: https://gyazo.com/4bd2348da1c2b89042bc37ced7fe0603.

For optimal configuration, we recommend contacting your hosting provider’s support team, as these questions fall outside the scope of our theme support policy.

If you have any other questions, please feel free to submit them on our support forum.

Best regards,
Jack Richardson
8Theme Team

Hello @alexjourneyworldwide,

We have copied the xstore/woocommerce/single-product/product-image.php file to xstore-child/woocommerce/single-product/product-image.php and implemented several modifications to complete items 1 and 2 from your request.

We kindly suggest clearing your browser and Redis cache to check whether this resolves the issue.

Best regards,
Jack Richardson
The 8Theme Team