Formulario para solicitar cotización en WooCommerce sin usar plugins

En este artículo, te mostraremos cómo implementar un formulario de cotización en WooCommerce, integrándolo directamente en la página de productos de forma sencilla y eficiente.

Resultado final

El objetivo principal de este proceso es incorporar un formulario de cotización en WooCommerce de manera que se integre perfectamente en la página de productos, sin la necesidad de instalar plugins adicionales. Esto permitirá a los clientes solicitar cotizaciones personalizadas directamente desde la página de cualquier producto, mejorando la interacción con tu tienda online y facilitando la comunicación para obtener precios específicos o adaptados a sus necesidades.

Al completar esta implementación, tendremos un formulario completamente funcional y optimizado, con una apariencia que se adapta al diseño de la tienda. Este formulario no solo brindará a los clientes una manera más fácil de solicitar información, sino que también agilizará el proceso de ventas al hacer que la solicitud de cotización sea más directa y clara.

Este tipo de formulario se convierte en una herramienta clave para tiendas que venden productos cuyo precio varía según diferentes factores, como cantidad, características específicas o personalización. Al integrar esta funcionalidad directamente en la página del producto, se facilita una experiencia de compra más fluida y profesional, sin necesidad de recurrir a plugins que podrían ralentizar el sitio o agregar complejidad innecesaria.

Al final del proceso, obtendrás un formulario que no solo cumple con su función de solicitar cotizaciones, sino que también se ajusta al diseño y estilo de tu tienda, brindando una experiencia de usuario coherente y sin fisuras.

Código PHP para agregar un formulario de cotización en WooCommerce

Agrega el siguiente código en el archivo functions.php de tu tema hijo:

<?php // No copiar esta línea

// Agregar el formulario en la página de productos
add_action('woocommerce_share', 'dcms_show_request_quote_form');

function dcms_show_request_quote_form(){
    global $product;

    // Mensaje de confirmación
    if ( isset($_GET['sent']) ) {
        $message = $_GET['sent'] ? 'Solicitud enviada con éxito' : 'Hubo un error al enviar la solicitud';
        echo "<p class='msg-request-quote'>$message</p>";
        return;
    }
    ?>

    <br>
    <h3>Solicita una cotización</h3>
    <form id="frm-quote" method="post" action="<?= esc_url( admin_url( 'admin-post.php' ) ) ?>">
        <label for="name">Nombre:</label>
        <input type="text" name="name" id="name" required>
        <br>

        <label for="email">Correo:</label>
        <input type="email" name="email" id="email" required>
        <br>

        <label for="message">Mensaje:</label>
        <textarea name="message" id="message" rows="6" required></textarea>
        <br>

        <input type="checkbox" id="terms" name="terms" required>
        <label for="terms">Acepto los <a href="#">Términos y Condiciones</a></label>
        <br>

        <input type="hidden" name="sku_product" value="<?= esc_attr( $product->get_sku() ) ?>">
        <input type="hidden" name="url_product" value="<?= esc_url( get_permalink( $product->get_id() ) ) ?>">
        <input type="hidden" name="action" value="process_form_quote">
        <input id="submit" type="submit" name="submit" value="Enviar">
    </form>

    <?php
}

// Hooks para procesar la solicitud
add_action( 'admin_post_nopriv_process_form_quote', 'dcms_mail_request_quote' );
add_action( 'admin_post_process_form_quote', 'dcms_mail_request_quote' );

function dcms_mail_request_quote() {
    if ( !isset($_POST['name'], $_POST['email'], $_POST['message'], $_POST['sku_product'], $_POST['url_product']) ) {
        wp_redirect( home_url() . "?sent=0" );
        exit;
    }

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);
    $sku_product = sanitize_text_field($_POST['sku_product']);
    $url_product = esc_url_raw($_POST['url_product']);

    $admin_email = "[email protected]";
    $subject = "Solicitud de cotización - Producto $sku_product";
    $headers = "Reply-to: $name <$email>";

    $msg = "Nombre: $name\n";
    $msg .= "Correo: $email\n\n";
    $msg .= "Mensaje:\n$message\n\n";
    $msg .= "Producto: $url_product\nSKU: $sku_product";

    $sendmail = wp_mail( $admin_email, $subject, $msg, $headers );
    wp_redirect( esc_url( $url_product . "?sent=" . ($sendmail ? '1' : '0') ) );
    exit;
}

Explicación del código para el Formulario de Cotización en WooCommerce

En este código implementamos un formulario de cotización en la página de productos de WooCommerce sin necesidad de plugins. A continuación, desglosamos su funcionamiento:

1. Mostrar el formulario en la página de producto

Usamos el hook woocommerce_share para agregar la función dcms_show_request_quote_form, que genera el código HTML del formulario.

add_action('woocommerce_share', 'dcms_show_request_quote_form');

¿Qué hace esta función?

• Comprueba si el formulario ya fue enviado (isset($_GET['sent'])).
• Si hay un mensaje de confirmación, lo muestra y evita que se vuelva a mostrar el formulario.
• Si no hay confirmación previa, se muestra el formulario de cotización con campos de nombre, email, mensaje y aceptación de términos.
• Se agregan campos ocultos con el SKU y la URL del producto para identificarlos en el correo.

2. Procesamiento del formulario y envío del correo

Se utilizan los hooks admin_post_nopriv_process_form_quote y admin_post_process_form_quote, ambos llamando a la función dcms_mail_request_quote.

add_action( 'admin_post_nopriv_process_form_quote', 'dcms_mail_request_quote' );
add_action( 'admin_post_process_form_quote', 'dcms_mail_request_quote' );

¿Qué hace esta función?

• Captura los datos del formulario y los sanitiza para evitar ataques de inyección.
• Construye el cuerpo del mensaje con los datos ingresados por el usuario.
• Envía el correo al administrador de la tienda con los detalles de la cotización solicitada.
• Redirige al usuario de vuelta a la página del producto con un mensaje de éxito o error.

El nombre del hook process_form_quote es fundamental porque es el mismo que enviamos en el campo oculto del formulario:

<input type="hidden" name="action" value="process_form_quote">

Si este nombre cambia, el formulario no funcionará correctamente.

Resumen del flujo de funcionamiento

1. Se carga el formulario en la página del producto mediante woocommerce_share.
2. Si el formulario fue enviado, se muestra un mensaje en lugar del formulario.
3. Al enviar el formulario, se captura la información y se procesa mediante process_form_quote.
4. Se envía el correo con los datos al administrador de la tienda.
5. El usuario es redirigido de nuevo al producto con un mensaje de confirmación o error.

Con este código, WooCommerce podrá recibir solicitudes de cotización sin plugins adicionales, manteniendo el sitio ligero y optimizado.

Mejorando el Estilo del Formulario de Cotización en WooCommerce

Para mejorar la apariencia del formulario de cotización, puedes agregar el siguiente código CSS al final del archivo style.css de tu tema hijo.

.msg-request-quote {
    background-color: orange;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
}

#frm-quote {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#frm-quote label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

#frm-quote textarea,
#frm-quote input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#frm-quote textarea {
    resize: vertical;
    min-height: 100px;
}

#frm-quote #lbl-terms {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
}

#frm-quote #terms {
    width: auto;
    margin-right: 5px;
}

#frm-quote input[type="submit"] {
    background-color: #ff6600;
    color: white;
    border: none;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
}

#frm-quote input[type="submit"]:hover {
    background-color: #e65c00;
}

Resumen

Como puedes ver, agregar un formulario de cotización en WooCommerce sin plugins es completamente posible mediante código. Con esta implementación, puedes mejorar la funcionalidad de tu tienda sin depender de herramientas externas, manteniendo el sitio optimizado y rápido. Además, con algunos ajustes en el CSS, puedes personalizar su diseño para que se adapte al estilo de tu tienda.

Si estás profundizando tus conocimientos en WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.