• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Agregar Tabs personalizados en WooCommerce sin plugins

Agregar Tabs personalizados en WooCommerce sin plugins

agregar Tabs personalizados en WooCommerce

[ 15 agosto 2018 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Tab agregado de resumen en producto WooCommerce

 

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.

Para aprender más sobre cómo crear un campo personalizado puedes revisa el artículo cómo usar los campos personalizados en 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.

Pantalla de contenido de entradas con la opción de habilitar campos personalizados

 

Luego verás que aparece en la parte inferior un formulario para agregar el nombre del nuevo campo y su valor

Sección de campos personalizados en la pantalla de edición de entrada

 
En nuestro caso el campo tendrá el nombre de resumen

Campo personalizado resumen

También es posible usar un plugin para agregar campos personalizados tal como vimos en el artículo Campos personalizados en productos de WooCommerce.

 

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.

En la documentación de Woocommerce puedes encontrar el Hook que se usa para administrar los tabs y también algunos ejemplos de código.

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 );
}

Puedes agregar este código al final del archivo functions.php de tu Child Theme.

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 4,67 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. ElTucu

    2 abril, 2019

    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

    • ElTucu

      2 abril, 2019

      Se me olvidaba, si quieres añadir una segunda pestaña, con este metodo que habría que cambiar? Gracias!

    • Jhon Marreros Guzmán

      3 abril, 2019

      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.

    • Plasma

      15 agosto, 2020

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

       function modify_woo_custom_product_tabs( $tabs ) {
      	global $product;
      	// Remove tabs if contents data are empty
      	if( isset($tabs['como_usar_tab'] ) && !$product->get_meta( 'como_usar' ) ) {
      		unset( $tabs['como_usar_tab'] ); 
      	}
      	return $tabs;
      }
      add_filter( 'woocommerce_product_tabs', 'modify_woo_custom_product_tabs', 999 );
      
      • Jhon Marreros Guzmán

        15 agosto, 2020

        Hola Plasma
        Ese código sirve para ocultar los tabs que no tienen contenido, gracias por el aporte.
        Saludos.

  2. ElTucu

    3 abril, 2019

    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!

  3. Berni

    17 septiembre, 2019

    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.

    • Jhon Marreros Guzmán

      17 septiembre, 2019

      ¿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.

      • Berni

        17 septiembre, 2019

        No, no aparece ningún error. Y plugin, sólo tengo el de Woocommerce. Voy a probar como dices en otra instalación.

      • Berni

        18 septiembre, 2019

        Arreglado! Un error de sintaxis era. Muchas gracias! Una pregunta, ¿se podría añadir más de tabs? Gracias!

        • Jhon Marreros Guzmán

          20 septiembre, 2019

          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.

  4. Juan

    1 marzo, 2020

    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.

    • Jhon Marreros Guzmán

      3 marzo, 2020

      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/

  5. Andy

    16 abril, 2020

    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.

    • Jhon Marreros Guzmán

      17 abril, 2020

      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/

  6. omar

    22 junio, 2020

    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!!

  7. Rosa Villanueva

    10 agosto, 2020

    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

     
    
    add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab', 'woo_new_product_tab_content2');
    
    function woo_new_product_tab( $tabs ) {
    
    	$tabs['terminos_tab'] = array(
    		'title' 	=> __( 'Terminos y Condiciones', 'woocommerce' ),
    		'priority' 	=> 50,
    		'callback' 	=> 'woo_new_product_tab_content'
    
    	);
    
    $tabs['devolucion_tab'] = array(
    		'title' 	=> __( 'Garantia y Devolucion', 'woocommerce' ),
    		'priority' 	=> 51,
    		'callback' 	=> 'woo_new_product_tab_content2'
    
    	);
    	return $tabs;
    
    }
    function woo_new_product_tab_content() {
    	echo 'Al realizar esta compra usted acepta los siguientes terminos y condiciones:';
    	echo get_post_meta( get_the_ID(), 'terminos', true );
    }
    
    function woo_new_product_tab_content2() {
    	echo 'Al realizar esta compra usted acepta la politica de garantia y devolucion:';
    	echo get_post_meta( get_the_ID(), 'devolucion', true );
    }
    
    

    Ahora solo tienes que añadir los campos personalizados a cada uno de los nuevos productos para que aparezca

    • Jhon Marreros Guzmán

      12 agosto, 2020

      Hola Rosa.
      Que bien que te sirvió, gracias por el aporte de cómo lo implementaste.
      Saludos.

    • Mines

      28 mayo, 2021

      Gracias Jhon, muy bien explicado
      y gracias Rosa! porque pude lograr agregar más tabs gracias a tu comentario!

  8. Gerardo

    24 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      25 agosto, 2020

      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/

  9. Alan Sarco

    10 octubre, 2020

    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

    • Jhon Marreros Guzmán

      12 octubre, 2020

      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/

  10. Rusbel

    14 diciembre, 2021

    Hola Jhon, gracias por tu aporte.

    Amigo tengo una duda. Si quiero agregar un shortcode de una tabla para mostrarla en esa tab. ¿Que debería hacer? o ¿Cómo lo podría hacer?

    Gracias. Quedo atento.

    • Jhon Marreros Guzmán

      15 diciembre, 2021

      Hola, prueba usar la función do_shortcode(), por ejemplo:

      echo do_shortcode('[nombre_shortcode]');
  11. Natalia

    25 diciembre, 2021

    Y si en vez de letras quiero que se muestre una icono o imagen el tab

    • Jhon Marreros Guzmán

      27 diciembre, 2021

      Hola, el título hasta donde he probado sólo acepta texto, sin embargo podrías agregar emojis

  12. Fernando

    28 marzo, 2022

    Hola Jhon como podria poner diferentes tabs para cada producto? al hacer esto como lo explicas se ven reflejados en todos igual de la misma forma, quisiera tener un tab para cada uno, espero me piedas ayudar gracias!

    • Jhon Marreros Guzmán

      29 marzo, 2022

      Hola Fernando
      Podrías comprobar el ID del producto dentro de las funciones y de acuerdo a eso agregar los tabs que necesitas, por ejemplo para comprobar el ID

      if(is_product() && get_the_id() == 123) {
      }
      • Fernando

        29 marzo, 2022

        Gracias por la respuesta Jhon, pero podrias ayudarme aun mas, soy nuevo en esto y apenas estoy aprendiendo, disculpa!! donde iria exactamente ese codigo? D:

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Incluir Bootstrap en WordPress

Eliminar Shortcodes que no usas en WordPress

Agregar login y logout en un menú de WordPress

Personalizar email de registro de nuevo usuario en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados