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

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).

Índice

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:

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: