¿Cómo personalizar una página de producto de WooCommerce con campos de texto?

Publicado: 2021-12-29

Si crea una tienda WooCommerce y es un creador de sitios web, probablemente sepa lo frustrante que puede ser si desea agregar un campo de texto en particular y no sabe cómo personalizar la página del producto WooCommerce o qué complemento de WordPress debe usar. En esta publicación, intentaré ayudarlo con este problema y le diré cómo personalizar una página de producto de WooCommerce con campos de texto utilizando el complemento Campos de producto flexibles.

Tabla de contenido

  1. Editar página de producto de WooCommerce
  2. Campos disponibles en la versión gratuita del plugin
  3. Campos disponibles en la versión pro del complemento
  4. Agregar campo de texto a una página de producto
  5. Tipo de campo de párrafo
  6. Tipo de campo de correo electrónico
  7. Tipo de campo de URL
  8. tipo de campo HTML

En primer lugar, si desea personalizar una página de producto de WooCommerce, necesitará un complemento de WordPress adecuado para comenzar. Recomendamos el complemento Flexible Product Fields , que básicamente tiene todo lo que necesita y todas las características principales están disponibles en la versión gratuita. Este complemento de producto personalizado de WooCommerce se actualizó recientemente y se agregaron hasta 10 nuevos tipos de campo a la versión gratuita.

Campos de productos flexibles para WooCommerce

Crea un asistente de producto para vender grabados, envoltorios de regalo, mensajes de regalo, tarjetas de visita, sellos y opcionalmente cobrar por ello (fijo o porcentaje).

Descargar o Ir a WordPress.org
Más de 10 000 instalaciones activas
Última actualización: 2022-10-13
Funciona con WooCommerce 6.7 - 7.0.x

Mire este video y descubra lo que puede esperar de este complemento en su versión gratuita:

Como ya se dijo, recientemente este complemento de WooCommerce se actualizó y hay un montón de campos libres, que lo ayudarán a personalizar la página de su producto WooCommerce de acuerdo con sus necesidades. Te explicaré brevemente cómo funcionan algunos de ellos y cómo se pueden usar para personalizar una página de producto de WooCommerce.

Editar página de producto de WooCommerce

Echemos un vistazo a todos los campos disponibles en el complemento de campos de productos flexibles:

Campos disponibles en la versión gratuita del complemento:

  • Correo electrónico (nueva función)
  • URL (Nueva función)
  • HTML (Nueva función)
  • Encabezado (Nueva función)
  • Párrafo (Nueva función)
  • Casilla de verificación múltiple (nueva función)
  • Radio con colores (Nueva función)
  • Tiempo (Nueva función)
  • Color (Nueva función)
  • Imagen (Nueva función)
  • Texto
  • área de texto
  • Número
  • Caja
  • Seleccione
  • Selección múltiple
  • Radio
  • radio con imagenes

Campos disponibles en la versión pro del complemento:

  • Carga de archivos (nueva función)
  • Fecha con opciones avanzadas de exclusión de fecha

Sin duda hay bastante donde elegir, sobre todo en la versión gratuita de este plugin para WordPress.

Agregar campo de texto a una página de producto

Una vez que haya instalado y activado los campos de productos flexibles (la versión gratuita es suficiente), aquí es donde comienza la verdadera diversión.

El complemento estará visible y listo para usar en Productos → Campos de productos flexibles. Haga clic en él y agregue "Agregar nuevo" , y asígnelo a un producto que ya haya creado antes.

Complemento de campos de productos flexibles
Complemento de campos de productos flexibles

Después de eso, verá todos los campos que puede agregar usando el complemento de Campos de productos flexibles, ordenados por categorías:

Página de producto de WooCommerce: tipos de campos y categorías
Página de producto de WooCommerce: tipos de campos y categorías

Centrémonos en algunos campos creados recientemente, que se agregaron como nuevas características hace un tiempo.

Tipo de campo de párrafo

Use este tipo de campo si necesita proporcionar información adicional o una descripción del producto en su página de producto de WooCommerce. Funciona muy bien si desea utilizar este campo de texto para describir el producto o servicio que está vendiendo.

En la etiqueta del campo, inserte el texto que desea mostrar:

Personalice la página del producto WooCommerce: edite el campo de texto del párrafo
Personalice la página del producto WooCommerce: edite el campo de texto del párrafo

Luego haga clic en Actualizar para guardar sus cambios. Así es como se verá la página de su producto después de agregar el campo de párrafo:

Personalice la página del producto de WooCommerce: agregue un campo de texto de párrafo
Personalice la página del producto de WooCommerce: agregue un campo de texto de párrafo

Tipo de campo de correo electrónico

Otro tipo de campo interesante y útil es el campo de entrada de correo electrónico. Permite a sus clientes agregar información de dirección de correo electrónico al producto. Además, también verifica si la dirección de correo electrónico introducida no es errónea. Aquí hay una breve guía sobre cómo agregar este campo personalizado a una página de producto:

Seleccione el tipo de campo de correo electrónico:

Personalice la página de productos de WooCommerce: elija su campo de texto
Personalice la página de productos de WooCommerce: elija su campo de texto

Y luego, hay 3 campos que puede usar para personalizar este tipo de campo, mientras que el marcador de posición y la información sobre herramientas no son obligatorios, pero son bastante útiles.

Editar página de producto de WooCommerce: edición de campo de texto de correo electrónico
Editar página de producto de WooCommerce: edición de campo de texto de correo electrónico

Y este es el resultado final de la muestra:

Editar página de producto de WooCommerce: resultado del campo de texto del correo electrónico
Editar página de producto de WooCommerce: resultado del campo de texto del correo electrónico

Tipo de campo de URL

Se puede aplicar un proceso análogo al tipo de campo URL. Simplemente seleccione el campo URL de la lista de campos disponibles y agregue el texto que desea mostrar mientras personaliza la página de su producto WooCommerce. Y listo, ¡ya está listo!

Personalizar la página del producto de WooCommerce: campo de texto URL
Personalizar la página del producto de WooCommerce: campo de texto URL

tipo de campo HTML

Otro tipo de campo agregado recientemente en el complemento de WordPress de Campos de productos flexibles es HTML. Use este campo, por ejemplo, para crear hipervínculos, agregar colores a su texto o cambiar su formato. Como en los ejemplos anteriores, primero debe elegir el tipo de campo HTML de la lista y luego escribir su texto en el código HTML. Estos son solo algunos ejemplos de para qué puedes usarlo:

Personalizar la página del producto de WooCommerce: etiqueta de campo de campo de texto HTML
Personalizar la página del producto WooCommerce: etiqueta de campo de texto HTML

Y listo, así es como se vería en la página de su producto WooCommerce:

Página de producto de WooCommerce: campo de texto HTML
Página de producto de WooCommerce: campo de texto HTML

A partir de ahora, el tipo de campo Título también está disponible en la versión gratuita del complemento. Básicamente, esto significa que puede agregar muchos campos personalizados a una página de producto, sin gastar un centavo en ello.

Además de estos tipos de campos explicados en esta publicación, hay más, que se discutirán y explicarán en las próximas publicaciones del blog, por lo que es mejor que se mantenga actualizado sobre nuestros artículos y se suscriba a nuestro boletín en la parte inferior de la página. ¡Y no olvides comentar y compartir esta publicación si te ha gustado!