Cree pestañas de productos WooCommerce personalizadas con campos personalizados avanzados

Al ver un producto en WooCommerce, la información sobre el producto se muestra en pestañas. Estas pestañas son fijas y generadas por WooCommerce, fuera de su control. Esta publicación le mostrará cómo agregar código que permita a los autores agregar pestañas personalizadas con contenido personalizado a los productos.

Descargo de responsabilidad: hay una extensión de WooCommerce llamada WooCommerce Tab Manager que proporciona esta función. Sin embargo, no es gratis. No lo he probado yo mismo, pero por lo que puedo ver, solo admite un editor WYSIWYG (lo que ves es lo que obtienes) para el contenido de las pestañas. Esta publicación es para usted que desea ajustar más el contenido de la pestaña o desea escribir el código usted mismo sin pagar por otro complemento.

Usaremos el complemento Advanced Custom Fields (ACF) para simplificar el proceso. Pero debería poder reemplazar fácilmente la parte de ACF con su propio código personalizado si no desea usar el complemento. ACF viene en una versión gratuita y una versión Pro. En ACF Pro hay un tipo de campo ingenioso: el repetidor, que es perfecto para este tipo de uso. Sin embargo, si no tiene o no desea comprar una licencia Pro, no se preocupe. El tutorial de código a continuación le mostrará cómo agregar campos usando la versión gratuita y usando el repetidor en la versión Pro.

Si aún no está familiarizado con ACF, ACF nos ayuda a configurar fácilmente los metacampos de publicación, de todo tipo. Puede agregar fácilmente un editor, un selector de archivos, un selector de fecha o color, un selector de publicación o categoría con soporte para múltiples opciones y reordenación, y más. Podemos lograr lo mismo sin ACF, pero luego tendríamos que codificar la visualización y el guardado del contenido de metaboxes nosotros mismos.

que haremos

En pocas palabras, queremos permitir agregar pestañas personalizadas a la vista del producto. Cada pestaña admite un título que se muestra como etiqueta de pestaña y el contenido que se muestra al hacer clic en la pestaña. Las pestañas personalizadas realmente dependen del tipo de proyecto o necesidades que tengas; tal vez necesite pestañas para especificaciones técnicas, una pestaña con archivos (por ejemplo, manuales de usuario y demás), información adicional o una consulta personalizada que muestre productos relacionados.

En este tutorial lo simplificaremos agregando un editor WYSIWYG para el contenido de las pestañas. Como se mencionó anteriormente, es fácil implementar otros tipos de campos (por ejemplo, archivos o una consulta posterior), es solo una diferencia en el código que escribe para mostrar el contenido de la pestaña, que no está relacionado con este tutorial.

Si tiene ACF Pro y quiere usar el repetidor para agregar fácilmente varias pestañas; omita la siguiente sección. Si solo tiene la versión gratuita de ACF, continúe. La desventaja de no tener el campo repetidor es que necesitas definir un número fijo de pestañas. Por lo tanto, el autor no puede hacer un número ilimitado de pestañas como puede hacerlo con el repetidor. Pero esta solución gratuita funcionará bien en las tiendas web donde solo desea pestañas personalizadas específicas (cantidad de).

Tutorial para la versión gratuita de ACF

Agregar los campos ACF

Agregar un nuevo metabox con campos es muy fácil con ACF. Tienes dos opciones; use la interfaz de usuario de ACF para configurar todo o agregue los campos por código. Por lo general, configurar los campos en admin es el camino a seguir. Pero si necesita asegurarse de que los campos existen en varios sitios de WordPress (por ejemplo, desarrollo de host local, servidor de prueba y servidor en vivo), puede beneficiarse al agregar los campos por código en su tema o complemento.

Necesitas configurar lo siguiente:

• Un grupo que se muestra cuando el tipo de publicación es igual a los productos de WooCommerce
• Una entrada de texto para el título de la pestaña
• Cualquier campo que desee para el contenido de la pestaña. Como ejemplo, agregaremos un editor WYSIWYG.
• (Opcional) Títulos de pestañas adicionales y contenido de pestañas para tantas pestañas que queramos admitir.

Tome nota para recordar los nombres de los campos, ya que deberá consultarlos más adelante. He definido el título de la pestaña como tab_titley el campo WYSIWYG como tab_contents.

Si prefiere agregar los campos por código, aquí hay un ejemplo. Agregue esto en su tema functions.phpo archivo de complemento:

Si desea más de una pestaña, simplemente agregue otro conjunto de título de pestaña y contenido de pestaña después de line #19. Solo recuerda mantenerte nameúnico.

Cuando editamos un producto deberíamos ver aparecer este metabox:

Salida de sus pestañas personalizadas

WooCommerce nos permite filtrar woocommerce_product_tabspara manipular pestañas. Como argumento para este filtro, obtiene una matriz para todas las pestañas. La matriz consta de matrices para cada pestaña con claves únicas. Pero la matriz de cada pestaña no contiene la salida real del contenido de la pestaña. En su lugar, espera una devolución de llamada: un nombre de una función que WooCommerce ejecutará para generar el contenido de la pestaña.

Una vez dentro de la función, puede usar global $postpara obtener acceso al objeto de publicación actual, o si desea que WooCommerce genere el objeto de producto, simplemente haga global $product. Necesitamos el ID de la publicación para obtener el valor de nuestros campos personalizados con la función de ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). En el ejemplo de código a continuación, solo buscamos el título de la pestaña y verificamos si está vacío o no. Si no es así, agrega una nueva pestaña a la matriz. Tiene sentido no agregar pestañas donde el título de la pestaña está vacío.

Tenga en cuenta que puede usar ‘ priority‘ para controlar la posición de la pestaña. Por ejemplo, establecerlo en 1 hará que su pestaña aparezca primero, antes de todas las pestañas de WooCommerce. Defina un nombre de función para el callbackelemento ‘ ‘. En línea #17, definimos la función que ejecutará WooCommerce para generar el contenido de la pestaña.

Estas funciones de devolución de llamada de pestañas obtendrán dos parámetros; la clave y el elemento de matriz de todos los valores para la pestaña actual. Dentro de nuestra función de devolución de llamada, volvemos a mostrar el título de la pestaña, haciendo referencia a la $tabmatriz proporcionada. WooCommerce hace eco de los títulos de sus pestañas dentro de un h2, así que hacemos lo mismo. Y luego usamos get_field()para obtener el valor del contenido de la pestaña y simplemente hacemos eco del valor. Ajuste la línea #23para que se ajuste a cualquier tipo de campo que haya agregado (p. ej., selector de objeto de publicación, imágenes o cualquier otra cosa).

Tenga en cuenta que he envuelto todo dentro de un control si que verifica si WooCommerce y ACF están activados o no. Esta es una buena práctica para evitar que su sitio se rompa.

¡Y eso es todo! ¡Ahora ha creado con éxito el código para agregar pestañas personalizadas de WooCommerce!

Si desea hacer esto con el campo repetidor de ACF Pro para admitir un número ilimitado de pestañas, siga leyendo.

Tutorial para ACF Pro y repetidor

Agregar los campos ACF

Agregue su grupo utilizando la interfaz de usuario de administración de ACF o agregándolos por código en su tema o archivos de complemento. Necesitamos configurar lo siguiente:

• Un grupo que se muestra cuando el tipo de publicación es igual a un producto de WooCommerce
• Un repetidor con los siguientes subcampos:
  • Una entrada de texto para el título de la pestaña
  • Cualquier campo que desee para el contenido de la pestaña.

Así es como lo configuraría usando el administrador de ACF:

O puede agregar el grupo por código así:

De cualquier manera, deberías terminar con este metabox al editar productos:

Salida de sus pestañas personalizadas

La salida de sus pestañas personalizadas es muy similar a lo que hicimos anteriormente para la versión gratuita. Filtramos woocommerce_product_tabs, pero aquí recorremos cada elemento repetido del repetidor. Necesitamos una forma de identificar cada elemento en el repetidor con claves, por lo que generamos una clave nosotros mismos usando la posición del bucle y una versión slug del título de la pestaña. En la función de devolución de llamada, extraemos la posición del bucle de la tecla y la usamos para referirnos a la matriz de nuestro repetidor.

Dentro de nuestra función de filtro buscamos el valor del repetidor y verificamos si no está vacío. Luego definimos una variable de contador, comenzando en 0 (las matrices siempre comienzan en la posición 0), que incrementamos con 1 para cada elemento dentro del ciclo (en la línea #18). En el bucle de cada elemento repetidor, los asignamos a todos a la misma función de devolución de llamada. Usamos la función de WordPress [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()para convertir el título de la pestaña en una versión de slug y lo agregamos a la clave.

En nuestra función de devolución de llamada en la línea #31 - 32, hacemos algunas manipulaciones simples de cadenas para extraer el valor del contador (que comienza en 0 y se incrementa en 1 para cada elemento). Luego, simplemente usamos esto como índice para la matriz de repetidores para obtener el campo de contenido de pestaña correcto.

¡Y eso es todo! ¡Ahora ha implementado un número ilimitado de pestañas personalizadas en WooCommerce!

Recuerda que puedes reemplazar WYSIWYG con cualquier tipo de campo. Solo necesita cambiar la forma en que genera el campo en la línea #23.

Conclusión

Escribir su propio código para agregar pestañas personalizadas de WooCommerce es realmente fácil cuando comprende el concepto básico de cómo lo hace WooCommerce. Ni siquiera requiere mucho código. Esta es una solución perfectamente buena para usted que no quiere o no puede invertir en licencias de extensión o simplemente necesita una solución simple para su tienda web.