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:
En 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:
3- Una vez guardado el nuevo campo personalizado, al editar el producto tendremos el nuevo campo para introducir la información:
4- 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:
Por ú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.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
19 respuestas a «Añadir una pestaña nueva a la ficha de productos de WooCommerce sin plugin»
|
Hola Chicos, Muy buen tuto. Una duda, estoy siguiendo los pasos y cuando genero uno me funciona perfectamente pero cuando quiero crear otro para poder tener 2 pestañas me sale este error
The code snippet you are trying to save produced a fatal error on line 13:
Cannot redeclare woo_new_product_tab() (previously declared in /home/tetoxes/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(384) : eval()’d code:2)
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.
Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.
Sabriais decirme que puedo hacer para poder poner más de una pestaña.
|
Hola Joaquin!
Parece que el error es debido a que estás utilizando la misma función dos veces para crear las dos pestañas.
Para solucionarlo, puedes añadir la segunda pestaña en la misma función:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'Vídeos y tutoriales', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
$tabs['test2_tab'] = array(
'title' => __( 'Otra pestaña', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
Saludos!
|
Hola qué tal si quisiera agregar un campo en el backend del woo sin plugin, como debería hacerlo
|
Hola Mariano!,
Puedes utilizar campos personalizados para ello. Si quieres en el blog de Nelio tengo un artículo explicando un poco que son y cómo utilizarlos: Los campos personalizados en WordPress
Saludos!
|
Buen tutorial pero me estoy encontrando con un problemilla que no se si podás resolverme.
Tengo distintas categorías de productos y lo que quiero es que, para cada una de ellas, cada categoría aparezca distintos campos personalizados,. el problema es como lo plasmo para que aparezca en la web los de una categoría y no los campos personalizados de todas las categorías,.
un poco enrevesado pero espero que entendáis lo que quiero decir.
un saludo y gracias.
|
Hola Jose María, muchas gracias!
No lo he probado, pero quizás podrías añadir un condicional a la función antes de mostrar el campo personalizado con algo como «if ( in_category(‘slug-categoria’) ) {
}
Ya me dirás si te funciona!
Saludos,
esther.
|
No me funciona Esther, tendré que seguir probando cosas pero supongo que los tiros irán por ahí.
Gracias.
|
Hola Esther.
Gracias por el post.
Estoy probando la opción 2, es decir, crear una pestaña para poder mostrar contenido distinto según el producto. He seguido los pasos que comentas:
1.- Instalar ACF
2.- Crear un grupo de Custom Fields para cada una de las pestañas que deseo agregar
3.- En un mu-plugin insertar el siguiente código para crear la pestaña:
/**
* Añadir la pestaña «Objetivos»
*/
add_filter( ‘woocommerce_product_tabs’, ‘carlosmdh_woo_objetivos_tab’ );
function carlosmdh_woo_objetivos_tab( $tabs ) {
// Adds the new tab
$tabs[‘test_tab’] = array(
‘title’ => __( ‘Objetivos’, ‘woocommerce’ ),
‘priority’ => 50,
‘callback’ => ‘carlosmdh_woo_objetivos_tab_content’
);
return $tabs;
}
4.- y a continuación, para poder insertar el contenido del Custom Field, añado el siguiente código:
function carlosmdh_woo_objetivos_tab_content() {
// Mostrar el contenido del campo de ACF «tab_objetivos»
echo get_field(‘tab_objetivos’); /* Aquí indicamos el nombre del campo personalizado */
}
Con todo esto, en el Backend veo los «formularios para agregar el contenido personalizado que he creado con ACF, pero a poner un contenido de prueba, la pestaña se crea, pero el contenido personalizado no se muestra en la pestaña correspondiente.
Nota: si dejo los echo que añadías de contenido estático, es decir:
echo ‘Titulo descriptivo de la pestaña’;
echo ‘Información que quieres añadir a la pestaña’;
Si se muestran en el FrontEnd.
Alguna idea sobre que puede faltar?
|
Hola Carlos!
Pues la verdad no veo donde está el problema, si cuando es contenido estático si te aparece, ha de ser algo relacionado con la llamada al campo personalizado. Asegúrate de que el nombre del campo «tab_objetivos» es correcto y prueba con diferente tipo de contenido por si es algún código o caracter concreto que está dando problemas.
Saludos!
|
Hola Again.
Parece que se ha arreglado sólo, ya funciona.. 🙂
Gracias y feliz viernes
|
Hola, existe algo parecido para añadir una pestaña solo visible para el administrador?
Es decir, necesito añadir una pestaña de costo de producto, una pestaña no visible al público.
|
Hola Nacho,
Mírate este artículo: Añadir campos personalizados a la ficha de producto de WooCommerce
No es una pestaña, pero te permite añadir un campo personalizado que por defecto sólo se muestra en el administrador, a ver si te sirve para lo que necesitas.
Saludos!
|
Muchísimas gracias por tu rápida respuesta.
Es perfecto para lo que necesitaba, me expliqué mal al decir pestaña.
Gracias de nuevo
Saludos!
|
Hola desde uruguay ! , he aprendido enormemente con estos tutoriales.
Quisiera consultarte , es creo algo simple pero no logro resolver . Tengo un Plugin que genera un pdf ( https://redefiningtheweb.com/docs/woocommerce-pdf-catalog-with-flipbook/work-flow)
Lo logro instalar pero NO puedo insertalo en la Pagina de Producto el shortcode. [rtwwpcp_product_shortcode]
Tampoco en la Pagina de Catalog [rtwwpcp_catalog_shortcode]
No se si el codigo de arriba me sirve para lo que pretendo y hace el plugin , si no es asi , como seria .
Lo quiero ingresar como fragmento de codigo ( plugin code sniperts )
gracias .
|
Hola Andrés!
Pues me temo que no he trabajado con ese plugin y no lo conozco, pero te recomiendo que lo consultes con el soporte del mismo plugin que seguramente te podrán ayudar.
Saludos!
|
Hola Esther,
Genial post, me descargue el Advanced Custom Fields para poder agregar datos estructurados a traves del child theme, ya logré agregar la marca, me falta el codigo gtin, pero para esto necesito crear campos personalizados dentro de las variaciones, porque cada una tiene su codigo internacional. ¿Sabes alguna tecnica o metodo con el cual pueda ingresar campos customizados a las variaciones?
Te comparto el codigo que use para los microdatos, se que hay muchos mas buscando solución para esto
//*Agregar campo marca
add_action( ‘woocommerce_single_product_summary’, «dcms_caracteristicas_producto», 20 );
function dcms_caracteristicas_producto(){
if (function_exists(‘get_field’)){
if (get_field(‘marca’)) echo «Marca: «. get_field(‘marca’).»»;
if (get_field(‘codigo universal’)) echo «Codigo Universal: «. get_field(‘codigo universal’).»»;
}
}
//*Datos estructurados o microdatos
add_filter( ‘woocommerce_structured_data_product’, ‘dcms_product_microdata’, 10, 2 );
function dcms_product_microdata( $markup, $product ){
if ( function_exists(‘get_field’)){
if ( get_field(‘marca’)!=» ){
$markup[‘brand’] = get_field(‘marca’);
$markup[‘gtin’] = get_field(‘codigo universal’);
}
}
return $markup;
|
¡Hola Andrés!
Muchas gracias por el código. Si que había trasteado con custom fields para variaciones, pero en ese caso lo hice con los campos personalizados nativos de WordPress, no con ACF, ¿te serviría? Si es así buscaré lo que preparé para ver si puede ayudarte.
Saludos!
|
Eso seria ideal, te agradeceria que me lo compartieras.
Saludos!
|
Hola Andrés,
Mira, no recordaba que ya salía este tema en un post que publiqué hace tiempo, mira a ver si te sirve: https://www.esthersola.com/anadir-campos-personalizados-a-la-ficha-de-producto-de-woocommerce/
Saludos!