Product Tab glitching when showing products even on your demos (SEE IMAGES)

Hi,

Products tabs are showing only half of the product image, you have to click a couple of times to make them show correctly. Not only on my end but on the demo site too.
See attached images.

I have to say that this theme is really well designed and we are really happy with our purchase that’s why we bought another license and probably will buy more

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following PHP code snippet to the child theme functions.php file to do this

function woodmart_owl_carousel_init( $atts = array() ) {
    extract( shortcode_atts( woodmart_get_owl_atts(), $atts ) );
    $func_name = 'carousel_' . $carousel_id;
    $func_name = function() use( $carousel_id, $slides_per_view, $autoplay, $autoheight, $speed, $hide_pagination_control, $hide_prev_next_buttons, $scroll_per_page, $wrap, $dragEndSpeed, $custom_sizes, $center_mode, $post_type, $sliding_speed, $animation, $content_animation ) {
        
        $items = woodmart_get_owl_items_numbers( $slides_per_view, $post_type );
        
        if ( ! empty( $custom_sizes ) ) $items = $custom_sizes;
        
        ob_start();
        ?>

            jQuery( document ).ready(function( $ ) {

                var owl = $("#<?php echo esc_js( $carousel_id ); ?> .owl-carousel");

                $( window ).bind( "vc_js", function() {
                    owl.trigger('refresh.owl.carousel');
                } );

                var options = {
                    rtl: $('body').hasClass('rtl'),
                    items: <?php echo esc_js( $items['desktop'] ); ?>, 
                    responsive: {
                        979: {
                            items: <?php echo esc_js( $items['desktop'] ); ?>
                        },
                        768: {
                            items: <?php echo esc_js( $items['desktop_small'] ); ?>
                        },
                        479: {
                            items: <?php echo esc_js( $items['tablet'] ); ?>
                        },
                        0: {
                            items: <?php echo esc_js( $items['mobile'] ); ?>
                        }
                    },
                    autoplay: <?php echo ($autoplay == 'yes') ? 'true' : 'false'; ?>,
                    <?php if ( $autoplay == 'yes' ): ?>
                        autoplayHoverPause: <?php echo apply_filters( 'woodmart_autoplay_hover_pause', 'true' ); ?>,	
                    <?php endif; ?>
                    autoplayTimeout: <?php echo esc_js( $speed ); ?>,
                    dots: <?php echo ($hide_pagination_control == 'yes') ? 'false' : 'true'; ?>,
                    nav: <?php echo ($hide_prev_next_buttons == 'yes') ? 'false' : 'true'; ?>,
                    autoHeight: <?php echo ($autoheight == 'yes') ? 'false' : 'true'; ?>,
                    slideBy:  <?php echo ($scroll_per_page == 'yes') ? '\'page\'' : 1; ?>,
                    navText:false,
                    center: <?php echo ($center_mode == 'yes') ? 'true' : 'false'; ?>,
                    loop: <?php echo ($wrap == 'yes') ? 'true' : 'false'; ?>,
                    dragEndSpeed: <?php echo esc_js( $dragEndSpeed ); ?>,
                    onRefreshed: function() {
                        $(window).resize();
                    }	
                    <?php if( $sliding_speed ): ?>
                    ,smartSpeed: <?php echo esc_js( $sliding_speed ); ?>,
                    dragEndSpeed: <?php echo esc_js( $sliding_speed ); ?>
                    <?php endif; ?>

                    <?php if( $animation ): ?>
                    ,animateOut: '<?php echo esc_js( $animation ); ?>'
                    ,mouseDrag: false
                    <?php endif; ?>

                    <?php if( $content_animation ): ?>
                    ,onTranslated: determinePseudoActive
                    <?php endif; ?>

                };

                owl.owlCarousel(options);

                owl.imagesLoaded(function(){
                    owl.trigger('refresh.owl.carousel');
                });

                <?php if( $content_animation ): ?>
                    determinePseudoActive();

                    function determinePseudoActive() {

                        var id = owl.find('.owl-item.active').find('.woodmart-slide').attr('id');

                        owl.find('.owl-item.pseudo-active').removeClass('pseudo-active');

                        var els = owl.find('[id="' + id + '"]');

                        els.each(function() {
                            if( ! $(this).parent().hasClass('active') ) {
                                $(this).parent().addClass('pseudo-active');
                            }
                        });
                    }
                <?php endif; ?>

            });
        <?php
        return ob_get_clean();
    };

    if( $carousel_js_inline == 'yes' ) {
        echo '<script type="text/javascript">' . $func_name() . '</script>';
    } else {
        wp_add_inline_script( 'woodmart-theme', $func_name(), 'after' );
    }
}

Regards

Thanks for the quick reply,

I’ve inserted the code in the Woodmart-child theme functions but the problem persists.

Please, provide us your admin and FTP access so we can login and check this on your side.

Thank you in advance.

[Author]

Posts