Añadir imágenes a los tipos de envío en WooCommerce

LucusHost, el mejor hosting

Las imágenes ayudan mucho al usuario a identificar las zonas de la web o entender mejor las características del producto. Por esto, tengo varios tutoriales en la web para añadir imágenes en ciertas zonas de la web, como en los métodos de pago o en los productos del checkout.

En este caso nos vamos a centrar en los métodos de envío de la página de compra. Tanto para que el cliente localice fácilmente la zona de selección y los proveedores(si tenemos varios claro). Vamos a ver cómo añadirlas en WooCommerce mediante código o un plugin(en este caso, de pago).

Con código: Mostrar imágenes en los proveedores de envío

Antes de usar este código, debemos de subir las fotos de los métodos de envío a nuestro servidor y saber el id del método para cambiarlo en el código. Si no sabes cómo sacar el id o el enlace de la imagen te lo explico en el vídeotutorial que has visto arriba.

Añadimos el siguiente código en el functions.php de nuestro Child Theme o bien en nuestro plugin de funcionalidades como explico aquí.

add_filter( 'woocommerce_cart_shipping_method_full_label', 'mostrar_imagenes_en_metodos_envio', 10, 2 ); 

function mostrar_imagenes_en_metodos_envio( $label, $method ) {      
   // Mostrar la imagen en un metodo de envio de Flexible Shipping
   if( $method->id === "flexible_shipping_single:11" ) {
       $label .= '<img src="https://sacatu.com/wp-content/uploads/2022/06/cash-on-delivery-icon-14.png" />';
   }
	// Mostrar la imagen en la recogida local
   if( $method->id === "local_pickup:8" ) {
       $label .= '<img src="https://sacatu.com/wp-content/uploads/2022/06/cash-on-delivery-icon-14.png" />';

   }

   return $label; 
}

Recuerda que debes cambiar las imágenes y el id por los tuyos como te explico en el vídeo. Obteniendo un resultado como este:

imagenes en envios tutorial woocommerce

Por otro lado si quieres algo más fácil o el código no es lo tuyo te dejo unos plugins para que puedas hacerlo…

Con plugin

Hay dos plugins de pago que podemos usar que funcionan y están actualizados, son Custom Shipping Icons for WooCommerce por 49$ y WooCommerce Shipping Icons And Description por 16$. En ambos puedes configurar de forma sencilla la foto y la descripción de cada método:

mostrar imagen metodos de envio woocommerce

Obteniendo el siguiente resultado:

mostrar iconos tipo de envio woocommerce

Cualquier duda como siempre os leo en comentarios!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
mailerlite diegol

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *