• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Rellenar un desplegable de Gravity Forms con las variaciones de atributos de un producto de WooCommerce de forma dinámica

Descubre en este tutorial cómo conseguir que un campo desplegable de Gravity Forms se rellene de forma dinámica con las variaciones de los atributos de un producto de WooCommerce.

Gravity Forms es sin duda mi plugin de formularios favorito. Lo utilizo en todos mis proyectos y en la mayoría de los de mis clientes.

Y uno de los motivos es que, gracias a sus hooks y filtros, puedes conseguir cosas muy chulas con un poco de código.

A raíz del tutorial donde explicaba cómo conseguir que un campo desplegable muestre las entradas de forma dinámica, una suscriptora me preguntó si podía conseguir lo mismo para los atributos de un producto de WooCommerce.

Así que me puse manos a la obra. Este sería el resultado final:

desplegable Gravity Forms rellenado dinamicamente atributos producto
Resultado final del desplegable mostrando los atributos dinámicamente.

Vamos a ver cómo puedes llevarlo a la práctica.

Pasos para que un desplegable de un formulario de Gravity Forms cargue dinámicamente los atributos de un producto de WooCommerce

1. Añade un campo desplegable en Gravity Forms

Puedes crear el formulario de Gravity Forms a tu gusto, lo único que tendrás que personalizar es el campo de desplegable donde quieras añadir taxonomías dinámicas.

Campo de desplegable de Gravity Forms.

Para ello debes de hacer dos cosas:

  1. En la pestaña Apariencia añade la clase «populate-attributes».
  2. En la pestaña Avanzado, haz clic sobre la opción «Permitir al campo rellenarse dinámicamente»

El campo debería quedarte algo similar a esto:

No hace falta que modifiques las opciones del desplegable en la pestaña General ya que se actualizarán de forma automática una vez que hagas el siguiente paso.

2. Utiliza los filtros de Gravity Forms

Ahora es cuando le vas a sacar partido a los filtros de Gravity Forms.

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

En este caso, el código está pensado para un formulario con el ID=8. Es decir, que si en tu caso tienes un ID=1 deberás cambiar el final de los filtros de _8 a _1.

Los atributos de los productos de WooCommerce son una taxonomía (por eso usas get_terms) y siempre comienzan por pa_.

Por eso, para personalizarlo también tendrás que modificar:

  • ‘pa_attribute’ por el nombre del atributo que quieras usar.
  • ‘Selecciona una opción’ por el texto que quieras que se muestre.
campo desplegable Gravity Forms rellenado dinámicamente atributos producto
Campo desplegable rellenado dinámicamente en Gravity Forms.

Una vez que apliques el snippet, verás que las distintas variaciones del atributo del producto que hayas elegido también se muestran en la parte de administración del formulario.

Y en la parte frontal de la web tendrás el desplegable que se irá actualizando automáticamente según añadas nuevas categorías.

desplegable Gravity Forms rellenado dinamicamente atributos producto
Resultado final del desplegable mostrando los atributos dinámicamente.

Conclusión

Ahora ya sabes cómo conseguir que un campo desplegable de Gravity Forms se actualice dinámicamente con los atributos de cualquier producto de WooCommerce.

¿Alguna duda? Te leo en los comentarios.

Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉

Gravity Forms PHP Productos WooCommerce

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?