WooCommerce Product Slider After Posts in Genesis Framework

functions.php

<?php

/**
 * Retrieve top selling products
 *
 * @param (int) $posts_per_page - Number of products to retrieve
 * @return (array) Product posts
 * @author UltimateWoo https://www.ultimatewoo.com
 */
function uw_woocommerce_get_top_selling_products( $posts_per_page = 5 ) {

	$args = array(
		'post_type' => 'product',
		'posts_per_page' => $posts_per_page,
		'meta_key' => 'total_sales',
		'orderby' => 'meta_value_num'
	);

	$products = get_posts( $args );

	return $products;
}


/**
 * Enqueue Slick JS assets
 * @author UltimateWoo https://www.ultimatewoo.com
 */
function uw_woocommerce_product_slider_scripts() {
	
	// Don't enqueue if not on single posts
	if ( ! is_single() ) {
		return;
	}

	wp_enqueue_script( 'slick', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.8.0', true );
	wp_enqueue_script( 'slick-init', get_stylesheet_directory_uri() . '/js/slick-init.js', array( 'jquery', 'slick' ), '1.8.0', true );
	wp_enqueue_style( 'slick-theme', get_stylesheet_directory_uri() . '/css/slick.css' );
}
add_action( 'wp_enqueue_scripts', 'uw_woocommerce_product_slider_scripts' );


/**
 * Output the product slider
 * @author UltimateWoo https://www.ultimatewoo.com
 */
function uw_woocommerce_product_slider_markup() {

	// Get out if not a single post
	if ( ! is_single() ) {
		return;
	}

	?>

	<?php $products = uw_woocommerce_get_top_selling_products(); ?>

	<div class="product-slider">

		<h2 class="slider-title">Our Top Sellers</h2>
	
		<?php foreach ( $products as $product ) : ?>

			<?php $_product = wc_get_product( $product->ID ); ?>
		
			<div id="product-<?php echo $product->ID; ?>" class="product-slide">
				<a href="<?php echo get_permalink( $product->ID ); ?>" class="product-link">
					<img src="<?php echo get_the_post_thumbnail_url( $product->ID, 'full' ); ?>" alt="" class="slide-image aligncenter">
					<h3 class="slide-title"><?php echo $product->post_title; ?></h3>
					<div class="slide-price"><?php echo $_product->get_price_html(); ?></div>
					<a href="<?php echo get_permalink( $product->ID ); ?>" class="slide-button">View Item</a>
				</a>
			</div>

		<?php endforeach; ?>

		<div class="previous-slide">
			<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" points="15.5,21 6.5,12 15.5,3 " stroke="#000000" stroke-miterlimit="10" stroke-width="2"/></svg>
		</div>
		<div class="next-slide">
			<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" points="8.5,3 17.5,12 8.5,21 " stroke="#000000" stroke-miterlimit="10" stroke-width="2"/></svg>
		</div>

	</div>

<?php }
add_action( 'genesis_after_entry', 'uw_woocommerce_product_slider_markup', 5 );

slick-init.js

jQuery(document).ready(function($){
	$('.product-slider').slick({
		dots: true,
		infinite: false,
		speed: 300,
		slidesToShow: 3,
		slidesToScroll: 1,
		slide: '.product-slide',
		prevArrow: $('.previous-slide'),
		nextArrow: $('.next-slide'),
		// centerMode: true,
		responsive: [
			{
				breakpoint: 1024,
				settings: {
					slidesToShow: 3,
					infinite: true,
					dots: true
				}
			},
			{
				breakpoint: 768,
				settings: {
					slidesToShow: 2,
				}
			},
			{
				breakpoint: 480,
				settings: {
					slidesToShow: 1,
				}
			}
		]
	});
});

style.css

.product-slider {
	position: relative;
	margin: 50px 0 100px !important;
}

.product-slide {
	padding: 10px;
	text-align: center;
	-webkit-transition: transform .3s;
	transition: transform .3s;
}

.product-slide:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.product-link {
	display: block;
}

.slide-title {
	color: #000;
}

.slide-price {
	color: #000;
}

.slide-button {
	display: inline-block;
	padding: 10px 20px;
	margin: 10px auto;
	background: #000;
	color: #fff;
}

.slide-button:hover {
	background: #5533ff;
	color: #fff;
}

.previous-slide,
.next-slide {
	width: 25px;
	position: absolute;
	top: 50%;
}

.previous-slide:hover,
.next-slide:hover {
	cursor: pointer;
}

.previous-slide {
	left: -50px;
}

.next-slide {
	right: -50px;
}

.slick-dots li button:before {
	font-size: 20px;
}