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í:

mover los productos relacionados en pestaña woocommerce
Ajuste por defecto en WooCommerce

A una más limpia:

porductos cruzados en la ficha de producto
Al aplicar el código los vemos en la pestaña

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!

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 5)

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 Contactar

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. Robert says

    Buenos días, en tu ejemplo las pestañas salen en horizontal pero en el tema Storefront salen en vertical, como se pueden pasar a horizontal?

  2. juan navas says

    hola diegol muchas gracias, me sirvio bastante, una consulta ¿hay alguna forma de cambiar el orden de las pestañas? me gustaría que la de productos relacionados esté de primera

    • juan navas says

      Ya lo resolví dejo el código que use por si alguien lo necesita

      add_filter( ‘woocommerce_product_tabs’, ‘woo_reorder_tabs’, 98 );
      function woo_reorder_tabs( $tabs ) {

      $tabs[‘reviews’][‘priority’] = 5; // Reviews primero
      $tabs[‘description’][‘priority’] = 10; // Description segundo
      $tabs[‘additional_information’][‘priority’] = 15; // Información adicional tercero

      return $tabs;
      }

Deja una respuesta

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