CODEWITHSUNDEEP
phpjquerywordpresswoocommercecarousel
Alex Szymanowski
Alex Szymanowski

Reputation: 37

Display/wrap Woocommerce products in Carousel Slider

I want to display the products via shortcode IE: [product_category category="test" per_page="12"] In a carousel.

I have Flexslider setup, What I have tried is adding this to loop-start.php

<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
                selector : ".products > li",
                animation : "slide",
                controlsContainer : ".flex-container"
            });
});
</script> 

<div class="flexslider">
<ul class="products">

and closing the div after ul on loop-end.php

Though I'm not having any luck with it at all :/ It works on a test html file just fine.

The reason I want it like this and not just use some plugin is I have overlay popup that wont work with any Carousel plugin Ive tried and I also want to display multiple categories this way.

Thanks for any help

Upvotes: 0

Views: 2553

Answers (1)

helgatheviking
helgatheviking

Reputation: 26319

Initially I thought your markup didn't match, but then I saw that you've modified the loop. Though I think the jQuery selector ul.products would work. Because it should be container and its direct children as slides.

I would advise you to look in your browsers developer console to see what kind of script errors you are getting. But I suspect you are seeing something along the lines of function not defined since you aren't using no conflict wrappers. You have no idea how much this frustrated me in the beginning.

Your script should therefore look something like (though I think you should add it to the footer:

function so_28486348_print_footer(){ ?>
    <script type="text/javascript" charset="utf-8">
    jQuery(window).load(function() {
          $('ul.products').flexslider({
                    selector : "li.product",
                    animation : "slide",
                    controlsContainer : ".flex-container"
           });
    });
    </script> 
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer

I would also advise loading all your scripts (at least the external scripts) via wp_enqueue_script (see the codex link above)

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Upvotes: 1

Related Questions