Слайдер для проданных товаров в WooCommerce

Question

Мне нужно сделать карусель для дорогих продуктов. Для этого я использую slick-slider .

Подключение скрипта:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>

Инициализация скрипта:

$(document).ready(function() {     

    $('.multiple-items').slick({
        infinite: true,
        autoplay: true,
        slidesToShow: 4,
        slidesToScroll: 4
    });
});

Код из файла up-sells.php:

if ( $upsells ) : ?>

<section class="up-sells upsells products">

    <h2><?php esc_html_e( 'You may also like&hellip;', 'woocommerce' ); ?></h2>

    <?php woocommerce_product_loop_start(); ?>

        <?php foreach ( $upsells as $upsell ) : ?>

            <?php
                $post_object = get_post( $upsell->get_id() );

                setup_postdata( $GLOBALS['post'] =& $post_object );

                wc_get_template_part( 'content', 'product-carousel' );

        <?php endforeach; ?>

    <?php woocommerce_product_loop_end(); ?>

</section>

<?php endif;

wp_reset_postdata();

---

ОБНОВЛЕНИЕ: Файл content-product-carousel.php:

<div class="carousel"><div class="multiple-items">
    <div <?php post_class( $classes ); ?>>
        <?php
            do_action( 'woocommerce_before_shop_loop_item' );
            do_action( 'woocommerce_before_shop_loop_item_title' );
            do_action( 'woocommerce_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item' );
        ?>
   </div>  
</div></div>

CSS:

.slick-slider {width: 100%; float: left;}
.slick-slide {cursor: pointer;}
.multiple-items .slick-slide {margin: 0 15px;}
.carousel {padding: 0 3%; float: left; width: 100%; box-sizing: border-box;}

К сожалению, я не могу сделать карусель продукта. Продукты показаны в одном столбце, а скрипт слайдера не хочет работать. Мне нужна ваша помощь. Как сделать так, чтобы карусель продавалась?

Answer 1

Я предлагаю вам создать дубликат вашего content-product.php и переименовать его как хотите, например. В этом файле content-product-carousel.php вы создадите скользкий слайдер. но вам нужно изменить следующую строку в вашем up-sells.php

wc_get_template_part( 'content', 'product' ); 

до

wc_get_template_part( 'content', 'product-carousel' );

это ссылка на дублированный файл.