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

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

HIT

18.02.2018

1024

2

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

Обернуть изображения в 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;
}

Добавление пространства (прозрачного или белого) при формировании миниатюры

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

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

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>

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Адаптация woocommerce под свой шаблон

Адаптация woocommerce под свой шаблон

Первое что мы должны сделать при разработке темы включающей в себя функционал интернет-магазина — адаптировать woocommerce под свой шаблон. Локализация woocommerce Для адаптации woocommerce в нашем шаблоне необходимо: Создать в Читать далее »

Счет на оплату

Счет на оплату

Дорабатываем стандартный функционал Woocommerce, добавляя в него генерацию и отправку счета на оплату. А также прочие способы дополнительных автоматических вложений: накладная, квитанция. Плагин WooCommerce PDF Invoices & Packing Slips У Читать далее »

Интересные фишки для Woocommerce

Интересные фишки для Woocommerce

Продолжаем серию интересных доработок для Woocmmerce. Выведем дату последней покупки товара У товара такого мета поля нет, нужно сопоставлять наименования (перебирая заказы). Для этого создаем запрос на перебор БД: В Читать далее »

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

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

  1. Аватар
    миха

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

    1. Alexandr
      Alexandr

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

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