Disable owl carousel on product page, when "combined grid" is used

Hi,

We are working on implement “combined grid” design for product thumbnails on product page. looks wonderful… for dekstops, cant seem to figure our how to enable it on all screens.
We need it to be working on all screens as the product information on the right is quite long, therefore we have empty space on small laptops and tablets on the left.

Tried playing around with /woocommerce/single-product/product-image.php file, setting a longer array for “$hide_owl_classes”, with no luck…
as an example:
$hide_owl_classes = array( 'xl', 'lg', 'md', 'sm', 'xs' )

Any information would be great, thanks!

Hello,

Please, send us a screenshot of what exactly do you want to achieve and link to your current product page.

Regards

Hi,

Please see private content.
We understand that you have a css rule for small screens:

.owl-items-md-1:not(.owl-loaded)>div:nth-child(n+2) {
    display: none;
}

which needs changing to flex. However, we cant find how to disable owl carousel for this part completly on all devices.

The CSS and PHP snippets you sent have no connection to this. Yes, mobile devices have a carousel on the single product page and there is no quick tutorial to disable this. Everything is connected in different places PHP, JS, and CSS and designed to be as it is now. Unfortunately, we don’t have an instruction for such kind of customization.

If php snippet in woodmart/woocommerce/single-product/product-image.php is not related to owl scripts for product page images, then what does this snippet control on that file?

$hide_owl_classes = array();

if ( $thums_position == 'bottom_column' || $thums_position == 'bottom_grid' || $thums_position == 'bottom_combined' ) $hide_owl_classes = array( 'lg' );

$gallery_classes = woodmart_owl_items_per_slide( 1, $hide_owl_classes, false, 'main-gallery' );

if ( woodmart_is_main_product_images_carousel() ) $gallery_classes .= ' owl-carousel';

From dev stand point of view, we may understand that if we have certain thumb positioning selected (i.e. bottom combined), then the theme hides owl classes for ‘lg’ devices (large?).

What I want to say is if the product we have bought is coded properly, then it should be an easy way to just enable functions that developers disabled for mobile device. Like in this case, it seems that $hide_owl_classes = array() controls where owl script is disabled – but you are saying it has nothing to do with that.
From this we have further questions:
Then what does $hide_owl_classes do?
Can we simply eliminate this? If yes, how many more irrelevant php calls is out there?

Thanks!

This variable contains helper flags that remove CSS classes in OWL carousel structure to prevent “jumps” before carousel is inited. When combined is enabled, these “jump-prevent” function is disabled for the desktop because OWL carousel is not initiated there. But as we said, it doesn’t mean that it controls carousel turn on/off function.

[Author]

Posts