Paso 1: Obtenga su clave de widget Photta
Inicie sesión en el Dashboard de Photta Business en business.photta.app. Vaya a Settings → API Keys y copie su clave publicable, que comienza con pk_live_. Esta es la única credencial que necesita. Antes de que la clave funcione, añada el dominio de su tienda WooCommerce (ej. mitienda.com) en Settings → Allowed Domains. La verificación del dominio se ejecuta en cada solicitud de prueba, por lo que la lista de permitidos debe estar configurada antes de pasar a producción.
Si está realizando pruebas locales en un subdominio como localhost o una URL de staging, añada ese dominio a la lista de permitidos por separado. Puede añadir hasta 10 dominios en cualquier plan de pago. La cuenta de prueba permite un dominio. Una vez que su dominio esté listado, las solicitudes de ese origen se aceptarán de inmediato; no hay demora de propagación.
Paso 2: Elija entre shortcode o etiqueta de script
WooCommerce le ofrece dos rutas de integración limpias. El enfoque de shortcode ([photta_widget pk="pk_live_..."]) le permite pegar el widget en una ubicación específica dentro de su plantilla de página de producto o un hook personalizado de WooCommerce — ideal si desea que el botón aparezca exactamente entre la galería de productos y el botón de Añadir al carrito. Para usar el shortcode, péguelo directamente en el archivo de plantilla de producto de WooCommerce single-product/add-to-cart/simple.php, o use un bloque de maquetador de páginas.
El enfoque de etiqueta de script inserta el SDK de forma global a través del archivo functions.php de su tema usando wp_enqueue_script. Añada lo siguiente al functions.php de su tema hijo: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Esto renderiza el botón del widget en cada página de producto automáticamente, sin cambios por plantilla. La mayoría de los comerciantes prefieren el enfoque de etiqueta de script por su simplicidad.
Paso 3: Pegue y guarde el fragmento elegido
Para la ruta del shortcode: abra la anulación de plantilla de WooCommerce de su tema hijo para la página de producto individual. Pegue [photta_widget pk="pk_live_..."] en la posición vertical exacta donde desea que aparezca el botón. Guarde el archivo. El renderizador del shortcode es registrado por el asistente ligero de Photta — no se necesita un archivo de plugin, ya que el propio SDK registra el controlador del shortcode al cargarse.
Para la ruta de la etiqueta de script: abra Apariencia → Editor de archivos de tema en su administración de WordPress, navegue al functions.php de su tema hijo y añada el fragmento de acción wp_footer mostrado en el Paso 2. Haga clic en Actualizar archivo para guardar. Verifique que el fragmento se haya guardado actualizando el editor y confirmando que el código está presente. Si usa un plugin de caché (WP Rocket, W3 Total Cache), limpie la caché ahora para que se sirva el nuevo script del pie de página.
Paso 4: Verifique que el widget aparezca en su tienda
Navegue a una página de producto en su tienda WooCommerce en una ventana de navegación privada. Debería ver un botón 'Pruébatelo' cerca de la sección de Añadir al carrito. Haga clic en el botón, suba una foto de prueba y verifique que se renderice el resultado de la prueba. Si el botón no aparece, abra la consola del navegador (F12) y busque errores de photta. Un error de dominio 403 significa que su dominio aún no está en la lista de dominios permitidos.
También verifique que la etiqueta de script del SDK aparezca en el código fuente HTML de la página presionando Ctrl+U (Ver código fuente) y buscando photta. Si la etiqueta está ausente pero añadió el hook wp_footer, verifique que su tema esté llamando a wp_footer() en su plantilla de pie de página — algunos temas antiguos o muy personalizados omiten esta llamada. Añadir <?php wp_footer(); ?> antes del cierre de </body> en su footer.php soluciona esto.
Paso 5: Configure la visibilidad por categoría
Por defecto, el botón del widget aparece en todas las páginas de productos. Para restringirlo a categorías específicas, añada el atributo data-categories a su etiqueta de script con una lista de slugs de categorías de WooCommerce separados por comas: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="ropa-mujer,ropa-hombre,trajes-de-bano" defer></script>. El SDK lee los datos de categoría de WooCommerce de la página actual y oculta el botón en las páginas que no coincidan automáticamente.
Para usuarios de shortcode, coloque el shortcode solo en las plantillas asociadas con las categorías de destino, o envuelva el shortcode en un condicional de WooCommerce: use la función PHP has_term() para verificar si el producto actual pertenece a la categoría de destino antes de imprimir el shortcode. Este patrón le brinda un control quirúrgico sobre qué tipos de productos muestran la opción de prueba sin duplicar plantillas.