Mostrar el texto de envío gratuito en un producto en WooCommerce

Diferentes gastos de envíos para productos

En WooCommerce, una posible configuración, es que cada producto tenga unos costes de envíos diferentes.

Por ejemplo, una tienda que vende recambios de coches, tiene sentido que el gasto de envío de unas luces, cueste por ejemplo, 4€ y el coste de envío de una puerta sea de 10€, ya que ocupa y pesa más.

Gastos de envíos gratuitos

Puede darse el caso de que alguna tienda quiera marcar, por el motivo que sea, que algunos productos tienen el envío gratuito.

Si se crea una clase de envío de nombre «coste gratis» y se le configura para que tenga un coste de cero euros, se podrán configurar productos para que su coste de envíos sean gratuitos.

En este caso, es muy interesante señalar aquellos productos cuyo coste de envío sea de cero euros.

Ejemplo de producto que tiene asignada la clase de envío «Envío gratis»

Esta información es muy interesante que sea visible en la tienda, ya que puede incrementar las ventas de ese artículo.

Para ello, este dato se va a mostrar en dos lugares.

El primero es en el detalle de un artículo.

El segundo, en listado de productos, bien sea en el listado general de la tienda o en el listado de productos relacionados.

Para insertar un texto similar al de las imágenes, se deben insertar los siguientes códigos dentro del functions.php de tu tema hijo.

Texto de envío gratuito en el listado de productos

En este caso he creado una imagen, en vez de poner texto tipo a «envío gratis».

Con un poco de CSS, se consigue hacerla que la imagen «flote» dentro de la capa del producto, así se consigue informar, con un diseño atractivo y correcto, que ese producto tiene los gastos de envíos gratis.

El CSS usado ha sido position: absolute; top: 5px; right: 5px;, depende del tema o el diseño a conseguir, puede que tengas que acondicionarlo.

/* listado de productos */
add_action('woocommerce_shop_loop_item_title', 'jv_free_shipping_product_list');     
function jv_free_shipping_product_list() {
    global $product;
    $shipping_class_id = $product->get_shipping_class_id();
    $shipping_class_term = get_term($shipping_class_id, 'product_shipping_class'); //Devuelve un objeto
    
    //Aqui tienes que comparar con el slug de tu clase de envio
    if($shipping_class_term->slug == 'envio-gratis') { 
        $html = '<img class="freeshipping" src=" ruta de la imagen... "> ';
        echo $html;
    }
}

Texto de envío gratuito en el detalle de producto

En este caso, se quiere informar a los visitantes de la web que ese producto tiene los gastos de envío gratuitos, por ello, se muestra antes del título una imagen como la siguiente.

El código que «pinta» esta información sería el siguiente, tan solo tendrías que adecuar la forma de presentar el contenido.

add_action('woocommerce_single_product_summary', 'jv_free_product_detail', 1); //detalle de producto
function jv_free_product_detail() {
    global $product;
    $shipping_class_id = $product->get_shipping_class_id();
    $shipping_class_term = get_term($shipping_class_id, 'product_shipping_class');

    if($shipping_class_term->slug == 'envio-gratis') {
        $html .= '<div><b>Sabías qué...<i class="fas fa-question"></i></b><br>Este producto tiene los portes gratuitos, ¡pídelo ahora y <b>ahorra en costes de envío</b>!</div>';
        echo $html;
    }

}