1

Мне нужно изменить шаблон, обертку (HTML img ) вывода картинки товара. За вывод картинки отвечает хук woocommerce_before_shop_loop_item в файле

/wp-content/plugins/woocommerce/templates/content-product.php

Хук вызывает функцию woocommerce_get_product_thumbnail

wp-content/plugins/woocommerce/includes/wc-template-functions.php

дальше я теряюсь.

Хук оборачивает картинку в

<img class="...

Вот этот html шаблон в который он оборачивает картинку мне и надо изменить.

Update

По мотивам ответа ниже сделал функцию тут my-theme/woocommerce/function.php

function filter_woocommerce_product_get_image( $image, $_this, $size, $attr, $placeholder ) {
  if ( has_post_thumbnail( $_this->get_id() ) ) {
            $image = get_the_post_thumbnail( $_this->get_id(), $size, $attr );
    } elseif ( ( $parent_id = wp_get_post_parent_id( $_this->get_id() ) ) && has_post_thumbnail( $parent_id ) ) {
            $image = get_the_post_thumbnail( $parent_id, $size, $attr );
    } elseif ( $placeholder ) {
            $image = custom_wc_placeholder_img( $size );
    } else {
            $image = '';
    }

  return $image;
}

add_filter ( 'woocommerce_product_get_image', 'filter_woocommerce_product_get_image', 10, 5);

Вызываю хук в content-product.php

do_action( 'woocommerce_product_get_image' );

получаю

Fatal error: Uncaught ArgumentCountError: Too few arguments to function filter_woocommerce_product_get_image()

3
  • Ну так изменяйте. Commented 3 нояб. 2017 в 7:35
  • stackoverflow.com/questions/40767641/… Commented 3 нояб. 2017 в 7:38
  • Я понимаю что можно изменить функцию на свою и поменять, но мне непонятно как там образуется тег img
    – Sergei R
    Commented 3 нояб. 2017 в 7:52

2 ответа 2

3

А дальше идет вызов метода get_image() класса WC_Product. Вот код метода:

public function get_image( $size = 'shop_thumbnail', $attr = array(), $placeholder = true ) {
    if ( has_post_thumbnail( $this->get_id() ) ) {
        $image = get_the_post_thumbnail( $this->get_id(), $size, $attr );
    } elseif ( ( $parent_id = wp_get_post_parent_id( $this->get_id() ) ) && has_post_thumbnail( $parent_id ) ) {
        $image = get_the_post_thumbnail( $parent_id, $size, $attr );
    } elseif ( $placeholder ) {
        $image = wc_placeholder_img( $size );
    } else {
        $image = '';
    }
    return apply_filters( 'woocommerce_product_get_image', wc_get_relative_url( $image ), $this, $size, $attr, $placeholder );
}

Для модификации html кода картинки используйте хук woocommerce_product_get_image

Хук должен выглядеть так:

function filter_woocommerce_product_get_image( $image, $_this, $size, $attr, $placeholder ) {
    // ваш код модификации $image
    return $image;
}
add_filter ( 'woocommerce_product_get_image', 'filter_woocommerce_product_get_image', 10, 5);
5
  • woocommerce.wp-a2z.org/oik_api/wc_placeholder_img вот именно то, что я искал. Спасибо за наводку.
    – Sergei R
    Commented 3 нояб. 2017 в 8:33
  • а в вопросе ни слова про placeholder )) Commented 3 нояб. 2017 в 9:23
  • Ну я не знал что он так называется, но в вопросе про тег img который и есть placeholder )
    – Sergei R
    Commented 3 нояб. 2017 в 9:27
  • нет - тег img это тег html img. А placeholder - изображение, которое показывает WooCommerce по умолчанию, если у товара нет своей картинки Commented 3 нояб. 2017 в 9:32
  • Ок, буду знать. Но где то внутри get_image запрятан тег html img, думаю теперь найду.
    – Sergei R
    Commented 3 нояб. 2017 в 9:41
2

Решал подобную задачу, нашел альтернативный вариант - если не можем изменить вывод самой картинки, тогда можем с помощью хуков над ней и под ней обернуть в свой код или div. Написал две функции которые обернут картинку в списке товаров в нужный нам блок с классом:

function img_top_prew()
{echo '<div class="imgcat">';}; 
add_action( 'woocommerce_before_shop_loop_item', 'img_top_prew', 10 );
function img_top_bottom()
{echo '</div>';}; 
add_action( 'woocommerce_before_shop_loop_item_title', 'img_top_bottom', 10 );

Получим обернутую картинку введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.