Poner los productos relacionados en una pestaña en WooCommerce

Una de las mejores formas de aumentar el ticket medio en tu tienda online es trabajar el cross selling o compras cruzadas en español. Por defecto en la ficha de producto de WooCommerce van después de las pestañas(Descripción, valoraciones, informacion adicional…)

Esto hace que muy pocas veces el cliente los pueda llegar a ver, puesto que no se recorre la descripción entera para llegar a verlos. Por lo que mostrarlos dentro de una pestaña suele ser la decisión más acertada ya que está a su alcance.

Así que en este tutorial vamos a aprender a cómo hacerlo sin plugins, solo insertando un fragmento de código.

Mover los productos cruzados a una pestaña

Añade este código a tu archivo functions.php o a tu plugin de funcionalidades como explico aquí.

// Eliminamos los productos relacionados de la zona en la que están
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// Creamos la nueva pestaña
function maybe_add_tab( $tabs ) {

    $tabs['related_items'] = array(
        'title'    => __( 'Productos relacionados', 'textdomain' ), //Cambiamos nombre de la pestaña
        'priority' => 90, // Establecemos dónde mostrar la pestaña
        'callback' => 'dl_mostrar_prod_relacc_en_pestana',
    );

    return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'maybe_add_tab' );

// Generamos todo el contenido de la pestaña
function sv_wc_maybe_add_upsell_tab( $tabs ) {
    global $product;

    $upsells = is_callable( array( $product, 'get_upsell_ids' ) )     ? $product->get_upsell_ids()     : $product->get_upsells();
    $related = is_callable( array( $product, 'get_cross_sell_ids' ) ) ? $product->get_cross_sell_ids() : $product->get_cross_sells();

    if ( empty( $upsells ) && empty( $related ) ) {
        return $tabs;
    }

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

    $new_tabs = is_null( $tabs ) ? array() : $tabs;

    $new_tabs['upsells'] = array(
        'title'    => __( 'Related Items', 'woocommerce-upsells-tab' ),
        'priority' => 25,
        'callback' => 'dl_mostrar_prod_relacc_en_pestana',
    );

    return $new_tabs;
}
add_filter( 'woocommerce_product_tabs', 'sv_wc_maybe_add_upsell_tab' );


// Volver a activar los prodcutos relacionados
function dl_mostrar_prod_relacc_en_pestana() {
    woocommerce_upsell_display();
    woocommerce_output_related_products();
}

Con esto pasaremos de una situación así:

A una más limpia:

Aviso: Si un producto no tiene relacionados, no se mostrará la pestaña.

Efectos de aplicar este código

Esta es una acción que suelo aplicar en la mayoría de las tiendas en WooCommerce que desarrollo, puesto que es algo que veo necesario para:

• Aumentarás las ventas relacionadas debido a que es más visible para el cliente.
• El contenido de la ficha de producto quedará más comprimido y será más usable para el usuario.
• Podrás aumentar el número de productos relacionados porque el usuario ha decidido verlos y no molestará tanto encontrarse más de 4.

Por último podemos eliminarlas para que no salgan en ningún sitio como explico en este tutorial. Espero que os funcione correctamente y cualquier duda os la respondo en comentarios!

Añade diegol.top como fuente preferida de Google.

Últimas noticias de actualidad para tu tienda online.

Escrito porDiegolEspecialista 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.topSobre míLinkedInYouTube