Agregar Tabs personalizados en WooCommerce sin plugins

Ver comentarios (30)

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

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

    • 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

   
  
  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

  • 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/

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

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

    echo do_shortcode('[nombre_shortcode]');