Cómo añadir campos personalizados a las páginas de productos de WooCommerce
¿Buscas una forma de añadir campos personalizados a las páginas de productos de WooCommerce?
Ya sea que quieras añadir especificaciones detalladas en una página de productos de WooCommerce o que estés interesado en mostrar variantes de productos alternativos con el clic de un botón, añadir campos personalizados en WooCommerce sólo toma unos momentos de tu tiempo.
Después de eso, eres capaz de personalizar todas las partes de tu panel de control de WooCommerce e incorporar rápidamente la información del sitio que normalmente requeriría la entrada de datos manual.
En este artículo, te mostraremos paso a paso cómo añadir campos personalizados a los productos de WooCommerce utilizando el plugin gratuito Advanced Custom Fields (ACF).
Ejemplos de uso de campos personalizados para WooCommerce
¿Cuándo pueden ser útiles los campos personalizados en WooCommerce?
- Para añadir información adicional del producto para cosas como ordenadores, donde mostrarías especificaciones técnicas como la RAM y la potencia de procesamiento.
- Mensajes promocionales que puedes cambiar rápidamente a otra cosa.
- Elementos multimedia únicos que no se pueden insertar usando las características estándar de WooCommerce, como un vídeo adicional.
- Fechas y horas para cuando tengas una cuenta atrás, una subasta o la fecha de lanzamiento de un producto.
- Opciones de productos extra, además de variantes, que los clientes pueden consultar.
- Párrafos para explicar las instrucciones detalladas de uso de un artículo.
- Ofertas complementarias en las que se presenta al usuario varios productos adicionales que complementan el producto actual. Los ejemplos incluyen accesorios para cepillos de dientes electrónicos o diferentes dijes para una pulsera.
- Cualquier dato inusual o extra que te gustaría incorporar en una página de producto que, o bien no se admite a través de WooCommerce, o bien es más fácil de completar con campos personalizados.
Cómo añadir campos personalizados en las páginas de producto de WooCommerce
En este ejemplo, vamos a hacer un simulacro de tienda de informática que vende ordenadores portátiles. Llevaría una cantidad significativa de tiempo escribir las especificaciones del ordenador para cada nuevo portátil, así que en su lugar, incluiremos campos para seleccionar esas especificaciones basadas en los tipos de ordenadores que vendemos.
Para añadir campos personalizados a los productos de WooCommerce, necesitas instalar el plugin gratuito Advanced Custom Fields en tu sitio de WordPress. A continuación, te explicamos cómo configurarlo…
Campos personalizados avanzados
Aquí se explica cómo añadir campos personalizados en las páginas de producto de WooCommerce paso a paso:
- Crea un nuevo grupo de campos
- Añade tu(s) campo(s) personalizado(s)
- Configura los ajustes adicionales del grupo de campos
- Añade información a los productos
- Muestra la información del campo personalizado en el front-end
Crea un nuevo grupo de campos
En tu panel de WordPress, ve a la nueva pestaña Campos personalizados. A continuación, haz clic en Añadir nuevo junto a Grupos de campos.
Nombra un grupo de campos. Por ejemplo, «Campos de ordenador». Un grupo de campos es una colección de campos que tendrá para un producto o sección de su sitio web, como una lista de especificaciones que quiere que aparezca en todas las páginas de productos de ordenadores portátiles.
Añade tu(s) campo(s) personalizado(s)
Haz clic en el botón Añadir campo para añadir un campo a este grupo.
Cree una:
- Etiqueta del campo – principalmente para su propia referencia.
- Nombre del campo – sirve como las letras que colocará en su propio código personalizado, o shortcode en nuestro caso. Puedes dejarlo como el predeterminado que genera el plugin.
- Tipo de campo – el formato que estás creando para ese campo. Puedes elegir entre opciones como selectores de fecha, casillas de verificación, desplegables y botones de radio.
También puedes poner algunas instrucciones para ti o para el desarrollador, junto con una especificación de si este campo es obligatorio o no.
Si estás trabajando con un campo que tiene múltiples opciones (como los botones de radio), a continuación tendrás que añadir tus Opciones de campo. Estas son las opciones de selección que desea que aparezcan en el backend de su página de producto, como los diferentes procesadores de núcleo.
El resto de los ajustes son normalmente opcionales, como el valor por defecto, el diseño, y si desea mostrar el valor o la etiqueta.
Cuando haya terminado con un campo o grupo, haga clic en el botón Publicar o Actualizar para asegurarse de que se guarda.
Para añadir más campos a su grupo, haga clic en el botón Añadir campo de nuevo.
Así es como se ve con cuatro campos en este grupo para:
- CPU
- Memoria
- Sistema operativo
- Fecha de lanzamiento
Configurar los ajustes adicionales del grupo de campos
Una vez que el grupo de campos está hecho, desplácese hasta el módulo Ubicación. Aquí es donde identificas dónde quieres que aparezca el grupo de campos en tu tablero de WordPress.
Establezca el Tipo de Publicación igual a Producto. O, si quieres ser más específico, también puedes elegir una categoría específica de productos.
Debajo de Ajustes, asegúrate de que el Grupo de Campos está Activo. Esto le permite verlo en esas páginas de productos y potencialmente mostrar las selecciones de campo a sus clientes.
El estilo depende de sus propias preferencias. Lo mismo puede decirse de la posición, la colocación de la etiqueta y la colocación de las instrucciones. Eso es todo preferencia personal y cómo quieres formatear tu backend. En caso de duda, simplemente dejarlos como los valores predeterminados.
Establecer el número de orden si usted tiene múltiples grupos de campos que aparecen en las páginas de productos. Esto controla el orden en que se muestran los diferentes grupos de campos.
También puede establecer una descripción y ocultar ciertos detalles en su pantalla.
Añadir información a los productos
A continuación, navegue hasta el editor de un producto en el que desee añadir campos personalizados.
Si todos los ajustes están configurados correctamente, debería ver los campos personalizados debajo del cuadro de datos del producto.
Para nuestro ejemplo, si usted fuera a añadir una nueva página de producto portátil, puede elegir la CPU, la memoria, el sistema operativo y la fecha de lanzamiento.
Mostrar la información de los campos personalizados en el front-end
Para terminar las cosas, necesita mostrar la información de sus campos personalizados en la página de producto único del front-end. Usted puede agregar esta información en cualquier lugar, pero buenos puntos de partida son en la descripción larga o corta del producto.
Para mostrar la información del campo en el front-end, utilice el shortcode . Añada el nombre del campo entre las comillas:
Puede encontrar el nombre del campo para cada campo en la interfaz del editor del grupo de campos:
Para terminar, pulse el botón Publicar o Actualizar.
Cuando abra su producto en el front-end, debería ver sus campos personalizados donde ha añadido los shortcodes:
¿Tiene alguna pregunta sobre cómo añadir campos personalizados?
Una ventaja de usar Advanced Custom Fields sobre los plugins alternativos de creación de campos es que puedes colocar tus nuevos campos en cualquier lugar de tu sitio, incluyendo las páginas de producto, las entradas y los módulos de carrito – personalizando tu panel de control y agilizando el proceso de creación de contenido.
Es una maravillosa opción para expandir tu creatividad y hacer la tediosa tarea de construir páginas de producto un poco más simple.
Entendemos que el plugin Advanced Custom Fields tiene un poco de curva de aprendizaje, así que si tienes alguna idea o pregunta sobre cómo añadir campos personalizados en WooCommerce, ¡déjanos saber en los comentarios de abajo!
También puedes echar un vistazo a nuestro tutorial completo sobre ACF para aprender más sobre cómo utilizar este flexible plugin.