Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

As the title says, I'm in search of a continuous slider for my WooCommerce products I have so far tried to accomplish this using custom post types, (with not much luck, because I'm having trouble understanding how they work and how I can include the product entries pics with a link )

Here's the example of the kind of slider I want http://coolcarousels.frebsite.nl/c/57/

If somebody can give me a very basic run-down on how to use custom posts, and more specifically, how to get them to work with the following jQuery slider, that would be greatly appreciated. I'm not asking for all the answers, just someone to hold my hand as I find them myself.

share|improve this question
1  
Hi, Plugin recommendations are off-topic if you would like to change your question to include what you have tried. –  Wyck Jul 17 '13 at 22:35
add comment

1 Answer

up vote 0 down vote accepted

If you view the source for your carousel, you'll see a lot of how it is implemented. The first step would be reproducing their markup with your products. Essentially their markup looks like one #carousel container div and all the items inside their own div.

<div id="carousel">
    <div>
        <img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
        <span>Apple</span>
    </div>
        ..... further divs truncated for simplicity
</div>

To get code like this we'll need a secondary query and then loop through the results. A decent example of secondary loops can be found in the Codex for WP_Query.

You've not specified much other than WooCommerce products, so I'll just go with some basic query args. This will find your most recent products, loop through them and print out the featured image and title for each.

After that it is a question of pasting this code in the desired template, or adding via a hook. And then, loading and initializing the jquery scripts. Take a look at wp_enqueue_script for how to properly load a script. And the initialization script can be seen in your example's source. Pay attention to the part on noConflict wrappers, because you will have to adjust their code to play nicely with WordPress.

$args = array ( 'post_type' => 'product' );
$carousel = new WP_Query( $args );

if ( $carousel->have_posts() ) :

    echo '<div id="carousel">';

    while( $carousel->have_posts() ) :
        $carousel->the_post();
        echo '<div>' . get_the_post_thumbnail( get_the_ID(), 'medium' ) . '<span>'. get_the_title( get_the_ID() ) .'</span></div>';
    endwhile;

    echo '</div><!--#carousel-->';

endif;

// Restore original postdata
wp_reset_postdata();
share|improve this answer
    
This is a fantastic starting point! Thank you so much for the reply. To specify, I would like essentially the products from each category, on their own (brand specific slider) page ( 2 categories based on brand ). Also, perhaps you can help me decipher where I need to place these codes, as I'm completely at a loss of where to place things. I'm fairly proficient in HTML and CSS, but really not all that comfortable with jQuery and PHP, so alot of this is pretty foreign to me. Is there some way I can contact you and receive step-by-step help ? I'll understand if you're busy, but I'm lost. –  TokerCoughin Jul 18 '13 at 17:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.