Cómo agregar archivos de productos personalizados a WooCommerce

¿Le gustaría agregar pestañas de productos personalizadas a su página de productos de WooCommerce?Usted vino al lugar correcto.En este artículo, mostraremos cómo mostrar pestañas de productos personalizadas en la página del producto de su tienda en línea.Pero antes de profundizar esto, entendemos mejor cuáles son las pestañas del producto y por qué podría desear agregar una pestaña de producto personalizada en su producto WooCommerce.En resumen, comencemos con la idea básica de las pestañas de productos.¿Cuáles son las pestañas de productos en WooCommerce?Las pestañas del producto ayudan a organizar la página del producto agrupando información similar en una o más pestañas.Cada pestaña individual contiene un cierto conjunto de datos y se separa del resto de los detalles del producto.De esta manera, la información se vuelve fácilmente accesible, menos concurrida, visualmente agradable y fácil de seguir.

La mayoría de los productos hoy en día tienen mucha información esencial para comunicarse al comprador. Pero, acomodar toda esta información en un solo lugar puede ser difícil. Por lo tanto, a menudo verá varias pestañas de productos en las páginas de los productos, como una descripción breve, descripción larga, especificaciones técnicas, revisiones y más. Espero que esto te dé una idea de las pestañas de productos. Ahora, echemos un vistazo a algunas de las razones por las cuales es posible que necesite agregar pestañas de productos personalizados a WooCommerce. ¿Por qué agregar pestañas de productos personalizados a WooCommerce? Arriba, vi que las pestañas de productos son un excelente medio para organizar la información del producto. Sin embargo, las pestañas predeterminadas no tienen suficiente espacio para completar toda la información adicional. ¿Qué sucede si desea incluir una descripción larga, especificaciones técnicas, archivos técnicos, tutoriales de video, etc.? Será difícil para usted organizar toda esta información con pestañas predeterminadas.
Sin embargo, al agregar una pestaña de producto personalizada para cada conjunto de información, puede organizar los detalles del producto de una manera mucho mejor. También le brinda la libertad de agregar toda la información necesaria sin preocuparse por completar la página y abrumar al usuario. En cuanto a los clientes, las pestañas de productos ayudan a los compradores a identificar la información que les interesa e ignora el resto. Por ejemplo, un usuario ordinario puede no estar interesado en especificaciones técnicas detalladas y será suficiente de la descripción del producto y la larga descripción. Sin embargo, una persona experta en tecnología estará más interesada en las especificaciones técnicas y las hojas de datos, lo que facilitará la búsqueda de la información necesaria. Además, como propietario de una tienda, puede usar las pestañas personalizadas para resaltar las políticas clave de la empresa. El usuario debe estar al tanto. Por ejemplo, puede agregar una pregunta frecuente para responder las preguntas más comunes. Del mismo modo, puede agregar una política de devolución a una pestaña separada, etc. Por lo tanto, siempre es aconsejable organizar la información de su producto en productos fáciles de seguir. Para que su usuario logre lo que quiere de la manera más fácil posible, sin pasar por ningún dolores de cabeza.
Hasta ahora, espero que hayas entendido la importancia de las pestañas personalizadas de productos de WooCommerce. Ahora pasemos al siguiente paso y agregemos pestañas de productos personalizadas a WooCommerce. Cómo agregar archivos de productos de WooCommerce personalizados Se pueden agregar pestañas de productos personalizados en WoCommerce de 2 maneras principales:
Usando un complemento
Desde un punto de vista programático, echamos un vistazo a ambos métodos uno por uno. Comenzaremos con el método de complemento. Así que hundamos. 1. Agregue pestañas de productos personalizados utilizando un complemento Hay más complementos de WordPress para agregar pestañas de productos de WooCommerce personalizadas, por lo que no dude en usar ninguno de ellos. Sin embargo, para la demostración, utilizaremos el complemento de archivos de productos personalizados para WooCommerce desarrollado por Yikes, Inc.
El complemento viene en versión gratuita y premium. La versión gratuita cubre los requisitos básicos. Sin embargo, si está interesado en funciones más avanzadas, puede optar por planes premium, que comienzan desde $ 29.99 por año con 1 año de actualizaciones y soporte. Ahora veamos cómo podemos usar el complemento para agregar pestañas de productos personalizadas a WoCommerce. ¡Vamos! 1.1. Instale y active el complemento primero, debe instalar y activar el complemento en su sitio para instalar el complemento, acceder al tablero de administración de WP y navegar por complementos> Agregar nuevo. Busque el complemento de archivos de productos personalizados para WooCommerce de Yikes, Inc. Y haga clic en el botón Instalar ahora para instalar el complemento. Una vez que se complete la instalación, presione la activación para activar el complemento en su sitio.
Si desea utilizar la versión premium o un complemento premium, deberá instalar el complemento manual. ¡Eso es genial! Ahora ha instalado con éxito el complemento en su sitio es el momento de agregar pestañas de productos personalizadas utilizando el complemento de archivos de productos personalizados para WooCommerce. 1.2. Agregue archivos de productos personalizados a los productos WooCommerce después de que el complemento esté activo, puede agregar archivos de productos personalizados a un producto de WooCommerce desde la página de edición de productos. Desde el tablero de administración de WP, explore los productos> todos los productos. Ahora, coloque el cursor sobre el producto que desea agregar archivos personalizados y haga clic en Editar. Esto abrirá la página de edición del producto. Desplácese hacia abajo hasta la sección de datos del producto y haga clic en archivos personalizados. Tendrá dos opciones, agregará una pestaña y agregue una pestaña guardada (más sobre esto más adelante). Haga clic en el botón Agregar una pestaña y se abrirá el formulario de pestaña personalizado.

En el formulario de nueva pestaña, especifique el título de la pestaña y agregue contenido relevante. Siéntase libre de agregar texto, imágenes, enlaces, multimedia, etc. Además, puede agregar más pestañas personalizadas haciendo clic en el botón Agregar una pestaña en la parte inferior. Si tiene más de una pestaña personalizada, puede cambiar su pedido moviendo archivos. Después de haber terminado, presione el archivo Salvare para guardar pestañas personalizadas recién creadas.

¡Tu lo quieres! Tan fácil. Ahora ha creado su propia pestaña de productos personalizados. Ahora navegue por el frente de la página de su producto para ver la pestaña personalizada en vivo en su sitio.

Sin embargo, agregar un archivo personalizado a varios productos, uno por uno, puede ser agotador y no es un enfoque efectivo. Por lo tanto, el complemento viene con una función de archivo guardada. Echemos un vistazo a las pestañas guardadas y veamos cómo podemos agregarlos a los productos de WooCommerce. 1.3. Crear hojas guardadas Las pestañas guardadas actúan como plantillas que puede ahorrar para su uso adicional. Una vez que haya creado una pestaña guardada, puede agregarlo a un producto en solo unos pocos pasos. Por lo tanto, las pestañas guardadas hacen que agregar pestañas personalizadas a varios productos de manera rápida y fácil. Para crear una pestaña guardada, acceda al tablero de administración de WP y haga clic en productos personalizados. Aquí, verá una lista de todas las pestañas guardadas que ha creado anteriormente. Ahora, haga clic en el botón Agregar una pestaña en la parte superior y lo llevará al nuevo formulario de pestaña.

En el formulario de nueva pestaña, especifique el título de la pestaña y agregue un nombre de referencia. Luego agregue el contenido de pestaña. Estos pueden incluir texto, imágenes, multimedia, enlaces, etc. Después de estar satisfecho con todos los cambios, haga clic en el botón de pestaña Salvare para guardar la pestaña.

Además, puede agregar cuántas pestañas desea para usar más. Para encontrar todas las pestañas guardadas que creó, vaya al Dashboard de Admin> Archivos de producto personalizados. Aquí encontrará todas las pestañas guardadas y puede editar, eliminar o agregar nuevas pestañas desde aquí.

Una vez que haya creado sus propias pestañas guardadas, puede agregarlas a cualquier producto en solo unos pocos clics. Veamos cómo hacer eso. 1.4. Agregar archivos guardados a los productos WooCommerce Agregar un archivo guardado a un producto sigue un proceso similar a agregar un archivo regular. Vaya a la página de edición del producto y desplácese hacia abajo a la sección de datos del producto. Haga clic en el archivo personalizado y luego haga clic en el botón Agregar una pestaña guardada. Elija entre la lista guardada que desea agregar. Cargará todos los datos de la pestaña seleccionada. Ahora, puede guardarlo tal como está o hacer cambios según sus requisitos. Puede agregar pestañas más personalizadas haciendo clic en los botones respectivos y reordando las pestañas a su preferencia. Finalmente, hay un cuadro de selección para reemplazar una pestaña guardada. Básicamente, desconecte la pestaña de la pestaña guardada original. Por lo tanto, en el futuro, si realiza cambios en la pestaña guardada, no se reflejarán para este producto.
Después de haber guardado la pestaña Producto personalizado, aparecerá inmediatamente en la página del producto. Para verificar, simplemente navegue el front-end de su sitio y acceda a la página del producto y vea la pestaña personalizada en acción.

Arriba, vi cómo agregar pestañas de productos personalizadas a WooCommerce usando un complemento de terceros. Sin embargo, hay otra forma de lograr la misma funcionalidad, a saber, el uso de fragmentos de código personalizados. Veamos cómo puede agregar pestañas personalizadas a la página del producto WooCommerce programáticamente. 2. Agregue las pestañas de productos personalizados programáticamente antes de pasar a los fragmentos de código para agregar pestañas de productos personalizados a WoCommerce, primero veamos cómo agregar fragmentos de código a WooCommerce. 2.1. Vaya al editor de código de WordPress primero, le recomendamos que cree una copia de seguridad completa de su sitio y use un tema infantil para editar las funciones.php. Si no lo sabe, vea nuestra guía sobre cómo crear un tema para niños. Como alternativa, consulte estos arados para obtener la tarea de los niños si no desea hacerlo manualmente. Una vez que haya terminado de crear un tema infantil, vaya al tablero de administración de WP y explore el editor de temas Look>. Asegúrese de seleccionar el tema infantil y abrir el archivo Functions.php. Ahora puede agregar fragmentos de código personalizados al final de las funciones.php. Una vez que haya terminado, haga clic en el botón Actualizar el archivo para que los cambios ingresen en vigor. Alternativamente, puede usar los fragmentos de código para agregar fragmentos de código personalizados a su sitio, debe instalar el complemento desde el almacén WordPress. Simplemente vaya a WP Admin Dashboard> Plugins> Agregar nuevo. Busque el complemento de fragmentos de código e instálelo en su sitio.

Después de eso, acceda a la configuración del complemento en el tablero de administración de WP y haga clic en el Fragmento NUEVO AGREGAR un nuevo fragmento para agregar el fragmento de código personalizado. Además, puede agregar cuántos fragmentos de código personalizados son necesarios. Una cosa interesante sobre el uso de este complemento es que no tendrá que crear ningún tema infantil, porque el complemento está a cargo de los fragmentos de código solo. Sin embargo, es aconsejable tener un tema infantil para asegurar su sitio si algo no está bien. Ahora que ha aprendido cómo agregar fragmentos de código a un sitio de WordPress, veamos cómo podemos agregar pestañas de productos personalizadas a WooCommerce utilizando fragmentos de código personalizados. 2.2. Agregue archivos de productos personalizados a todos los productos de WooCommerce Agregar un archivo de producto personalizado a todos los productos simultáneamente puede ser muy efectiva, porque la información sigue siendo la misma para todos los productos. Por ejemplo, puede agregar preguntas frecuentes que siguen siendo las mismas para todos los productos o al menos para una determinada categoría de productos. El siguiente fragmento de código se puede usar para agregar una pestaña global personalizada y también para completarla con contenido relevante. // Agregar una nueva pestaña de productos personalizados

add_filter (‘wooCommerce_product_tabs’, ‘ql_new_custom_product_tab’);

Función ql_new_custom_product_tab ($ tabs) {

// Para agregar más pestañas, actualice la etiqueta para cada nueva pestaña en las pestañas $ [‘xyz’], por ejemplo, custom_tab2, my_new_tab, etc.

$ tabs [‘custom_tab’] = matrix (

“Título” => __ (“Pestaña Producto personalizado”, “WoCommerce”), // Cambiar “Pestaña de producto personalizado” con cualquier texto que desee “=> 50,

‘callback’ => ‘ql_custom_product_tab_content’


);
Devuelve $ pestañas;
}
// Agregar contenido a una pestaña de productos personalizados
La función ql_custom_product_tab_content () {
// Contenido de la pestaña personalizada
// Puede agregar cualquier código PHP aquí y se mostrará en la pestaña personalizada recién creada
Echo ”

Contenido personalizado de la pestaña del producto

“;
echo ‘
lorem ipsum dolor sit amet, consecuencia adipiscing elit. Facilisis de Aenean en Dui Aget Rutrum. Morbi Quis Sodales Felis.
‘;
Echo ”

;
} Completado! Ahora puede explorar el front-end de su sitio y verificar sus cambios.
Ahora, el fragmento anterior solo se puede usar para agregar una pestaña de productos personalizados a todos los productos de WooCommerce. Pero, ¿qué sucede si tiene que agregar pestañas de productos personalizadas solo a ciertos productos? Bueno, tenemos un fragmento para ti que llevará el trabajo a su fin. Vamos a ver. 2.3. Agregue pestañas de productos personalizadas solo a ciertos productos primero, debe tomar la ID del producto del producto, a la que desea agregar una pestaña personalizada. Simplemente vaya al tablero de administración de WP y explore productos> todos los productos. Coloque el cursor sobre el producto deseado y mostrará la identificación del producto. Guarde esta ID de producto porque más tarde debemos agregarla a nuestro fragmento de código.
Copie e inserte el siguiente fragmento de código en el archivo Functions.php o en el complemento de fragmentos de código, independientemente del método que utilice. No olvide reemplazar el sustituyente de ID del producto con su ID de producto real. // Agregue un nuevo producto personalizado tab_filter (‘woCommerce_product_tabs’, ‘ql_specific_custom_product_tab’);
QL_SPECICI_CUSTOM_PRODUCT_TAB ($ tabs) {
Producto Global $;
// tomar la identificación del producto. Reemplácelo con la ID de producto real
if ($ product-> get_id () == 1911) {
// Agregar la nueva pestaña
// Para agregar múltiples pestañas, actualice la etiqueta para cada nueva pestaña en $ pestañas [‘xyz’], por ejemplo, custom_tab, my_new_tab, etc.

$ tabs [‘especific_product_tab’] = matrix (

“Título” => __ (“Pestaña de producto específica”, “WooCommerce”), // Cambiar “Pestaña de producto específica” con cualquier texto que desee
‘Prioridad’ => 50,
‘callback’ => ‘ql_specific_product_tab_content’
);
}
Devuelve $ pestañas;
}
// Agregar contenido a una pestaña de productos personalizados
QL_SPECICI_PRODUCT_TAB_CONTENT () Función {
// Contenido de la pestaña personalizada
// Puede agregar cualquier código PHP aquí y se mostrará en la pestaña personalizada recién creada
Echo ”

Contenido específico de la pestaña del producto

“;
echo ‘
lorem ipsum dolor sit amet, consecuencia adipiscing elit. Facilisis de Aenean en Dui Aget Rutrum. Morbi Quis Sodales Felis.
‘;
Echo ”

;
} Esto es. El producto personalizado recién creado ahora se aplica al producto deseado y se mostrará solo para el producto.
Hasta ahora, ha visto los fragmentos de código para agregar pestañas de productos personalizadas a WooCommerce para productos individuales y para todos los productos. Vamos un poco más lejos y veamos algunos fragmentos de código para personalizar las pestañas del producto. 2.4. Cambie el nombre de las pestañas del producto A veces, es posible que deba reemplazar el título de pestaña personalizado o incluso cambiar el nombre de un archivo predeterminado. Por ejemplo, es posible que desee cambiar la pestaña de revisión para las evaluaciones en caso de un programa de televisión o una película. Usando el fragmento de código a continuación, es fácil cambiar el título del producto personalizado. // Cambie el nombre de las pestañas del producto en wooCommerceadd_filter (‘wooCommerce_product_tabs’, ‘ql_rename_product_tabs’, 98);
QL_RENAME_PRODUCT_TABS Función ($ tabs) {
// Reemplazar la etiqueta de pestañas dentro de la matriz $ Tabs [‘xyz’] con su etiqueta de pestaña real
$ Tabs [‘revisiones’] [‘title’] = __ (‘evaluaciones’); // cambie el nombre de la pestaña de revisión
$ tabs [‘custom_tab’] [‘title’] = __ (‘pestaña personalizada actualizada’); // Cambiar el nombre de la pestaña personalizada creada por el usuario.
Devuelve $ pestañas;
} ¡Eso es genial! Las pestañas de su producto ahora han sido renombradas. Ahora puede explorar el front-end de su sitio y verificar sus cambios usted mismo.
2.5. La pestaña de reordinación El siguiente fragmento de código le permite cambiar el orden de las pestañas del producto. Funciona sobre la base de un valor prioritario. El número más pequeño indica una prioridad más alta, y un número más alto indica una prioridad menor. Por lo tanto, la pestaña con la más alta prioridad se muestra la primera, seguida de la siguiente pestaña, y la pestaña con la más mínima prioridad será en la última posición. Si echa un vistazo al código a continuación, utiliza algunas pestañas de productos para demostrar cómo funciona. Puede agregar más pestañas de productos si es necesario y luego puede reordinarlas de acuerdo con sus preferencias. Asegúrese de reemplazar las tetas con las pestañas reales. // Reordinar las pestañas del producto en wooCommerceadd_filter (‘wooCommerce_product_tabs’, ‘ql_reorder_product_tabs’, 98);
QL_REORDER_PRODUCT_TABS Función ($ tabs) {

// reordera las pestañas de acuerdo con el valor de la prioridad
// Reemplazar la etiqueta de pestañas dentro de la matriz $ Tabs [‘xyz’] con su etiqueta de pestaña real
$ Tabs [‘Descripción’] [‘Prioridad’] = 5; // primero la descripción
$ tabs [‘custom_tab’] [‘prioridad’] = 10; // La segunda pestaña personalizada.
$ tabs [‘especific_product_tab’] [‘prioridad’] = 15; // La pestaña de producto específica.
$ tabs [‘revisiones’] [‘prioridad’] = 20; // Las últimas revisiones
Devuelve $ pestañas;
} ¡Eso es todo! Ahora tiene pestañas de productos ordenadas en su propio pedido personalizado. Ahora puede explorar el front-end de su tienda WooCommerce para verificar sus cambios.

2.6.Elimine las pestañas ahora, ¿ha agregado todas estas pestañas, pero si desea eliminarlas ahora?Bueno, parece que hay un fragmento de código que puede eliminar todas las pestañas de productos no deseados de la página del producto.El siguiente fragmento de código funciona bien para pestañas de productos predeterminadas y personalizadas.Recuerde cambiar el título de la pestaña con su propio título de pestaña.// elimina las pestañas del producto de wooCommerceadd_filter (‘wooCommerce_product_tabs’, ‘Ql_remove_custom_product_tabs’, 98);
Función ql_remove_custom_product_tabs ($ tabs) {
// Reemplazar la etiqueta de pestañas dentro de la matriz $ Tabs [‘xyz’] con su etiqueta de pestaña real
Unset ($ tabs [‘revisiones’]);// eliminar la pestaña de revisión
grasa ($ tabs [‘descripción’]);// Eliminar la pestaña Descripción
Unset ($ tabs [‘custom_tab’]);// Eliminar la pestaña personalizada creada por el usuario.
Devuelve $ pestañas;
} Eso es todo. Sus pestañas de productos no deseados ahora se han eliminado con éxito. Ahora puede explorar el front-end de su tienda WooCommerce y verificar sus cambios. Arriba, vi cómo agregar pestañas de productos personalizadas a WooCommerce utilizando complementos de tercera parte. Sigamos y veamos algunas otras formas de organizar los productos de WooCommerce. Bonificación: cómo clasificar los productos de WooCommerce que clasificar los productos en un determinado orden hace dos cosas. En primer lugar, le permite resaltar ciertos productos llevándolos a la parte superior de la página. En segundo lugar, facilita la búsqueda o la realización de productos de los clientes, porque los productos están organizados de manera lógica. Opciones de clasificación de productos En WooCommerce predeterminado, WooCommerce proporciona seis opciones de clasificación y le permite seleccionar una de ellas como un método de clasificación predeterminado. Estas opciones incluyen: clasificación predeterminada (clasificación personalizada + nombre): los productos, por defecto, se clasifican de acuerdo con sus nombres, pero al mismo tiempo le permite ordenar los productos personalizados. Esto es útil para resaltar productos que no coinciden con un solo criterio. Popularidad (ventas): ordene los artículos por el número de ventas en orden descendente, trayendo los mejores artículos de venta a la cima. Evaluación promedio: ordene los productos después de la evaluación promedio en orden descendente. Los productos con la calificación más alta obtienen la primera posición, seguidas por la siguiente y así sucesivamente. Ordenar por lo último:
Ordene los productos de acuerdo con el momento en que se agregan a la tienda.Esto lleva sus últimos productos a la cima, lo cual es bueno para resaltar las últimas incorporaciones.Clasificación por precio (ASC, DESC): ordene el producto de acuerdo con su precio, en orden ascendente o descendente, después de su elección. Cambie el método predeterminado de clasificación en WooCommerce ahora, para cambiar el método de clasificación predeterminado en WooCommerce, vaya a WP al WP Dashboard de administrador y navegar para mirar> personalización.Esto lo llevará a personalizar el tema. Dentro de la costumbre de la tarea, vaya al menú Catálogo de productos.Ahora acceda a la sección de clasificación de producto predeterminada y haga clic en el menú desplegable.Seleccione su método de clasificación favorito y presione la publicación para guardar sus cambios.
¡Bravo! Ahora ha seleccionado su método de clasificación de productos favorito. Sin embargo, estas no son las únicas formas de ordenar sus productos. Hay muchas otras formas y métodos por los cuales puede clasificar los productos de WooCommerce. Si está interesado, consulte nuestra guía detallada sobre cómo clasificar los productos de WooCommerce. Conclusión Una tras otra, las pestañas de productos personalizados son realmente beneficiosos, ya que le ayuda a presentar información sobre un producto de una manera más organizada. La organización de la información del producto en archivos individuales facilita a los clientes para identificar la información necesaria y tomar una mejor decisión de compra. Además, permite a los propietarios de tiendas agregar toda la información esencial sobre el producto sin completar una página completa y abrumar al usuario. En cierto modo, es un beneficio mutuo para todos. Para resumir, hemos visto varias formas de agregar pestañas personalizadas de producto en WoCommerce: usando un complemento
Programáticamente

Comencé con el complemento de archivos de productos personalizados para WooCommerce y vi cómo agregar pestañas de productos personalizadas usando el complemento. También hemos visto la característica guardada, lo que nos permite guardar las pestañas con frecuencia utilizadas para su uso posterior. Después de eso, observamos los fragmentos de código para agregar pestañas de productos personalizadas a WooCommerce. He visto fragmentos para agregar pestañas de productos a todos los productos, así como a ciertos productos. Además, también observamos los fragmentos de código para cambiar el nombre, reordinar y eliminar las pestañas de productos. Finalmente, terminamos mirando las opciones de clasificación de productos de WooCommerce para organizar la página de la tienda. ¿Intentó agregar pestañas de productos personalizadas a WooCommerce? ¿Qué métodos usaste? ¿Y cómo fue tu experiencia? Háganos saber en los comentarios a continuación. Si desea saber más sobre cómo mejorar su sitio de WooCommerce, aquí hay algunas publicaciones que pueden interesarle: cómo personalizar las plantillas de WooCommerce
Los mejores complementos para personalizar la página del producto de WooCommerce
Cómo eliminar la pestaña de información de WooCommerce adicional