Hi, I think I have a solution, put this code below the previous css code I gave you:
@media (max-width: 849px) {
.product-gallery-stacked .woocommerce-product-gallery__image[data-vwg-video] {
position: absolute !important;
}
}
this should solve your problem, please give me feedback
Thread Starter
YH
(@yhdev)
It works wonderfully.
I hope you’re also able to provide a solution for the normal style of product gallery.
Because while the both CSS is still applied, the video appears to be cropped horizontally, instead of showing the full size (original size of video is square).
Lastly, is there a way that i can place the position of the video after the 1st image? Making the video in the 2nd place. It’d be nice if i can have some control over the position using CSS since the “Show video first in product gallery” doesn’t work for this theme.
You can view the issue using the same link, i’ve just changed the setting to normal as style.
Thank you.
-
This reply was modified 9 months, 4 weeks ago by
YH.
On the same link I don’t see any changes, have you made them or if you are using any caching tools, have you cleared the cache?
The video cannot be in the second position. The only option is in the first and last position. In the first position it works for this topic, you just have to use the basic setting of Product Layout which is Right Sidebar
Thread Starter
YH
(@yhdev)
Yes, it was the cache issue. Thank you.
About having the video in 1st position. I understand it works fine on the standard woocommerce’s default Right Sidebar. But it doesn’t seem to work for Flatsome’s UX builder Rightside bar (which is called normal style). The thumbnail did move to the 1st position but there is no update on the main image area. Could you kindly review the link again? https://yhdev.infy.uk/product/nalini-chair/
Thank you.
Thank you for your message.
Regarding the link you provided, I still don’t see the latest CSS I sent being applied. Are you sure it was uploaded correctly?
As for Flatsome’s UX Builder – I looked into it, and it seems that if you try to edit the product page using UX Builder, it doesn’t allow changes to the gallery. The only effective method appears to be through Appearance → Customize → Product Page → Product Layout.
I tested the “video in first position” feature, and it works with all layout options except for Wide Gallery, Stacked, and Custom. From what I can tell, the Custom layout may be linked to a template you’ve built via UX Builder. Since each user can build their own custom templates, it’s not feasible to adapt the plugin to every variation.
Because of this, I recommend using one of the supported layouts where everything works smoothly. I’m sorry if this doesn’t fully meet your needs, but I hope you understand that supporting heavily customized setups is beyond the plugin’s current scope.
Let me know if you need further help!
Thread Starter
YH
(@yhdev)
Thank a lot for helping out.
I finally found some of the issues. I discovered the previous issue, on why we’re seeing different things. The dummy site’s hosting server-side was caching different versions, so clearing my site’s cache wasn’t enough. Adding ?v=2 to the URL allow me to see the difference in incognito.
So kindly check out the site again at https://yhdev.infy.uk/product/nalini-chair/?v=2
It is currently set to Normal style layout. With the “Adjust the video size according to the theme settings” unchecked.
Cropped video issue
You should be able to see, the video on the main image area appears cropped in both desktop and mobile version. The current style is set to normal. The original video dimension is of square proportion. When i tried to check the “Adjust the video size according to the theme settings”, the desktop view shows the correct square dimension of the video, however the mobile view would then become a vertical portrait. Can you please help with a CSS to fix this issue?
With your previous updated CSS, i’m certain i’ve applied in into the Additional CSS for the theme. And i think the CSS doesn’t show up because it’s now on different class. The class you’ve given is .product-gallery-stacked but the style product gallery is normal. Because i’ve changed the layout from Stack to Normal. Your latest CSS worked for the stack layout in the UX builder. Sorry for the confusion. Could you kindly help with a CSS for the normal layout as well? These are the only two layout i’ll be using.
Video position issue.
The UX builder provides page customization the standard settings can’t. Most Flatsome users chose this theme for UX builder for such customization. But you are right, that the standard method through Appearance → Customize → Product Page → Product Layout, indeed works for the 1st position video. So I can only hope you’ll consider adapting your awesome plugin to the UX builder in future. The options in the UX Builder are also limited to basically Normal, Vertical, Full-width and Stack akin to the standard product layout.
Thanks a lot.
Thread Starter
YH
(@yhdev)
Update:
I found a possible solution on how to make it work (video on 1st position) while still being on UX builder instead of using the standard layout. I created a shortcode for the standard product gallery by adding this into the functions.php
// in your plugin or child theme functions.php
add_shortcode( 'vwgproductgallery', 'vwgproductgallery_shortcode' );
function vwgproductgallery_shortcode( $atts ) {
if ( ! is_product() ) {
return ''; // only run on single product pages
}
global $product;
// start output buffer
ob_start();
// WooCommerce core function that outputs the product image gallery
// in modern versions this calls the same template part that Customizer uses
if ( function_exists( 'woocommerce_show_product_images' ) ) {
woocommerce_show_product_images();
} else {
// fallback for very new WooCommerce versions
do_action( 'woocommerce_before_single_product_summary' );
}
return ob_get_clean();
}
Since the standard gallery layout is already working, I simply paste the shortcode [vwgproductgallery] into my UX Builder, and the Product Gallery have the video in 1st position when the “Show video first in product gallery” is checked.
But it then led me to realize an old issue. That the image in the main image area is still not reflecting the correct active thumbnail in the slider. i recreated it on this page https://yhdev.infy.uk/product/ianna-pendant-light/?v=2
Could you please provide a solution for mismatched image and the thumbnail? as well as the issue of video being cropped?
Thank you.
-
This reply was modified 9 months, 3 weeks ago by YH.
Hello, I don’t think this code you posted works well, at least from what I see on the links, so I won’t be able to help you with the Cropped video issue. If you decide to use this code, you need to find a solution, at least I don’t see a solution at this stage.
