Agrega un agente de voz con IA a WooCommerce (guía 2026)

Cómo agregar AnveVoice a una tienda WooCommerce

WooCommerce funciona dentro de WordPress, así que un script de footer para todo el sitio llega a las páginas de la tienda, de producto, del carrito y del checkout por igual. Usa un plugin de encabezado y pie como WPCode, o el plugin Code Snippets que recomienda WooCommerce con un pequeño hook wp_footer si quieres controlar qué páginas cargan el botón. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: WPCode → Code Snippets → Header & Footer → Footer, o un fragmento wp_footer en el plugin Code Snippets
• Código necesario: Ninguno con WPCode; un fragmento PHP de cinco líneas si quieres reglas por página
• Límites del plan: Ninguno en WooCommerce autoalojado; los planes de WordPress alojado pueden restringir los plugins
• Tiempo: Unos 3 minutos

Antes de empezar

Esta página es para WooCommerce en un sitio de WordPress autoalojado. WooCommerce es un plugin, lo que significa que no hay una capa de tema específica de WooCommerce que editar: las páginas de tienda, producto, carrito y checkout se renderizan a través de tu tema de WordPress, así que un script agregado al footer del sitio está presente en todas ellas. Crea una cuenta de AnveVoice en app.anvevoice.app y anota el embed ID. El plan Free no pide tarjeta, lo cual es práctico para una tienda que todavía estás ajustando.

• 1. Copia la etiqueta — Aquí está la línea, con un marcador en el lugar de tu propio embed ID. Un botón alineado a la izquierda necesita &position=bottom-left después del ID; un panel oscuro necesita &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Por qué no editar functions.php directamente

La documentación para desarrolladores de WooCommerce sobre fragmentos de código recomienda el plugin Code Snippets en lugar de editar functions.php o los archivos de WooCommerce. Da tres razones: los cambios en functions.php se pierden cuando se actualiza el tema, un solo error de sintaxis puede dejar el sitio inaccesible y muchas personalizaciones en un mismo archivo se vuelven difíciles de depurar. El mismo razonamiento aplica a una etiqueta de script, así que mantenla fuera de los archivos del tema, salvo que trabajes con un tema hijo.

Método 1: caja de footer de WPCode

WPCode, antes conocido como Insert Headers and Footers, se describe en su página de WordPress.org como un plugin para insertar código, como Google Analytics, CSS personalizado o el píxel de Facebook, en el encabezado y el pie del sitio sin editar los archivos del tema. Es la vía más rápida si quieres el botón de voz en todas partes.

• 1. Instala y activa WPCode — En wp-admin ve a Plugins → Add New (Añadir nuevo), busca WPCode, instálalo y actívalo.
• 2. Abre Header & Footer — Ve a Code Snippets → Header & Footer.
• 3. Pega en la caja Footer — Pon la etiqueta de AnveVoice en el campo Footer y haz clic en Save Changes (Guardar cambios).
• 4. Limpia las cachés — Purga la caché de páginas y la del CDN, y luego carga una página de producto en una ventana privada.

Método 2: un fragmento wp_footer con reglas por página

Úsalo si quieres el agente de voz en el catálogo, pero no en el paso de pago, o al revés. Agrégalo como fragmento en el plugin Code Snippets que recomienda la documentación de WooCommerce, ejecutándose solo en el front-end. La función condicional is_checkout() de WooCommerce devuelve true en la página de checkout, así que el ejemplo la omite. El hook solo se dispara si el tema activo llama a wp_footer(), como lo hacen prácticamente todos los temas mantenidos. Si el botón falta en todas las páginas, el tema lo omite.

• 1. Crea un fragmento nuevo — En Snippets → Add New (Añadir nuevo), ponle el nombre AnveVoice voice agent (agente de voz de AnveVoice) y configúralo para ejecutarse en el front-end.
• 2. Pega el hook — Agrega el PHP de abajo, reemplazando YOUR_EMBED_ID. La etiqueta está escrita exactamente como la entrega AnveVoice. add_action( 'wp_footer', function () { if ( function_exists( 'is_checkout' ) && is_checkout() ) { return; // leave the payment step clean } echo '<script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>'; } );
• 3. Guarda y activa — Guarda el fragmento y actívalo. Si el plugin informa de un error de sintaxis, no se activará, lo que protege el sitio.

Caché y plugins de optimización

La guía de caché de WooCommerce indica que el carrito, Mi cuenta y el checkout deben excluirse de la caché de páginas para que sigan siendo dinámicos, y que los plugins a menudo ya los excluyen. Tu script de footer es estático, así que funciona en páginas en caché, pero una página en caché desactualizada no mostrará una etiqueta recién agregada hasta que se purgue la caché. La misma guía recomienda evitar la minificación de archivos JavaScript con WP-Rocket. Si tu optimizador combina, retrasa o minifica scripts y el botón se comporta mal, excluye anvevoice.app/embed.js de esas funciones en lugar de desactivar el optimizador.

Comprueba que funciona

• 1. Prueba una página de producto — Ábrela en una ventana privada y busca el micrófono redondo en la esquina inferior derecha.
• 2. Prueba el carrito y el checkout — Con el método 1, el botón también se carga ahí. Con el ejemplo del método 2, no debería mostrarse en el checkout.
• 3. Prueba el agente de voz — Haz clic, permite el micrófono y pregunta por envíos o devoluciones. La página debe servirse por HTTPS para que el navegador ofrezca el micrófono.

Problemas frecuentes en WooCommerce

• Botón en las páginas pero no en los archivos de la tienda: una capa de caché sirve HTML antiguo. Purga la caché.
• Dos botones: la etiqueta está en WPCode y en un fragmento. Deja solo una.
• Desaparece tras cambiar de tema: el nuevo tema no llama a wp_footer, o la etiqueta anterior estaba en el tema. Usa un método basado en plugins.
• Bloquea el checkout: los bloques de Carrito y Checkout se muestran dentro de páginas normales, así que el script de footer sigue cargándose; usa el método 2 si no quieres que aparezca ahí.
• Error de sintaxis en un fragmento: se alteró un carácter de comillas al copiar. Pega el código primero en un editor de texto plano.

Fuentes

• Documentación para desarrolladores de WooCommerce: uso del plugin Code Snippets (https://developer.woocommerce.com/docs/code-snippets/) — consultado el 2026-10-14
• Documentación para desarrolladores de WooCommerce: configurar plugins de caché (https://developer.woocommerce.com/docs/best-practices/performance/configuring-caching-plugins/) — consultado el 2026-10-14
• WPCode en WordPress.org (https://wordpress.org/plugins/insert-headers-and-footers/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio WordPress
• Cómo añadir AnveVoice a una tienda Shopify
• Cómo añadir AnveVoice a una tienda de BigCommerce
• Cómo añadir AnveVoice a una tienda PrestaShop

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.