Additional menu

Max Terbeck

WordPress & WooCommerce Developer

Botón consultar en WooCommerce con WP Forms

posted on

Con estos scripts se genera una funcionalidad específica en WooCommerce para añadir un campo de tipo checkbox en la ficha de producto que, al estar activado, reemplace el botón de «Añadir al carrito» por un botón de «Consultar». Este nuevo botón abrirá un popup con un formulario de WP Forms.

Es una excelente manera de gestionar productos que requieren una cotización o consulta previa.

Paso 1: Crear el campo «Activar consulta» en los productos

Primero, necesitamos añadir el checkbox en la edición del producto. Este código irá en el archivo functions.php de tu tema hijo.

<?php
// functions.php

/**
 * Add custom checkbox field to product data general tab.
 */
function add_inquiry_mode_product_field() {
    woocommerce_wp_checkbox(
        array(
            'id'            => '_product_inquiry_enabled',
            'label'         => __('Enable Inquiry Mode', 'woocommerce'),
            'description'   => __('Check this box to replace the "Add to Cart" button with an "Inquire" button.', 'woocommerce'),
            'desc_tip'      => 'true',
        )
    );
}
add_action('woocommerce_product_options_general_product_data', 'add_inquiry_mode_product_field');

/**
 * Save the custom checkbox field value.
 */
function save_inquiry_mode_product_field($post_id) {
    $inquiry_enabled = isset($_POST['_product_inquiry_enabled']) ? 'yes' : 'no';
    update_post_meta($post_id, '_product_inquiry_enabled', $inquiry_enabled);
}
add_action('woocommerce_process_product_meta', 'save_inquiry_mode_product_field');

Con este código, ya verás y podrás guardar la opción «Enable Inquiry Mode» en la pestaña «General» de los datos del producto.

Paso 2: Reemplazar el botón «Añadir al carrito»

Ahora, vamos a modificar el comportamiento del botón tanto en la página de producto como en las páginas de archivo (tienda, categorías, etc.).

<?php
// functions.php (add this to the existing code)

/**
 * Replace add to cart button on single product pages.
 */
function replace_single_add_to_cart_button() {
    global $product;

    // Check if inquiry mode is enabled for this product
    if ('yes' === get_post_meta($product->get_id(), '_product_inquiry_enabled', true)) {
        // Remove the standard add to cart button
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        
        // Add our custom inquiry button
        echo '<button type="button" id="product-inquiry-btn" class="button alt wp-element-button">Consultar</button>';
    }
}
add_action('woocommerce_single_product_summary', 'replace_single_add_to_cart_button', 1);

/**
 * Replace add to cart button on archive pages.
 */
function replace_loop_add_to_cart_button($button, $product) {
    // Check if inquiry mode is enabled for this product
    if ('yes' === get_post_meta($product->get_id(), '_product_inquiry_enabled', true)) {
        // Return our custom inquiry button for the loop
        $button = '<a href="' . esc_url($product->get_permalink()) . '" class="button">Consultar</a>';
    }
    return $button;
}
add_filter('woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 2);
  1. En la página de producto (woocommerce_single_product_summary), si nuestro campo está activo, eliminamos la función que muestra el botón de compra y añadimos nuestro botón «Consultar» con el ID product-inquiry-btn.
  2. En las páginas de archivo (woocommerce_loop_add_to_cart_link), filtramos el HTML del botón. Si el modo consulta está activo, en lugar del botón de compra, mostramos un botón «Consultar» que enlaza a la ficha del producto.

Paso 3: Crear el Popup con el Formulario

Esta parte consta de tres piezas: el HTML del popup que añadiremos al footer, el JavaScript que lo controlará y el CSS (en formato SASS) para los estilos.

1. Añadir el HTML del Popup al Footer

Coloca el shortcode de tu formulario de WP Forms donde se indica.

<?php
// functions.php (add this to the existing code)

/**
 * Add inquiry popup HTML to the footer.
 */
function add_inquiry_popup_html() {
    // Only add popup on single product pages with inquiry mode enabled
    if (is_product() && 'yes' === get_post_meta(get_the_ID(), '_product_inquiry_enabled', true)) {
        ?>
        <div id="inquiry-popup-overlay" class="inquiry-popup-overlay">
            <div id="inquiry-popup-content" class="inquiry-popup-content">
                <button id="inquiry-popup-close" class="inquiry-popup-close">&times;</button>
                <h2>Formulario de Consulta</h2>
                <p>Para recibir más información sobre el producto "<?php the_title(); ?>", por favor, completa el siguiente formulario.</p>
                <?php echo do_shortcode('[wpforms id="YOUR_FORM_ID"]'); // <-- REPLACE WITH YOUR WP FORMS SHORTCODE ?>
            </div>
        </div>
        <?php
    }
}
add_action('wp_footer', 'add_inquiry_popup_html');

2. Crear el archivo JavaScript para la lógica del Popup

Crea un archivo llamado inquiry-popup.js dentro de la carpeta js de tu tema hijo (wp-content/themes/your-child-theme/js/inquiry-popup.js).

// js/inquiry-popup.js
document.addEventListener('DOMContentLoaded', function() {
    
    // Get elements
    const inquiryButton = document.getElementById('product-inquiry-btn');
    const popupOverlay = document.getElementById('inquiry-popup-overlay');
    const closeButton = document.getElementById('inquiry-popup-close');

    // Check if the elements exist on the page
    if (!inquiryButton || !popupOverlay || !closeButton) {
        return;
    }

    // Function to open the popup
    const openPopup = () => {
        popupOverlay.style.display = 'flex';
    };

    // Function to close the popup
    const closePopup = () => {
        popupOverlay.style.display = 'none';
    };

    // Event listeners
    inquiryButton.addEventListener('click', openPopup);
    closeButton.addEventListener('click', closePopup);
    
    // Close popup if user clicks on the overlay
    popupOverlay.addEventListener('click', function(event) {
        if (event.target === popupOverlay) {
            closePopup();
        }
    });

    // Close popup with the 'Escape' key
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closePopup();
        }
    });

});

3. Encolar el archivo JavaScript

Ahora, asegúrate de que WordPress cargue este script.

<?php
// functions.php (add this to the existing code)

/**
 * Enqueue scripts and styles for the inquiry popup.
 */
function enqueue_inquiry_popup_assets() {
    // Only load the script on single product pages with inquiry mode enabled
    if (is_product() && 'yes' === get_post_meta(get_the_ID(), '_product_inquiry_enabled', true)) {
        wp_enqueue_script(
            'inquiry-popup-script',
            get_stylesheet_directory_uri() . '/js/inquiry-popup.js',
            array(),
            '1.0.0',
            true // Load in footer
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_inquiry_popup_assets');

4. Añadir los estilos SASS

Finalmente, añade este código SASS a tu archivo de estilos (por ejemplo, style.scss).

/* SASS for Inquiry Popup */

// Variables for easy customization
$popup-overlay-bg: rgba(0, 0, 0, 0.7);
$popup-content-bg: #ffffff;
$popup-content-padding: 2rem;
$popup-border-radius: 5px;
$popup-max-width: 600px;
$popup-close-color: #333;

.inquiry-popup-overlay {
    display: none; // Hidden by default
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $popup-overlay-bg;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.inquiry-popup-content {
    background-color: $popup-content-bg;
    padding: $popup-content-padding;
    border-radius: $popup-border-radius;
    max-width: $popup-max-width;
    width: 100%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;

    h2 {
        margin-top: 0;
    }
}

.inquiry-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: $popup-close-color;
    cursor: pointer;
    padding: 0;
    
    &:hover {
        color: darken($popup-close-color, 20%);
    }
}

// Fade-in animation for the popup
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

Paso 4: Mostrar nombre y enlace del producto al recibir el formulario

Paso 1: Añadir Campos Ocultos a tu Formulario

Primero, necesitas añadir dos campos a tu formulario de WP Forms que recibirán el nombre y el enlace del producto. Usaremos campos ocultos (Hidden Field) para que el usuario no los vea.

  1. Edita tu formulario en el constructor de WP Forms.
  2. Añade dos campos de tipo «Hidden Field».
  3. Configura el primer campo oculto:
    • Haz clic en él para ver sus opciones.
    • Cambia la «Label» a «Nombre del Producto» para que lo identifiques fácilmente en los correos y en las entradas guardadas.
    • Ve a la pestaña «Advanced».
    • En el campo «CSS Classes», escribe populate-product-name.
  4. Configura el segundo campo oculto:
    • Haz clic en él.
    • Cambia la «Label» a «URL del Producto».
    • Ve a la pestaña «Advanced».
    • En el campo «CSS Classes», escribe populate-product-url.
  5. Guarda los cambios en el formulario.

Paso 2: Rellenar los Campos Dinámicamente con PHP

Ahora, añadiremos una función en el functions.php de tu tema hijo. Esta función interceptará la carga del formulario y, si encuentra los campos con las clases CSS que acabamos de definir, les inyectará el nombre y el enlace del producto actual.

Este es el código que debes añadir a tu archivo functions.php:

<?php
// functions.php (add this to your existing code)

/**
 * Dynamically populate WPForms hidden fields with product data.
 * This function targets fields by a specific CSS class.
 *
 * @param array $properties Field properties.
 * @param array $field      Field settings.
 * @param array $form_data  Form data and settings.
 * @return array
 */
function populate_product_info_in_wpforms($properties, $field, $form_data) {
    
    // Proceed only if we are on a single product page
    if (!is_product()) {
        return $properties;
    }

    // Populate product name
    // Check if the field's CSS classes contain 'populate-product-name'
    if (isset($properties['css']) && strpos($properties['css'], 'populate-product-name') !== false) {
        // Set the default value of this field to the current product's title
        $properties['defaults'] = get_the_title();
    }

    // Populate product URL
    // Check if the field's CSS classes contain 'populate-product-url'
    if (isset($properties['css']) && strpos($properties['css'], 'populate-product-url') !== false) {
        // Set the default value of this field to the current product's permalink
        $properties['defaults'] = get_permalink();
    }

    return $properties;
}
add_filter('wpforms_field_properties', 'populate_product_info_in_wpforms', 10, 3);
  • Usamos el filtro wpforms_field_properties, que es la forma correcta de modificar campos en WP Forms.
  • Primero, nos aseguramos de que el código solo se ejecute en una ficha de producto con is_product().
  • Luego, revisamos las clases CSS de cada campo. Si un campo contiene populate-product-name o populate-product-url, usamos get_the_title() y get_permalink() para obtener los datos del producto y los asignamos como valor por defecto (defaults) a ese campo.

Paso 3: Incluir la Información en las Notificaciones por Correo

El último paso es asegurarte de que esta nueva información llegue a tu correo.

  1. En la configuración de tu formulario de WP Forms, ve a Settings > Notifications.
  2. Edita la notificación de correo electrónico.
  3. En el cuerpo del mensaje («Message»), puedes incluir la información de los nuevos campos utilizando los «Smart Tags» de WP Forms.
  4. Generalmente, el smart tag {all_fields} ya incluye todos los campos, incluidos los ocultos. Si quieres ponerlos por separado, puedes usar el smart tag específico de cada campo, que se verá algo como {field_id="X"}.

Al hacer esto, cada vez que un usuario envíe una consulta desde la página de un producto, el formulario capturará y te enviará automáticamente el nombre y el enlace de dicho producto.