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.
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
..... further divs truncated for simplicity
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
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() ) :
echo '<div>' . get_the_post_thumbnail( get_the_ID(), 'medium' ) . '<span>'. get_the_title( get_the_ID() ) .'</span></div>';
// Restore original postdata