WooCommerce – изображение по ссылке для внешних/партнёрских товаров

Для сайтов с большим количеством партнёрских товаров можно не загружать изображения на хостинг, а использовать фотографию по ссылке.

Плюс – экономим место на хостинге. Помните, что WordPress при загрузке изображения, создаёт от 3 и выше копий разных размеров. Это нужно для оптимизации загрузки изображений на различных страницах сайта. Используя внешнее изображение, вы не создаёте лишние копии.

Минус – адрес изображение со временем может измениться, поэтому нужно эту ситуацию отслеживать. Фото может быть удалено, переименовано, перенесено на другой адрес или по другим причинам.

Этапы работы:

  • создаём произвольное поле, в котором будем хранить url изображения
  • включаем сохранение информации в базу данных
  • выводим изображение в карточке товара
  1. Добавим произвольное поле в “Данные о товаре” на вкладку “Основные”:
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
Поле для ссылки на внешнее изображение
Поле для ссылки на внешнее изображение

2. Включаем сохранение данных:

add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}

3. Выводим на странице товара. Также добавим Alt-текст для изображения.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

Конечно, это не закроет полностью вопрос по изображению для внешнего/партнёрского товара. Нам по-прежнему нужна миниатюра, чтобы показывать товар в категории, в админке или на других страницах сайта.

Но можно загрузить только уменьшенную копию. Этого будет достаточно, чтобы товары смотрелись красиво, но и фотографии много места не занимали.

Весь код полностью, чтобы сразу добавить в functions.php

/**
 * Выводим изображение в карточке товара по внешнией ссылке
 * для внешних/партнёрских товаров
 */
  
// Добавляем произвольное поле external_image_url в данные о товаре
  
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
  
// Сохраняем произвольное поле external_image_url
  
add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}
  
// Выводим external_image_url в карточке товара на месте изображения товара
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

Сообщение WooCommerce – изображение по ссылке для внешних/партнёрских товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce