Пользовательский размер изображения в Woocommerce

При изменении размеров изображений у вас есть несколько вариантов. Замена стандартных изображений WooCommerce сложнее, чем в обычной установке WordPress, так как они встроены в плагин.

Изменение размеров изображений связанных товаров:

Я протестировал этот метод, и он работает только для связанных товаров (хотя его можно расширить и на другие области). Возможно, вам всё равно придётся воспользоваться Regenerate Thumbnails, чтобы получить правильные размеры.

Нам нужно добавить всё в фильтр wp:

function woo_init() {
    // Здесь будут функции...
}
add_action( 'wp', 'woo_init' );

Я смог пропустить первую часть, установку переменной запроса, и всё равно получить рабочий результат, но так как используется общий шаблон content-product.php, я бы не стал на это полагаться. Поэтому мы установим переменную запроса, чтобы убедиться, что изменяем размер изображения только для связанных товаров:

if( is_singular( 'product' ) ) {
    add_filter( 'woocommerce_related_products_args', function( $query_args ) {
        if( ! empty( $query_args ) ) {
            set_query_var( 'related_products', true );
        }

        return $query_args;
    } );
}

Далее нам нужно удалить стандартный loop_product_thumbnail и заменить его нашим кастомным. Мы проверяем, установлена ли переменная realted_products и имеет ли она значение TRUE, прежде чем выводим наше новое изображение. В противном случае выводим изображение по умолчанию.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title',
    function() {
        $related = get_query_var( 'related_products' );
        if( TRUE == $related ) {
            echo woocommerce_get_product_thumbnail( 'related-thumb', 274, 274 );    // Наш новый размер изображения
        } else {
            echo woocommerce_get_product_thumbnail();   // Размер изображения по умолчанию
        }
    },
    10
);

CSS

WooCommerce использует width: 100%; height: auto; для всех изображений. Вы можете изменить это на max-width: 100%; width: auto; height: auto; и поиграть с отступами / количеством колонок, чтобы получить желаемый вид.

Изменение начальных размеров изображений

Вы можете изменить стандартные размеры изображений WooCommerce, выполнив следующие шаги:

• Войдите в WordPress
• Перейдите в WooCommerce -> Вкладка "Товары" -> Подвкладка "Отображение"
• Внизу вы можете установить размеры изображений для:
  • Изображений каталога
  • Изображений отдельных товаров
  • Миниатюр товаров
• Наконец, вы можете установить Regenerate Thumbnails, чтобы применить новые размеры.

Другой способ — установить эти размеры при установке:

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }

    $catalog = array(
        'width'     => '400',   // px
        'height'    => '400',   // px
        'crop'      => 1        // true
    );

    $single = array(
        'width'     => '600',   // px
        'height'    => '600',   // px
        'crop'      => 1        // true
    );

    $thumbnail = array(
        'width'     => '120',   // px
        'height'    => '120',   // px
        'crop'      => 0        // false
    );

    // Размеры изображений
    update_option( 'shop_catalog_image_size', $catalog );       // Миниатюры категорий товаров
    update_option( 'shop_single_image_size', $single );         // Изображение отдельного товара
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Миниатюры галереи
}

add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );

Ссылки на документацию WooCommerce:

• Использование правильных размеров изображений, чтобы избежать искажений / пикселизации
• Установка размеров изображений WooCommerce при активации темы
• Функция woocommerce_get_product_thumbnail