Как стилизовать галерею товара, чтоб миниатюры были вертикально слева, а большая фото справа?

Question

[trenton]

Там же встроенный flex slider, может быть отключить дефолтный вывод через хук и приделать свой?

В верстке(не моей,но уже взялся) статика выглядит как-то так, очень не-френдли к дефолтному вукоммерсу, с дата-атрибутом и id-шниками.
Понятия не имею как это сделать динамически, наверно проще самому через встроенные инстументы.

<div class="col-lg-5">
    <div class="product-img">
        <div class="product-img-left product-thumb nice-scroll">
            <a class="pic pic-active" href="#product-1">
                <img src="img/product/thumb-1.jpg" alt="">
            </a>
            <a class="pic" href="#product-2">
                <img src="img/product/thumb-2.jpg" alt="">
            </a>
            <a class="pic" href="#product-3">
                <img src="img/product/thumb-3.jpg" alt="">
            </a>
            <a class="pic" href="#product-4">
                <img src="img/product/thumb-4.jpg" alt="">
            </a>
        </div>
        <div class="product-right">
            <div class="product-slider-big owl-carousel">
                <img data-hash="product-1" class="product-big-img" src="img/product-1.jpg" alt="">
                <img data-hash="product-2" class="product-big-img" src="img/product-3.jpg" alt="">
                <img data-hash="product-3" class="product-big-img" src="img/product-2.jpg" alt="">
                <img data-hash="product-4" class="product-big-img" src="img/product-4.jpg" alt="">
            </div>
        </div>
    </div>
</div>

Comments

[Антон Литвиненко]

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

[trenton]

Значит, это вобще с галереями проблемный момент, а не просто мне не попадалось решение?
Там в любом случае придется потанцевать с бубном?

[yarovikov]

trenton, причем тут танцы с бубном? Не устраивает стандартное решение - делаете свое, обычная практика переопределения шаблона галереи.

[trenton]

yarovikov, был бы образец или пример, как это делать правильно. статья, видео, что-нибудь

Answer 1

[yarovikov]

trenton, да просто в вашем шаблоне создаете папку согласно иерархии плагина, таким образом файлы переопределяются, и вы можете делать в них свою верстку и функционал:



Пример верстки с swiper (который нужно не забыть подключить)

<?php

defined('ABSPATH') || exit;

if (! function_exists('wc_get_gallery_image_html')) {
    return;
}

global $product;
$attachment_ids = $product->get_gallery_image_ids();

?>

<div class="product-gallery">
    
    <div class="product-gallery-slider swiper-container">
        
        <div class="swiper-wrapper">    
          
            <?php
            if ($attachment_ids) {
                foreach ($attachment_ids as $attachment_id) {
                    $image_link = wp_get_attachment_image_src($attachment_id, 'large')[0]; ?>
                
                    <div class="swiper-slide">
                        <div>
                            <img src="<?php echo $image_link; ?>" />
                        </div>
                    </div>
            
                <?php
                }
            }
            ?>
        
        </div>
        
        <div class="swiper-button swiper-button_prev"><i class="icon icon-arrow-left"></i></div>
        <div class="swiper-button swiper-button_next"><i class="icon icon-arrow-right"></i></div>
    
    </div>
    
    <div class="product-gallery-thumbs swiper-container">
        
        <div class="swiper-wrapper">    
          
            <?php
            if ($attachment_ids) {
                foreach ($attachment_ids as $attachment_id) {
                    $image_link = wp_get_attachment_image_src($attachment_id, 'thumbnail')[0]; ?>
                
                    <div class="swiper-slide">
                        <img src="<?php echo $image_link; ?>" />
                    </div>
            
                <?php
                }
            }
            ?>
        
        </div>
        
    </div>
        
</div>

Comments

[trenton]

спасибо за ваш пример, попробую по аналогии