@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>
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 1
@weart
trenton, да просто в вашем шаблоне создаете папку согласно иерархии плагина, таким образом файлы переопределяются, и вы можете делать в них свою верстку и функционал:

601e3a357509d754070673.png

Пример верстки с 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект