K
K
kazakshent2019-10-09 10:28:01
Web development
kazakshent, 2019-10-09 10:28:01

How to display a product image in Woocommerce from a remote server (using a link) without uploading files to your hosting?

It is necessary to configure import from a csv file in such a way that images are loaded from an external source without saving the image on the server in the media library.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
K
kazakshent, 2019-10-10
@kazakshent

Solved the problem myself. I will try to describe how I did it, suddenly someone will have a similar need.
We put WP All import, then we find and add the free version of WP All import Woocommerce Add-on, look carefully, there is a free version that allows us to implement the functionality we need. In my csv file, a column was registered for each product with the url of images from a third-party site, from which it was necessary to upload images without uploading them to my server.
In the settings, when preparing imports in WP All Import (for details on setting up imports, a good article is here: https://www.reactiv.top/import-tovarov-csv-v-wooco...in the attributes for the product, we write an arbitrary name in the Name column, for example (image), and copy the shortcode of our column from the url of the images into the value (the instructions on the link above show how to do this) and remove the visibility from the attribute (just uncheck it). Next, configure as we need and import the file.
After import. In the wp-content/plugins/woocommerce/includes/wc-product-functions.php file, I added a function to display the value of the pictures attribute (image link) productPicture (). The function code is below:

function productPicture (){
  global $product;
  $attribute_names = get_the_terms($product->get_id(), 'pa_picture');
  $attribute_name = "pa_picture";
  if ($attribute_names){
    foreach ($attribute_names as $attribute_name):
    echo $attribute_name->name;
    endforeach;
  }
  }

This function returns the value of the given attribute to us, in our case it is the attribute (pa_picture), it doesn't really matter what you call the attribute, the "pa_" prefix is ​​simply added to it in front.
Next, in the wp-content/plugins/woocommece/templates/single-product/product-image.php file, I added the productPicture() function to the src of the image. Thus, I brought images on detailed product cards from an external source. Below is the product-image.php file code:
<?php
/**
 * Single Product Image
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.5.1
 */

defined( 'ABSPATH' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
  return;
}

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
  'woocommerce-product-gallery',
  'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
  'woocommerce-product-gallery--columns-' . absint( $columns ),
  'images',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
  <figure class="woocommerce-product-gallery__wrapper">
    <?php
    if ( $product->get_image_id() ) {	
      $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
    } else {
                  //МОИ ИЗМЕНЕНИЯ НАЧАЛО
        echo '<div class="woocommerce-product-gallery__image--placeholder">';
        echo "<img src='";
      echo productPicture();
      echo "' alt='Ваше изображение по умолчанию'>";
      echo '</div>';
               //МОИ ИЗМЕНЕНИЯ КОНЕЦ
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
    do_action( 'woocommerce_product_thumbnails' );
    ?>
  </figure>
</div>

Next, we need to duplicate these images in our catalog, so that not only in the detailed description of the product, but also in the catalog on the product cards, the image is displayed.
We do the following. In the wp-content/plugins/woocommerce/includes/wc-product-functions.php file, we change the wc_placeholder_img( $size = 'woocommerce_thumbnail' ) function, which implements the display of images in the product catalog, and added the productPicture () function to the src value for img. Thus, I brought images of goods in the catalog from an external source. The function code is below:
function wc_placeholder_img( $size = 'woocommerce_thumbnail' ) {
  $dimensions        = wc_get_image_size( $size );
  $placeholder_image = get_option( 'woocommerce_placeholder_image', 0 );

  if ( wp_attachment_is_image( $placeholder_image ) ) {
    $image_html = wp_get_attachment_image(
      $placeholder_image,
      $size,
      false,
      array(
        'alt'   => __( 'Placeholder', 'woocommerce' ),
        'class' => 'woocommerce-placeholder wp-post-image',
      )
    );
  } else {
                 //ТУТ МЫ КОММЕНТИРУЕМ СТАНДАРТНЫЕ ЗАПИСИ ФУНКЦИИ КОТОРЫЕ НАМ НЕ НУЖНЫ
    //$image      = wc_placeholder_img_src( $size );
    //$image_html = '<img src="' . esc_attr( $image ) . '" alt="' . esc_attr__( 'Placeholder', 'woocommerce' ) . '" width="' . esc_attr( $dimensions['width'] ) . '" class="woocommerce-placeholder wp-post-image" height="' . esc_attr( $dimensions['height'] ) . '" />';
         //МОИ ИЗМЕНЕНИЯ НАЧАЛО
      echo '<img src="';
    echo productPicture();
    echo '" alt="Заполнитель" width="';
    echo esc_attr( $dimensions['width'] );
    echo '" class="woocommerce-placeholder wp-post-image" height="';
    echo esc_attr( $dimensions['height'] );
    echo '">';
               //МОИ ИЗМЕНЕНИЯ КОНЕЦ
  }

  return apply_filters( 'woocommerce_placeholder_img', $image_html, $size, $dimensions );
}

Thus, we display images without downloading them to the server, and do not litter it. The main thing is not to forget to make a backup, because these changes will disappear after the update and you will need to make them again. If you have any questions or advice, write them in the comments, I will try to answer and I will be glad to advice!

I
Ilya, 2021-03-12
@ilyapokrov

Very helpful article, thanks!
But there are a couple of nuances.
1) I make all the changes in the child theme by simply copying the files from the woocommerce folder. Only in this case, for some reason, it does not work. It would be cool if this code could be written in functions.php and the problem with Woocommerce updates would be solved.
2) How can I write in the alt not "Your default image", but copy the H1 of the product?
3) Is it possible to display multiple images this way? It didn’t work for me, it glues the page addresses, something like this: site.ru/picture1site.ru/picture2

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question