WP-CITY.RU

Авторские шаблоны WordPress

Недорогой, функциональный сайт или Интернет-магазин
это реально!


Заказать интернет-магазин сейчас

Слайдер категорий для WooCommerce

product_cat_WooCommerce

Всем доброго дня, не так давно при разработки шаблона для интернет магазина на WooCommerce, была поставлена задача вывести слайдер категорий магазина с миниатюрами.
Как это сделать сейчас расскажу и покажу.
Начнем с того как вообще вывести категории WooCommerce, на главной странице вашего магазина, по умолчанию категории выводятся вместе с товарами, в тех же условиях что и сами товары, по своей практике скажу сразу это не удобно и не красиво.
Приступим:
Подготовим место где будем выводить наш блок категорий (заметьте что пока мы просто выведем наши категории без слайдера)и вставим туда код:

 <?php
$taxonomyName = "product_cat";
$prod_categories = get_terms($taxonomyName, array(
    'orderby'=> 'name',
    'order' => 'ASC',
    'hide_empty' => 1
));  

foreach( $prod_categories as $prod_cat ) :
    if ( $prod_cat->parent != 0 )
        continue;
    $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
    $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
    $term_link = get_term_link( $prod_cat, 'product_cat' );
    ?>

<a href="<?php echo $term_link; ?>" style="float:left">
    <img  src="<?php echo $cat_thumb_url; ?>" alt="" /><br/> 
     <?php echo $prod_cat->name; ?> </a> 

<?php endforeach; 
wp_reset_query(); ?>

Вот и все наши категории выведены.

Теперь давайте выведет эти же категории в виде слайдера, как по мне так намного функциональнее и красивее!
Для начала скачаем сам скрипт нашего слайдера, я использовал owl-carousel .
Подключим скрипты слайдера к нашему шаблону, открываем файл шаблона footer.php и после закрывающего тега /body пропишем наши скрипты и стили:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.min.js"></script>

 <script type="text/javascript">
jQuery(function($){
$("#owl-demo").owlCarousel({
    items : 5,
	 pagination : false,
    lazyLoad : true,
    navigation : true,
	 autoPlay : true,
    stopOnHover : true,
	navigationText : ["<img src='<?php bloginfo('stylesheet_directory'); ?>/images/products-slider-arrows1.png' style='margin:-30px 0 -80px 0;' >","<img src='<?php bloginfo('stylesheet_directory'); ?>/images/products-slider-arrows2.png' style='margin:-30px 0 -80px 0;'>"],
});
</script>

<link rel="stylesheet" type="text/css" media="all" href="css/<?php bloginfo('stylesheet_directory'); ?>/owl.carousel.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/<?php bloginfo('stylesheet_directory'); ?>/owl.theme.css" />

Да! И не забываем положить стили в папку со стилями а скрипты положить в папку со скриптами!
Ну вот осталось только вывести наш слайдер в шаблоне и немного его настроить под ваши нужды.

<div id="owl-demo" class="owl-carousel">
 <?php
$taxonomyName = "product_cat";
$prod_categories = get_terms($taxonomyName, array(
    'orderby'=> 'name',
    'order' => 'ASC',
    'hide_empty' => 1
));  

foreach( $prod_categories as $prod_cat ) :
    if ( $prod_cat->parent != 0 )
        continue;
    $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
    $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
    $term_link = get_term_link( $prod_cat, 'product_cat' );
    ?>
 
  <div class="item"><a href="<?php echo $term_link; ?>"><img class="lazyOwl" data-src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $cat_thumb_url; ?>&h=150&w=150&zc=1" alt="" style="border:1px solid #e6e6e6;

margin:0 14px 0 0;
 border-radius: 200px; background:#FFF; border:2px solid #FFFFFF" />
  <h4 style="text-decoration:none; text-align:center; padding-bottom:30px"><?php echo $prod_cat->name; ?></h4></a></div>
 
<?php endforeach; 
wp_reset_query(); ?>
</div>

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

  1. Дмитрий

    Добрый день, не могли бы Вы подсказать в какие именно файлы необходимо вставлять куски кода , а именно не понял в какой файл вносить изменения — первый кусок кода.

© 2012–2017 / wp-city.ru / Авторские шаблоны WORDPRESS / Создание сайтов

evgeniy38868     krizisvt@i.ua