{"id":30622,"date":"2025-01-11T12:20:39","date_gmt":"2025-01-11T12:20:39","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=30622"},"modified":"2026-05-18T14:09:07","modified_gmt":"2026-05-18T14:09:07","slug":"woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up\/","title":{"rendered":"Woocommerce: Integrar el formulario de suscripci\u00f3n a la newsletter en un pop-up"},"content":{"rendered":"\n<p><em>Este tutorial explica c\u00f3mo integrar un formulario de suscripci\u00f3n a una newsletter utilizando el m\u00f3dulo Probance pop-ups.<\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note-probance is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Requisitos previos:<\/strong><br>&#8211; El formulario de suscripci\u00f3n a la newsletter de Probance debe estar configurado en tu back-office de WooCommerce antes de continuar. Consulta <a href=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-configurar-un-formulario-de-suscripcion-a-la-newsletter\/?autologin=start\" data-type=\"tutoriels\" data-id=\"30196\">nuestra gu\u00eda dedicada para saber c\u00f3mo hacerlo<\/a>.<br>&#8211; El m\u00f3dulo Probance pop-ups debe estar instalado en tu proyecto.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">1. Crear el pop-up<\/h2>\n\n\n\n<p>Para crear un nuevo pop-up, abre el men\u00fa <strong>Probance pop-ups<\/strong> y haz clic en <strong>Add new<\/strong>.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>En el campo <strong>T\u00edtulo<\/strong>, introduce el nombre de tu pop-up.<\/li>\n\n\n\n<li>En el editor, escribe el contenido de tu pop-up. Aqu\u00ed debes integrar el <em>shortcode<\/em> del formulario de suscripci\u00f3n a la newsletter con los par\u00e1metros que desees mostrar en esta versi\u00f3n.<br>Tambi\u00e9n puedes incluir otros elementos como t\u00edtulos o textos, y darles formato dentro del editor. La pesta\u00f1a <strong>Texto<\/strong> te permite cambiar al modo HTML y organizar el contenido de tu pop-up con m\u00e1s flexibilidad.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-style-important is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Importante<\/strong>: Si el shortcode ya se utiliza en otro lugar de tu web, agrega un par\u00e1metro <code>id<\/code> y aumenta su valor con cada integraci\u00f3n. Por ejemplo, usa <code>[probance_newsletter id=\u20191\u2032]<\/code><\/p>\n<\/blockquote>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>En la lista <strong>Displayed on pages<\/strong> de la secci\u00f3n <strong>Displaying<\/strong>, marca las p\u00e1ginas del sitio en las que deseas que se muestre el pop-up. Recomendamos no marcar las p\u00e1ginas en las que el formulario ya est\u00e9 integrado.<\/li>\n\n\n\n<li>Tambi\u00e9n en la secci\u00f3n <strong>Displaying<\/strong>, marca la opci\u00f3n <strong>Check opt-in<\/strong>. Esta opci\u00f3n permite restringir la visualizaci\u00f3n del pop-up a los visitantes que no est\u00e9n identificados o suscritos a la newsletter.<\/li>\n\n\n\n<li>En el campo <strong>Displaying trigger<\/strong> de la secci\u00f3n <strong>Custom style<\/strong>, selecciona el modo de activaci\u00f3n del pop-up. Hay 3 opciones disponibles:\n<ul class=\"wp-block-list\">\n<li><strong>Delay<\/strong>: el pop-up aparece tras un cierto tiempo en la p\u00e1gina. Indica el tiempo de espera en segundos en el campo <strong>Delay<\/strong>.<\/li>\n\n\n\n<li><strong>Scroll<\/strong>: el pop-up se muestra cuando el visitante alcanza un determinado nivel de desplazamiento en la p\u00e1gina. Indica este nivel en porcentaje en el campo <strong>Scroll<\/strong>.<\/li>\n\n\n\n<li><strong>Manual<\/strong>: esta opci\u00f3n anula la visualizaci\u00f3n autom\u00e1tica del pop-up, permiti\u00e9ndote definir tus propios disparadores a nivel del tema.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>En el campo <strong>Frequency of display<\/strong>, especifica el intervalo de espera entre dos visualizaciones del pop-up para un mismo visitante. Esta duraci\u00f3n puede indicarse en minutos, horas o d\u00edas.<\/li>\n\n\n\n<li>Haz clic en <strong>Guardar borrador<\/strong> o <strong>Publicar<\/strong> para guardar tus cambios.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: un pop-up publicado no se mostrar\u00e1 a los visitantes mientras no est\u00e9 activado.<\/p>\n<\/blockquote>\n\n\n\n<p>Puedes obtener una vista previa de tu pop-up en cualquier momento durante su construcci\u00f3n haciendo clic en <strong>Previsualizar<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Configurar una imagen<\/h2>\n\n\n\n<p>La secci\u00f3n <strong>Image settings<\/strong> te permite configurar una imagen que se mostrar\u00e1 en el pop-up, a la derecha o a la izquierda del contenido.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Haz clic en <strong>Upload<\/strong> para seleccionar una imagen de tu galer\u00eda o importar una desde tu directorio.<\/li>\n\n\n\n<li>En el campo <strong>Image position<\/strong>, selecciona la posici\u00f3n de la imagen con respecto al contenido.<\/li>\n\n\n\n<li>Los campos <strong>Width<\/strong> y <strong>Height<\/strong> te permiten especificar las dimensiones de la imagen en el pop-up. Puedes introducir valores en p\u00edxeles o en porcentajes.<\/li>\n\n\n\n<li>Para obtener una vista previa del pop-up con la imagen, haz clic en <strong>Previsualizar<\/strong>.<\/li>\n\n\n\n<li>Haz clic en <strong>Guardar borrador<\/strong> o <strong>Publicar<\/strong> para guardar tus cambios.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">3. Modificar la apariencia del pop-up<\/h2>\n\n\n\n<p>De forma predeterminada, el pop-up construido con el m\u00f3dulo hereda los estilos de tu tema de WordPress. Si hay reglas de estilo definidas en la p\u00e1gina de configuraci\u00f3n de tu formulario, tambi\u00e9n se aplicar\u00e1n en el pop-up.<\/p>\n\n\n\n<p>Puedes a\u00f1adir reglas de estilo a tus pop-ups desde el men\u00fa <strong>Custom CSS<\/strong>: esta secci\u00f3n te permite definir CSS personalizado para tus pop-ups sin necesidad de modificar tu tema de WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Activar la pop-up<\/h2>\n\n\n\n<p>En la p\u00e1gina de edici\u00f3n de tu pop-up, marca la opci\u00f3n <strong>Enabled<\/strong> en la secci\u00f3n <strong>Displaying<\/strong>.<\/p>\n\n\n\n<p>Si el pop-up a\u00fan est\u00e1 en estado de borrador, haz clic en <strong>Publicar<\/strong>. En caso contrario, haz clic en <strong>Actualizar<\/strong> para guardar los cambios.<\/p>\n<div id=\"wpmem_restricted_msg\"><p>Este contenido est\u00e1 restringido a los miembros del sitio. Si eres un usuario existente, por favor, accede. Los nuevos usuarios pueden registrarse a continuaci\u00f3n.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"f834b2436e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/30622\" \/><fieldset><legend>Acceso de usuarios existentes<\/legend><label for=\"log\">Nombre de usuario o correo electr\u00f3nico<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Contrase\u00f1a<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Recu\u00e9rdame<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Acceder\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"6cc3867c56\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/30622\" \/><fieldset><legend>Registro de un nuevo usuario<\/legend><label for=\"username\" class=\"text\">Elige un nombre de usuario<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">Nombre<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Apellidos<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Correo electr\u00f3nico<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/woocommerce-integrar-el-formulario-de-suscripcion-al-boletin-en-una-pop-up\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Registro\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Campo necesario<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Este tutorial explica c\u00f3mo integrar un formulario de suscripci\u00f3n a una newsletter utilizando el m\u00f3dulo Probance pop-ups. Requisitos previos:&#8211; El formulario de suscripci\u00f3n a la newsletter de Probance debe estar configurado en tu back-office de WooCommerce antes de continuar. Consulta nuestra gu\u00eda dedicada para saber c\u00f3mo hacerlo.&#8211; El m\u00f3dulo Probance pop-ups debe estar instalado en [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[733],"class_list":["post-30622","tutoriels","type-tutoriels","status-publish","hentry","sujets-adquisicion"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels\/30622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/media?parent=30622"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/sujets?post=30622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}