Woocommerce

Añadir una pestaña nueva a la ficha de productos de WooCommerce sin plugin

1 hay 1 solo Like :)

Hoy te traigo un tutorial por si necesitas añadir una nueva pestaña a la ficha de productos, con contenido personalizado para cada uno de ellos, pero no quieres utilizar un plugin para hacerlo.

Si el contenido de la pestaña fuera común para todos los productos, sólo necesitarías añadir este código al archivo functions.php de tu tema:

// Añadir una nueva pestaña a la ficha de productos

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

 $tabs['test_tab'] = array(
 'title' => __( 'Título pestaña', 'woocommerce' ),
 'priority' => 50,
 'callback' => 'woo_new_product_tab_content'
 );
 
 return $tabs;
 
}
function woo_new_product_tab_content() {
 
 // Añadir debajo el contenido de la pestaña
 
 echo 'Titulo descriptivo de la pestaña';
 echo 'Información que quieres añadir a la pestaña';

}

Sin embargo, también es muy posible que lo que necesites es mostrar en esa pestaña contenido diferente para cada producto. Si echas un vistazo a la sección de child themes de Genesis de esta web, verás en la ficha de cada tema aparece una pestaña de Videos y tutoriales con información de cada uno de ellos.

Para hacerlo así, simplemente hemos de instalar el plugin para crear campos personalizados y añadir uno para introducir esa información en el editor de la ficha y luego mostrarlo en la pestaña.

Vamos a ver los pasos a seguir para hacerlo:

1- Instalar y activar el plugin Advanced Custom Fields

2- Crear un nuevo grupo de campos y crear uno del formato que queramos:

Añadir pestaña producto WooCommerceEn este caso he creado un campo Wyswig para tener libertad de introducir cualquier tipo de contenido: texto, imágenes o videos.En el campo location indicamos que se muestre en post tipo producto:

Añadir pestaña producto WooCommerce3- Una vez guardado el nuevo campo personalizado, al editar el producto tendremos el nuevo campo para introducir la información:

Añadir pestaña producto WooCommerce4- Y por último, para que se muestre la pestaña en nuestra web, añadiremos el mismo código de antes, pero añadiendo en el contenido el campo personalizado que hemos creado:
// Añadir una nueva pestaña a la ficha de productos

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

 $tabs['test_tab'] = array(
 'title' => __( 'Título pestaña', 'woocommerce' ),
 'priority' => 50,
 'callback' => 'woo_new_product_tab_content'
 );
 
 return $tabs;
 
}
function woo_new_product_tab_content() {
 
 // Añadir debajo el contenido de la pestaña
 
 echo 'Titulo descriptivo de la pestaña';
 echo 'Información que quieres añadir a la pestaña';
 echo get_field('tab_videos'); //--> Aquí indicamos el nombre del campo personalizado
 
}

Guardamos el código y ya tendremos lista la nueva pestaña en nuestra ficha de producto con el contenido que introduzcamos para cada uno:

Añadir pestaña producto WooCommercePor último, si no te aclaras con el código o no quieres complicarte la vida, puedes utilizar el plugin gratuito WooCommerce Custom tabs para conseguir lo mismo sin picar código.