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="https://wordpress.stackexchange.com/questions/106915/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();