Home › Forums › WoodMart support forum › Disable owl carousel on product page, when "combined grid" is used

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 21, 2019 at 10:15 am #114107

    eimulex
    Participant

    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!

    March 21, 2019 at 12:06 pm #114120

    Artem Temos
    Keymaster

    Hello,

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

    Regards

    March 21, 2019 at 12:23 pm #114127

    eimulex
    Participant

    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.

    March 21, 2019 at 12:54 pm #114131

    Artem Temos
    Keymaster

    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.

    March 21, 2019 at 2:30 pm #114164

    eimulex
    Participant

    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!

    March 21, 2019 at 2:47 pm #114177

    Artem Temos
    Keymaster

    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
Viewing 6 posts - 1 through 6 (of 6 total)