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!
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?
Hola Robert,
Personalmente las prefiero en horizontal ya que el usuario cuando baja las ve todas de golpe. No uso Storefront, pero este CSS te puede ayudar a ponerlas en horizontal: https://gist.github.com/vanbo/c05e9b9512bd53e3680c82e1c6e4e6a3
Espero que te sirva,
Un saludo!
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
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;
}
Buenas tardes, tu ejemplo es fantástico pero me gustaría saber si puedo crear más de una pestaña para añadir productos recomendados (accesorios de un producto = cabecera, tinta, papel…) y por cada pestaña establecer los productos que quiero que aparezcan.
Un saludo y gracias!
Hola Francisco,
En este tutorial te explico como crear más pestañas a tu gusto!
Un saludo!
Pues es curioso, pero a mi me sigue mostrando la pestaña aunque no tenga productos relacionados. Pero no se si es por que esta el plugin Product vendors activado. ¿Puede ser por eso?
Me resulta, los productos relacionados se mueven a una pestaña pero tambien mueve los productos de «ventas dirigidas» a una pestaña
Hola Christian,
Sí, se mueven todos, así está en el código. Deberías modificarlo en la parte upsells y quitarla, así solo se moverán los relacionados. Si no sabes dímelo y saco hueco para modificarlo.
Un saludo!