• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Formulario de cotización en WooCommerce sin plugins

Formulario de cotización en WooCommerce sin plugins

Formulario de cotización en WooCommerce sin plugins

[ hace 5 meses ] [ Actualizado: hace 4 meses ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Avanzado] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo agregar un formulario de contacto sin plugins, sin embargo en este caso vamos a adaptar el código para mostrar un formulario de cotización en la página de productos de WooCommerce.

 

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:

Formulario solicitud cotización WooCommerce

 

Código PHP para solicitar cotización en la página de productos

Puedes agregar el siguiente código como parte del archivo functions.php de tu tema hijo.

En el código anterior:

  • Usamos el hook woocommerce_share que hace referencia a la función dcms_show_request_quote_form
  • A través de esta función crearemos el código HTML del formulario
  • Antes validamos si venimos de una respuesta, esto para mostrar el mensaje en lugar del formulario
  • La otra parte del código usa los hooks para el procesamiento del formulario, ambos hacen referencia a la función dcms_mail_request_quote
  • Parte del nombre del hook usado debe ser process_form_quote que es el que enviamos en el campo oculto del formulario
  • Dentro de la función capturamos los datos del formulario y realizamos el envío de correo

 

Como referencia, puedes revisar el artículo de formulario de contacto sin plugins.
Es posible también realizar el formulario usando Ajax, puedes revisar el artículo de formulario de contacto con Ajax en WordPress como referencia.
Posiblemente te interese no mostrar los precios cuando muestras este formulario de cotización, para esto puedes revisar cómo activar el modo catálogo en WooCommerce.

 

Código CSS

Opcionalmente puedes usar el siguiente código CSS para dar un mejor aspecto al formulario, puedes agregar este código al final del archivo style.css de tu tema hijo.

.msg-request-quote{
    background-color:orange;
    color:white;
    padding:10px 20px;
    text-transform: uppercase;
}
#frm-quote{
    padding:5px;
}
#frm-quote label{
    display: block;
    margin-top:10px;
}
#frm-quote textarea,
#frm-quote input{
    width: 100%;
}
#frm-quote #lbl-terms{
    display: inline-block;
    margin-bottom: 15px;
}
#frm-quote #terms{
    width: auto;
}

 

Conclusión

Como has podido comprobar, es posible agregar la funcionalidad de un formulario de cotización a los productos de WooCommerce de manera simple a través de código.

 
¿Aún con dudas?, en el siguiente código se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Activar el modo catálogo en WooCommerceActivar el modo catálogo en WooCommerce
  • Botones para el campo de cantidad en WooCommerceBotones para el campo de cantidad en WooCommerce
  • Tabs a acordeón en página de productos de WooCommerceTabs a acordeón en página de productos de WooCommerce
  • Formulario de contacto sin pluginsFormulario de contacto sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Insertar código fuente en WordPress usando Prism

Recomendaciones para editar código en WordPress

Sincronizar WooCommerce y Google Sheets

Productos de ejemplo en WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados