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:
Obteniendo el siguiente resultado:
Cualquier duda como siempre os leo en comentarios!
