Igual que nos pasa con WordPress en general, con WooCommerce existen muchísimas extensiones muy prácticas, y otras que nos las podemos ahorrar con muy poco código.
En este caso, a raíz de una petición de uno de vosotros, busqué la forma de añadir un botón a la ficha de un producto de WooCommerce que enlazara con un formulario de contacto para solicitar información, indicando el producto al que se refería, le envié una idea y el mismo la mejoró y le acabó dando forma (Gracias Jonathan 😉
Añadir botón en la ficha de producto
Para ello podemos utilizar un hook woocommerce_after_add_to_cart_button para mostrarlo justo después del btón de añadir al carrito y lo que hacemos es enviar el parámetro producto a la página donde tendremos el formulario (pedir-informacion)
add_action( 'woocommerce_after_add_to_cart_button', function() {
global $product;
$url_info = home_url( '/pedir-informacion/' ).'?producto='.$product->get_name();
?>
<a class="button" href="<?php echo esc_url( $url_info ); ?>"><?php esc_html_e( 'Pide una muestra', 'text-domain' ); ?></a>
<?php
} );Recoger el valor con Contact Form 7
Según el formulario de contacto que estemos utilizando tendremos que recoger el valor del parámetro de una forma u otra.
En Contact Form 7, lo hacemos con el atributo get
[text producto default:get]Teniendo en cuenta que debe coincidir el nombre del parámetro con el del campo del formulario, en este caso ‘producto’
Más información sobre recoger valores en CF7
Recoger el valor con Gravity Forms
Si estás utilizando Gravity Forms en la tienda online, puedes recoger y mostrar el campo de producto en el formulario también de forma muy fácil.
En la pestaña ‘Avanzado’ del campo tienes la opción ‘Permitir al campo rellenarse dinámicamente’ y puedes indicar el nombre del parámetro.
Usando WPForms para recoger parámetros
Por último, si estás utilizando WPForms también tienes una forma muy fácil de recoger el parámetro del nombre de producto y añadirlo al formulario.
En este caso has de desplegar la parte de Advanced options de un campo que hayas añadido a tu formulario y buscar donde indica ‘Default value’ y añadirlo con el formato {query_var key=»producto»}
En este caso además, tienes ayuda visual haciendo clic en «Show Smart Tags», donde te muestra todas las opciones para añadir otros valores dinámicos, tanto de la página donde este el formulari como del usuario que está conectado si ha iniciado sesión .
(Estas opciones también las tenemos en Contact Form 7 y Gravity Forms, pero WPForms nos lo pone más fácil dándonos los valores posibles)
Este sólo es un ejemplo, pero como véis, es fácil preparar un formulario personalizado cogiendo información de forma dinámica y de paso ahorrarnos plugins o extensiones extras que van complicando nuestra instalación de WordPress
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
8 respuestas a «Añadir un botón de solicitar información en la ficha de producto.»
|
Hola,
Yo estoy intentando algo parecido. He modificado el nombre de la Tab «description» en la ficha de producto, para que cambie en un producto en concreto.
Pero ahora quiero que en éste caso, cuando se cumple la condición para éste producto, ésta tab enlace a un formulario. Y no sé cómo.
Aquí te dejo el código, a ver si me puedes ayudar:
<?php
/**
* Rename product data tabs
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
if (is_single('3223')){
$tabs['description']['title'] = __( 'Consulte oferta especial' ); // Rename the description tab
// $tabs['reviews']['title'] = __( 'Ratings' ); // Rename the reviews tab
// $tabs['additional_information']['title'] = __( 'Product Data' ); // Rename the additional information tab
}
return $tabs ;
}
|
Hola Marisa!
Mírate ese post: Añadir una pestaña nueva a la ficha de productos de WooCommerce sin plugin en él comento como añadir pestañas e introducir contenido en ellas. Creo que combinándolo con lo que tienes podrás añadir un enlace al formulario.
Saludos!
|
Hola Esther, te felicito por tu pagina. Es de mucha ayuda.
Me encuentro en el desarrollo de un directorio de profesionales, y he quitado el botón de comprar de la ficha de producto. Por lo que esta solución de agregar anexar un no botón no me sirve, debido que la función que elimina todos los botones de ese tipo.
la pregunta, ¿conoces otra forma de agregar un botón en la ficha del producto ?, ¿quizás creándolo a través de html? u otra forma
saludos,
|
Hola Mauricio,
Si has eliminado la parte de botones, puedes mirar de añadirlo en otro hook de la página de producto. Es decir, en el ejemplo estamos usando woocommerce_after_add_to_cart_button, pero puedes buscar otra posición en su lugar.
Mira en esta guía visual de hooks para WooCommerce para ver los que tienes disponibles: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
Saludos!
|
Saludos quisiera orientacion sobre como agregar boton en ficha producto pero que lleve a una url personalizada la cual será diferente en cada producto
|
Hola Robert!
Podrías crear un campo personalizado en el producto para guardar la url donde quieres redirigir en cada caso y en el código llamar a ese campo para la url del botón.
Saludos!
|
Uso contact form 7, soy principiante y quiero añadir un botón, copie el enlace PHP y efectivamente me aparece el botón después del carrito de compra, lo que no se como hacer es modificar el código para que sea dirigido a mi formulario de contact form 7, ¿se utiliza el short code? ¿en que parte del código debo colocarlo?.
De ante mano muy agradecido, excelente Blog.
|
Hola Carlos,
En tu caso deberías modificar la variable $url_info e indicar en ella la ruta de tu página de contacto, por ejemplo:
$url_info = home_url( ‘/contacto/’ );
Adaptando el ‘/contacto/’ a la url que corresponda en tu caso.
Saludos!