Как подключить свой кастомный слайдер вместо стандартного woocommerce flexslide?

Question

[sasha761]

Увидел в теме Fona используют slick slider и они подключили его в карточку товара . Хочу сделать так же только не знаю как.
Сейчас разметка картинок (слайдера) в карточки товара меня полностью устраивает но когда отключаю add_theme_support( 'wc-product-gallery-slider' );
то убираются необходимая мне разметка для построения слайдера.

Answer 1

[yarovikov]

Я тоже слик использую в товаре.

Нужно всего лишь сделать свой шаблон product-image.php с нужной разметкой и классами, на который повесить слик (верстку придется подогнать ну и использовать вертикальные превьюшки в слике)



Ну и отключить ненужное:

remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );

Comments

[sasha761]

спасибо большое , нашел файлик только не совсем понятно как его правильно редактировать , был бы очень благодарень если б вы скинули скрин как вы сделали верстку там

[yarovikov]

sasha761, на моем скрине папка шаблона, а не папка woo. Просто копируете нужные файлы из вукоммерца в папку с темой, сохранив иерархию. И они автоматически переназначатся.

[sasha761]

yarovikov, это я знаю , так и делаю .
Мне интересен сам код как вы построили что б слик заработал .
Я сейчас застопорился на том что фильтр

function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
...

Выводит все изображения с ссылками, и при нажатии на картинку автоматически открывает лайтбокс или же перекидывает на страницу картинки (если отключить лайтбокс).
И вроде как прописал в woocommerce.php новый фильтр с измененной разметкой для картинок но он почему-то не работает

[yarovikov]

sasha761, я юзал свои классы

<?php
global $product;
$attachment_ids = $product->get_gallery_image_ids();
?>
<div class="product-gallery-slider">
	
	<div class="product-gallery-slider-big">	
	      
    	<?php
		foreach( $attachment_ids as $attachment_id ) { 
	    
	    	$image_link = wp_get_attachment_image_src( $attachment_id, 'big-square' )[0]; ?>
			
			<div data-src="<?php echo $image_link; ?>"  class="product-gallery-slider-big-zoom">
        		<img src="<?php echo $image_link; ?>" class="wp-post-image" />
        	</div>
		
		<?php
		}
		?>
    
	</div>
    
    <div class="product-gallery-slider-thumbs">
	    
	    <?php
		foreach( $attachment_ids as $attachment_id ) { 
	    	
	    	$image_link = wp_get_attachment_image_src( $attachment_id, 'big-square' )[0]; ?>
			
			<div class="slider-nav__item">
        		<img src="<?php echo $image_link; ?>" class="wp-post-image" />
        	</div>
		
		<?php
		}
    	?>
    				
	</div>

</div>

$('.product-gallery-slider-big').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: true,
		fade: true,
		arrows: false,
		asNavFor: '.product-gallery-slider-thumbs',
		responsive: [{
			breakpoint: 777,
			settings: {
				fade: false,
				dots: true,
			}
		}, ]
	});
	$('.product-gallery-slider-thumbs').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		vertical: true,
		asNavFor: '.product-gallery-slider-big',
		dots: false,
		arrows: false,
		focusOnSelect: true,
		responsive: [{
			breakpoint: 777,
			settings: {
				vertical: false,
				fade: false,
			}
		}, ]
	});

[sasha761]

yarovikov, Спасибо Огромное!!!!

[alexru3k]

yarovikov, я сделала слайдер по вашему примеру, спасибо большое! Единственный вопрос как в вариативном товаре сделать прокрутку к нужному слайду при выборе вариации? у slick вроде есть возможность прокрутки по индексу (slickGoTo), но я не могу понять как получить нужный индекс