En un artículo anterior vimos cómo modificar elementos en página de producto de WooCommerce, sin embargo en la página de detalle de producto de WooCommerce también aparecen pestañas o tabs los cuales podemos personalizar a través de código.
1- Generalidades
Primero añadiremos contenido adicional en la pantalla de edición/creación de un producto usando campos personalizados de WordPress, posteriormente mostraremos este contenido en un Tab en la pantalla de detalle de producto de Woocommerce.
El resultado final será algo similar a lo que se muestra en la siguiente imagen:
2- Agregando campo personalizado
Agregaremos un campo llamado resumen en la pantalla de edición del producto a través de un campo personalizado de WordPress.
Primero asegúrate de tener habilitada la opción para mostrar los campos personalizados, puedes hacerlo ingresando a la pantalla de edición de producto.
Luego verás que aparece en la parte inferior un formulario para agregar el nombre del nuevo campo y su valor
En nuestro caso el campo tendrá el nombre de resumen
3- Código para crear el tab en el detalle de producto
Luego que has agregado el campo personalizado con su valor, necesitarás un espacio en donde mostrarlo en el detalle de producto en el front-end de tu sitio, para esto usaremos un nuevo tab.
Puedes usar el siguiente código para agregar un nuevo tab llamado resumen:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
$tabs['resumen_tab'] = array(
'title' => __( 'Resumen', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
echo '<h2>Resumen</h2>';
echo get_post_meta( get_the_ID(), 'resumen', true );
}
En el código anterior:
- En el código usamos el hook woocommerce_product_tabs que administra los tabs
- El hook hace referencia a la función woo_new_product_tab la cual tiene como argumento el array de tabs
- Dentro de la función woo_new_product_tab agregamos un nuevo elemento al array, uno de los valores del nuevo array será una función callback
- La función woo_new_product_tab_content será el callback y es en esta función en donde se escribirá el código para mostrar el campo personalizado
- Para mostrar el campo personalizado usamos la función de WordPress get_post_meta
4- Conclusión
Woocommerce te permite administrar los tabs que se muestran en la página de detalle de producto, en este artículo aprendiste cómo agregar un tab personalizado de WooCommerce, de manera práctica y evitando el uso de plugins adicionales.
¿Aún con dudas?, en el siguiente video se detalla los puntos tratados anteriormente.
Artículos Relacionados
(3 votos, promedio: 4,67 de 5)
Cargando...
Hola, gracias por el artículo! me ha ayudado, pero tengo una duda, al hacer esto, muestra la pestaña nueva creada, pero se puede poner alguna funcion, que por ejemplo, si no hay nada escrito en el, no se muestre? Gracias
Se me olvidaba, si quieres añadir una segunda pestaña, con este metodo que habría que cambiar? Gracias!
Hola, si quieres validar que se muestre sólo si hay algún contenido, tendrías que colocar una condiciona en la función woo_new_product_tab , justo antes de que se crea el tab. Si quieres agregar otro tab simplemente agrega $tabs[‘otro_tab’], tienes que cambiar otro_tab y también el nombre de la función callback (en el ejemplo woo_new_product_tab_content) al que hace referencia y agrega igualmente una nueva función de callback.
No se si todavía lo necesites, probablemente le sirva a alguien mas.
https://stackoverflow.com/a/58516402/14110309
En mi caso yo lo necesitaba para una sola pestaña llamada Cómo usar y el código me quedo así:
Hola Plasma
Ese código sirve para ocultar los tabs que no tienen contenido, gracias por el aporte.
Saludos.
El añadir otro tab, lo he logrado, pero lo de poner esa condición, de que solo se muestre si tiene contenido, no doy con ello. No soy muy experto. Gracias por contestarme!
Hola! Muchas gracias por el tutorial. He probado el código en mi Woocommerce, pero no me funciona. No consigo que me devuelva el texto de las tabs personaliza =( y he seguido el tutorial entero.
¿No te aparece ningún error?, de manera general te sugiero probarlo en otra instalación ya que es posible que tengas o bien algún error de sintaxis o que haya algún tipo de conflicto con otro plugin.
No, no aparece ningún error. Y plugin, sólo tengo el de Woocommerce. Voy a probar como dices en otra instalación.
Arreglado! Un error de sintaxis era. Muchas gracias! Una pregunta, ¿se podría añadir más de tabs? Gracias!
Hola, si, claro, tendrías que agregar otro elemento al array con otro nombre y otro callback y función, es decir otra función woo_new_product_tab_content con otro nombre.
Hola Jhon, muchas gracias por el tutorial, excelente! pero te quería hacer una pregunta, primero te explico el contexto. Tengo un catálogo de productos el Woocommerce y quisiera poner un nuevo tab para la descarga de documentación que tengo en PDF, pero dicha documentación se podría ver y descargar siempre y cuando el usuario este logueado en un determinado usuario de WordPress. ¿como podría hacer para que ese tap personalizado se mostrara en el producto siempre y cuando el usuario esté logueado? Agradezco enormemente de tu ayuda.
Hola Juan
En la segunda función antes de mostrar el contenido, tendrías que poner una validación, WordPress ofrece funciones para esto, revisa por ejemplo la siguiente función que comprueba si un usuario esta logueado: https://developer.wordpress.org/reference/functions/is_user_logged_in/
Hola Jhon,
Muchas gracias por tus vídeos y artículos que son de gran ayuda.
Por favor me puedes ayudar con esta duda.
En tu video muestras que el contenido del nuevo tab creado se debe subir mediante los campos personalizados (en texto plano), pero cómo puedo hacer para que el contenido se suba mediante un editor WYSIWYG.
Muchas gracias por tu respuesta.
Hola, en lugar de campos personalizados, ya que son limitados, podrías evaluar usar un plugin como ACF https://es.wordpress.org/plugins/advanced-custom-fields/, la lógica sería similar para mostrar el campo, revisa: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/
Estimado Jhon, te la pongo difícil:
Si quiero crear una nueva pestaña y que salga solo en los productos de una determinada categoría de producto??
Se podrá??
Saludos y gracias!!
hola Jhon, muchas gracias por la explicacion de tu articulo me sirvio mucho, gracias a eso añadi 2 pestañas extras al producto.
Aqui dejo el codigo para agregar 2 pestañas, en mi caso la primera se llama terminos y condiciones y la segunda se llama Garantia y devolucion:
Primero que nada: agregar 2 campos personalizados al productos: uno se llamara terminos y el otro devolucion.
Luego en el archivo functions.php agregar el siguiente codigo
Ahora solo tienes que añadir los campos personalizados a cada uno de los nuevos productos para que aparezca
Hola Rosa.
Que bien que te sirvió, gracias por el aporte de cómo lo implementaste.
Saludos.
Gracias Jhon, muy bien explicado
y gracias Rosa! porque pude lograr agregar más tabs gracias a tu comentario!
Muy prácticos los videos!, será posible insertar un formulario con campos personalizados, en mi caso quiero mostrar una lista de precios diferentes según formas de pago. Logro ponerlos pero no logro darles formato.
Hola, supongo que te refieres al diseño, lo haces con código CSS, revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Genial, ahora una consulta, es posible luego cuando queramos cargar un lote de productos usando un CVS poder agregar esta informacion para que lo haga en todos los productos?, en mi caso no es un resumen si no el modo de uso de cada producto. Gracias
Hola, en este caso posiblemente tengas que revisar si el plugin de importación que usas tiene esta funcionalidad de importar campos personalizados. Por ejemplo: https://toolset.com/course-lesson/import-csv-ultimate-csv-importer-plugin/