Cómo agregar una imagen al producto en WooCommerce

¿Está buscando formas de agregar imágenes a sus productos? Ya sea una imagen destacada o una galería, la forma en que presente sus artículos determinará cuánto venderá. Por eso, en esta guía, le mostraremos cómo agregar una imagen a un producto en WooCommerce .

La importancia de las imágenes en el eCommerce

Las imágenes son uno de los elementos clave a la hora de vender un producto. Una imagen vale más que mil palabras, por lo que un producto con una imagen atractiva tiene más posibilidades de captar la atención de los clientes y generar una venta.

Los dueños de las tiendas tienden a esforzarse mucho en describir las características de sus productos. Pero aunque queramos pensar que tomamos decisiones racionales, lo cierto es que la mayoría de las decisiones son emocionales. Los humanos tienden a tomar decisiones emocionales y las justifican racionalmente. Si un producto se ve bien, es más probable que lo compremos porque llamará nuestra atención.

Independientemente del tipo de producto que vendas, tendrán mejores posibilidades de vender si se ven bien. Si lo piensas bien, es lógico. Si alguien va a usar o usar un producto, ya sea zapatos, ropa o software, querrá que se vea bien. Por eso es importante agregar y optimizar las imágenes que usa para promocionar sus productos y asegurarse de que lo que vende tenga el mejor aspecto.

Ahora que entendemos su importancia, echemos un vistazo a cómo puede agregar una imagen a un producto de WooCommerce.

Cómo agregar imágenes a un producto en WooCommerce

Hay 2 formas principales de agregar imágenes a los productos en WooCommerce:

1. Usando el panel de control de WooCommerce
2. Programáticamente

Echemos un vistazo a ambos métodos.

1) Agregue imágenes desde el tablero de WooCommerce

Agregar una imagen a los productos es una tarea bastante simple en una tienda WooCommerce. Cuando crea o edita un producto, encontrará los metacuadros de imágenes en la barra lateral. Allí, podrá configurar una sola imagen destacada y una galería de imágenes con varias imágenes para exhibir sus artículos.

Cuando haga clic en cualquiera de estos, se abrirá un modal y podrá cargar nuevos archivos de imagen o elegir uno de los existentes de la biblioteca de medios de WP.

Si está agregando imágenes a la galería de productos, puede presionar CTRL + clic izquierdo para seleccionar varias imágenes y agregarlas en una sola acción.

Alternativamente, puede agregar imágenes de la descripción del contenido del producto. Simplemente presione el botón Agregar medios y seleccione las imágenes que desea agregar. Si usa este método, tenga en cuenta que esto puede afectar el diseño de la página general del producto, así que asegúrese de seleccionar el tamaño y la alineación correctos antes de agregar imágenes en el editor de texto.

Agregar imágenes desde el tablero es sencillo. Sin embargo, si tiene habilidades de codificación, también puede agregar imágenes mediante programación, lo que le brinda más flexibilidad. Veamos cómo hacerlo.

2) Cómo agregar una imagen a un producto de WooCommerce mediante programación

En algunos casos, es posible que deba agregar imágenes mediante programación. Esto le brinda más flexibilidad y le permite incluir todo, desde imágenes hasta productos individuales, imágenes destacadas, galerías y más.

En esta sección, le mostraremos secuencias de comandos de muestra que lo ayudarán a agregar imágenes a productos específicos. Tenga en cuenta que deberá reemplazar el ID de producto e imagen en las dos primeras líneas de la función con su ID de producto e imagen. De lo contrario, si ese producto e ID de imagen no existen, obtendrá un error.

Además, tenga en cuenta que los scripts funcionarán en una sola ejecución. Esto significa que puede eliminarlos después de ejecutarlos.

Finalmente, debe pegar los siguientes scripts en el archivo functions.php de su tema secundario. Puede hacerlo yendo a Apariencia> Editor de temas. Luego, busque el archivo functions.php en la columna de la derecha y pegue el código como se muestra a continuación. Alternativamente, puede usar un complemento como Code Snippets.

NOTA : Como editaremos algunos archivos principales, antes de comenzar, le recomendamos que haga una copia de seguridad de su sitio. Aparte de ser una buena práctica, siempre es una buena idea tener una copia de seguridad reciente en caso de que algo salga mal. Si no está familiarizado con los ganchos, eche un vistazo a nuestra guía de ganchos de WooCommerce donde aprenderá los diferentes tipos de ganchos y cómo usarlos.

2.1) Agregar una imagen destacada a un solo producto

Este script establecerá una imagen destacada para un solo producto. Para eso, debe especificar la identificación de la imagen y la identificación del producto como se muestra a continuación. Por ejemplo, en este caso, estamos configurando la imagen con ID 48 como la imagen destacada del producto con ID 195.

 función QuadLayers_add_featured_image() {

    $imagenID = 48; // Identificación de la imagen
    $post_id = 195; //ID del Producto

    set_post_thumbnail ($post_id, $imageID);
    
}

add_action('init', 'QuadLayers_add_featured_image');

El gancho de init asegurará que la función se pueda ejecutar en todas partes con cada carga de página. Además de eso, usamos la función set_post_thumbnail() para configurar la imagen destacada. Esto funcionará tanto para productos como para publicaciones.

2.2) Agregar una imagen destacada a múltiples productos

Del mismo modo, puede hacer lo mismo con varios productos simplemente agregando sus ID. Este script agregará la imagen con ID 53 a los productos con ID 32, 33 y 34.

 función QuadLayers_multiple_featured_image() {

    $imagenID = 53; // Identificación de la imagen
    $post_id = matriz(32,33,34); //Identificadores de productos

    for ($ii=0; $ii < cuenta($post_id); $ii++) { 
          
           set_post_thumbnail ($post_id[$ii], $imageID);      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

Como puede ver, este es el mismo script que antes, pero colocamos todos los ID de productos en una matriz. De esta manera, puede asignar la misma imagen destacada para varios productos al mismo tiempo. Esto puede ser útil para variaciones de productos que no produzcan cambios estéticos. Por ejemplo, puede usar la misma imagen destacada para variaciones del mismo teléfono móvil con diferentes memorias RAM.

2.3) Agregar imágenes a la galería de productos

Agregar una imagen a una galería de productos en WooCommerce es un poco más complejo porque necesita usar dos funciones. Si revisa el siguiente script, verá que la primera función ( QuadLayers_create_gallery ) prepara la información necesaria para crear la galería. Esa es la lista de imágenes y la identificación del producto donde desea agregar la galería.

Por otro lado, update_post_met() está a cargo de la creación de la galería. Para lograr esto, necesitamos usar el ID del producto en el que queremos agregar la galería y una lista de imágenes en una matriz.

 función QuadLayers_create_gallery(){ 
        $imgs_ids=matriz(48,53,47); // ID de imagen
        add_img_to_gallery(195,$imgs_ids); // ID del Producto
}
función add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('init','QuadLayers_create_gallery');

2.4) Establecer una imagen predeterminada para productos sin una imagen destacada

Hemos visto que para configurar la imagen destacada de un producto, en su panel de administración, debe ir a WooCommerce > Configuración > Productos .

Si desea establecer una imagen predeterminada mediante programación, use el siguiente fragmento.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

función QuadLayers_default_image ($src) {
	$subir_dir = wp_subir_dir();
	$uploads = untrailingslashit( $upload_dir['baseurl'] );
	// reemplaza con la ruta a tu imagen
	$origen = $cargas. '/2021/07/álbum-1.jpg';
	 
	devolver $origen;
}

Esto asignará una imagen predeterminada a todos los productos sin una imagen destacada. En este caso, estamos usando la ruta de la imagen en lugar de una ID, así que recuerda reemplazarla con la ruta correcta de tu imagen.

Para obtener la ruta, simplemente diríjase a la Biblioteca de medios , busque la imagen que desea usar, copie la ruta URL y péguela en el código anterior manteniendo el formato actual.

Cómo agregar tamaños de imagen personalizados

Además de agregar una imagen a un producto de WooCommerce, puedes hacer más para personalizar tus artículos. Una buena opción es crear tamaños de imagen personalizados. De forma predeterminada, WordPress incluye 3 tamaños de imagen: miniatura (150 x 150), mediana (300 x 300) y grande (1024 x 1024). Puede cambiar fácilmente estos tamaños desde el tablero, pero ¿qué sucede si desea agregar tamaños predeterminados personalizados en su lugar? Veamos cómo hacer eso.

Primero, abra el archivo functions.php y pegue el siguiente código:

add_theme_support( 'post-thumbnails' );

Esto habilitará la función add_image_size y le permitirá crear tamaños de imagen adicionales. Luego, actualice el archivo. Ahora agreguemos algunos tamaños de imagen nuevos. En el siguiente código, agregaremos cuatro tamaños personalizados con diferentes dimensiones. Simplemente pegue el código y ajuste los nombres y las dimensiones según sus necesidades.

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

¡Eso es! Ahora podrá elegir entre más tamaños predeterminados en su sitio. Para obtener más información al respecto, consulte nuestra guía sobre cómo agregar tamaños de imagen personalizados.

Bonificación: eliminar los tamaños de imagen predeterminados en WordPress

Probablemente haya notado que cada vez que carga una imagen en WordPress, automáticamente genera 3 copias de la misma en los 3 tamaños de imagen predeterminados que acabamos de ver: miniatura, mediano y grande.

Esto puede ser útil y ayudarlo a ahorrar tiempo. Sin embargo, si no usa algunos de estos tamaños, las imágenes solo ocuparán espacio en su servidor. Una solución rápida es eliminar esos tamaños de imagen de su sitio y evitar generar esas copias de imágenes.

La buena noticia es que puedes hacerlo con un simple script. Por ejemplo, supongamos que desea eliminar el tamaño mediano de su sitio. Simplemente copie y pegue el siguiente script en el archivo functions.php de su tema hijo.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Esto eliminará el tamaño de imagen medio predeterminado. 
función prefix_remove_default_images ($ tamaños) { 
unset( $tamaños['medio']); // 300 píxeles 
devolver $tamaños;
}

Para eliminar cualquier otro tamaño, agregue otra línea con el tamaño que desea eliminar. Por ejemplo, si también quieres quitar el tamaño grande, el código será:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Esto eliminará los tamaños de imagen medianos y grandes predeterminados. 
función prefix_remove_default_images ($ tamaños) { 
unset( $tamaños['medio']); // 300 píxeles
unset( $tamaños['grande']); // 1024px 
devolver $tamaños;
}

¡Eso es! Así es como puede eliminar fácilmente los tamaños de imagen. Para obtener más detalles al respecto, consulte nuestro tutorial paso a paso.

Conclusión

En resumen, las imágenes son fundamentales a la hora de vender tus productos. Un artículo con una imagen atractiva tiene más posibilidades de captar la atención de los clientes y generar una venta para su tienda.

En esta guía, hemos visto 2 métodos diferentes para agregar una imagen a un producto de WooCommerce:

• Desde el panel de control de WooCommerce
• Programáticamente

Ahora, ¿cuál es más apropiado para ti? Agregar una imagen desde el tablero es bastante fácil, por lo que es una buena opción. Sin embargo, si tiene habilidades de codificación y desea más flexibilidad, también puede agregar imágenes mediante programación. Le mostramos algunos scripts que lo ayudarán a agregar fácilmente imágenes, imágenes destacadas y galerías a sus productos.

Finalmente, también hemos visto cómo agregar imágenes de tamaño personalizado y eliminar tamaños de imagen predeterminados en su sitio, para que pueda personalizar su sitio y hacer que sus productos sean más atractivos. Para obtener más información sobre cómo aprovechar al máximo sus páginas de productos, consulte nuestra guía para personalizar la página de productos.

¿Has añadido imágenes a tus productos? ¿Qué método usaste? ¡Háganos saber en la sección de comentarios!

Para obtener más tutoriales para personalizar su tienda, consulte las siguientes publicaciones:

• Cómo personalizar la página de la tienda en WooCommerce
• Guía: Cómo editar la página de agradecimiento de WooCommerce mediante programación
• La guía completa para la optimización de pagos