/ Плагины / Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

HIT

18.02.2018

4169

3

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем так, чтобы и в этом случае все изображения смотрелись стройно и ровно.

Обернуть изображения в div

Первым делом необходимо в настройках WC снять галку с жесткой обрезки (Изображения каталога). Далее необходимо выводимые в категориях миниатюры обернуть в div

// Обертка для изображений товаров в категории

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);


if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;
        $output = '<div class="imagewrapper">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );              
        }                       
        $output .= '</div>';
        return $output;
    }
}

Теперь можно задать классу imagewrapper центрирующие свойства

.imagewrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: white;
}

.imagewrapper img {
    max-height: 200px;
    max-width: 200px;
    width: auto !important;
}
Добавление пространства (прозрачного или белого) при формировании миниатюры

Произвольный размер миниатюры

// изменение пропорций изображений в каталоге
add_filter('woocommerce_get_image_size_thumbnail','add_thumbnail_size',1,10);
function add_thumbnail_size($size){
    $size['width'] = 300;
    $size['height'] = 350;
    $size['crop']   = 1; //0 - не обрезаем, 1 - обрезка
    return $size;
}

Выравнивание изображений категорий товаров

// Обертка для изображений категорий

function add_image_wrapper_sub_cat_open() { echo '<div class="imagewrapper">'; }
add_action( 'woocommerce_before_subcategory_title', 'add_image_wrapper_sub_cat_open', 9, 2 );


function add_image_wrapper_sub_cat_close() { echo '</div>'; }
add_action( 'woocommerce_before_subcategory_title', 'add_image_wrapper_sub_cat_close', 11, 2 );

Вывести миниатюру категории WC

Для получения миниатюры категории товара нужна иметь в переборе ее term_id

$thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true ); $thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'shop_single' );

shop_catalog — изображения каталога (300х300 с жесткой обрезкой)
shop_single — изображение единичного товара (600х600 с жесткой обрезкой)
shop_thumbnail — миниатюра товара (180х180 с жесткой обрезкой)

Далее выводим изображение

<a href="<?php echo get_term_link($term->term_id);?>"><img src="<?php echo $thumbnail[0]; ?>"></a>

Выравнивание миниатюр не товаров

Так же оборачиваем миниатюры в div с классом imagewrapper и добавляем скрипт:

jQuery(document).ready(function() { 
	var wiDth = $('.imagewrapper img').css('width');
	$('.imagewrapper').css('height', wiDth);
});

Если записи обновляются ajax, то в скрипт ajax нужно добавить и перезагрузку высоты . imagewrapper:

// Выравнивание миниатюр в квадрат
setTimeout(function () {
	var wiDth = $('.imagewrapper img').css('width');
	$('.imagewrapper').css('height', wiDth);
}, 400);

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Различные наработки по Woocommerce

Различные наработки по Woocommerce

Очередной сборник различных наработок для плагина Woocommerce. Изменить вывод заголовка товара Выведем вместо заголовка краткий заголовок, созданный в виде дополнительного поля. Создание поля Выводы в каталоге и карточке товара. Если Читать далее »

Вложить файл в заказ

Вложить файл в заказ

Если необходимо приложить к заказу реквизиты или любой другой файл, к заполняемым полям нужно добавить загрузчик файла. Easy Upload Files During Checkout (1000) Простой но рабочий функционал. В бесплатной версии Читать далее »

Модификация Woocommerce

Модификация Woocommerce

Продолжаем серию модификаций модуля интернет коммерции Woocommerce. Скрыть колонки редактирования товаров add_filter( 'manage_edit-product_columns', 'change_columns_filter',10, 1 ); function change_columns_filter( $columns ) { unset($columns['product_tag']); unset($columns['sku']); unset($columns['featured']); return $columns; } Тоже самое можно Читать далее »

/ /

Добавить комментарий

3 комментария

  1. миха

    не понятно . Куда какой код добавлять!

    1. Alexandr

      Если нужно обернуть изображение в div, то функцию надо вставлять в functions.php

  2. Вячеслав

    Очень спасает положение когда все картинки к товарам разного размера. Спасибо!

Выравнивание миниатюр товаров
Плавный скроллинг по якорям
Рекомендации для васПлавный скроллинг по якорямOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.