[Jefferson Maldonado]

Hola Simón,

Gracias por tu consulta. Actualmente en UXDivi no tenemos un tutorial ni contenido específico sobre la implementación de la certificación BIMI.

Sabemos que este tipo de configuración puede mejorar la confianza y visibilidad de los correos, pero de momento no lo hemos incluido dentro de los cursos o guías disponibles en la plataforma.

Si en un futuro añadimos contenidos relacionados con BIMI, autenticación de correo o configuraciones avanzadas de email marketing, lo estaremos anunciando en la comunidad y en la sección de nuevos cursos.

¡Gracias por tu interés y por la sugerencia!

Un saludo,

Jefferson – Equipo UXDivi

[Jefferson Maldonado]

Hola Simón, un gusto saludarte.

¿Intentaste también activar el «Modo seguro» de Divi y volver a cargar el constructor a ver si cargaba?

[Jefferson Maldonado]

Hola Miguel Ángel,

Lo que comentas no depende directamente de Divi, sino de cómo Safari en iPhone interpreta la página. Básicamente, Safari muestra la barra inferior translúcida cuando detecta que la web tiene fondos “limpios” (por ejemplo, sin un color fijo o una imagen de fondo que obligue a mostrar contraste). En cambio, si encuentra un fondo sólido, forzará la barra en blanco o negro opaco.

Esto significa que el comportamiento puede variar entre webs hechas con Divi aunque uses la misma plantilla, porque cambia el diseño de fondo, la cabecera o incluso el modo claro/oscuro del dispositivo.

En pocas palabras: no hay una opción dentro de Divi para controlar esto, y tampoco se puede forzar siempre porque depende de la versión de iOS y de cómo Safari decide mostrar la barra. Lo más práctico es revisar que tus páginas tengan fondos claros o con transparencias en la parte superior para aumentar la probabilidad de que Safari active el efecto translúcido.

[Jefferson Maldonado]

Hola Subhan.

Por defecto, WooCommerce solo permite atributos de tipo texto (como color, talla, etc.), pero no incluye la opción de mostrar un selector visual con código de color o muestras (swatches). Lo que tú ves en tu captura (el campo de código hex) corresponde a un plugin adicional que extiende WooCommerce, ya que en la instalación base no viene habilitado.

Lo que necesitas hacer es:

1. Crear primero el atributo en WooCommerce → Productos → Atributos (por ejemplo, “Color”).
2. Una vez creado, añade los valores (Blanco, Negro, Azul, etc.).
3. Para que cada valor tenga su código de color (hex) y se muestre visualmente en las variaciones, necesitas un plugin extra. Algunos de los más usados son:
4. Variation Swatches for WooCommerce (gratuito en WordPress.org, con versión Pro)
5. WooCommerce Variation Swatches and Photos (plugin oficial de WooCommerce).

Con estos plugins, podrás asignar un color (ej. #fff para blanco, #000 para negro, etc.) a cada término del atributo y luego usarlo en las variaciones del producto.

Sin el plugin adicional, WooCommerce solo mostrará el nombre del atributo como texto.

Esto lo vemos a detalle en nuestro Mastery de WooCommerce en la sección de WooCommerce Avanzado: https://uxdivi.com/cursos/mastery-en-woocommerce-con-divi-crea-tiendas-online-que-venden

uxdivi.com

Mastery en WooCommerce con Divi: Crea Tiendas Online que Venden

Este Mastery en WooCommerce con Divi es el curso que te guiará paso a paso, desde los fundamentos esenciales de Woo hasta técnicas avanzadas

[Jefferson Maldonado]

Hola Iciar 👋

Muy buena pregunta, y de hecho suele generar confusión. Ese icono que aparece junto al remitente en Gmail (el círculo con iniciales) no depende de WooCommerce ni de WP Mail SMTP, sino de cómo Google gestiona la identidad del remitente.

Algunas ideas que pueden ayudarte:

• Google Profile / Workspace: Si la cuenta de correo está asociada a un perfil de Google Workspace o Gmail normal, se puede configurar la foto/logo desde la propia cuenta de Google. Eso aplicará a los correos enviados desde Gmail directamente.
• BIMI (Brand Indicators for Message Identification): Es un estándar que permite mostrar el logotipo de la marca junto al remitente en clientes de correo compatibles (como Gmail o Yahoo). Para ello hay que configurar registros DNS (SPF, DKIM, DMARC y luego el registro BIMI con el logo en formato SVG). Es un proceso más técnico pero es la forma “oficial” de que aparezca el logo en todos los correos.
• Limitación en correos automáticos: Si los correos salen directamente desde el servidor del hosting (Cpanel + SMTP), Gmail los interpreta como correos “transaccionales” y suele ignorar la foto de perfil configurada manualmente. Ahí la única solución es lo anterior (BIMI o configurar bien la autenticación de correo).

En resumen: no depende de WooCommerce, sino de la autenticación y reputación del dominio de correo. La forma más profesional de lograrlo es configurar BIMI junto con los registros SPF, DKIM y DMARC.

👉 Si solo buscan algo rápido y visual para la clienta, lo más sencillo es configurar bien la cuenta en Google Workspace y que los correos salgan a través de Gmail (no directamente desde el hosting).

Espero que esto te aclare el panorama 🙂

• Esta respuesta fue modificada 3 meses, 3 semanas por  Jefferson Maldonado.

[Jefferson Maldonado]

¡Hola!

Muy buena tu implementación, ya tienes la base correcta. El problema que describes no viene de object-fit: cover (ese es el enfoque adecuado), sino de cómo el navegador interpreta imágenes muy desproporcionadas en relación con el contenedor circular.

Aquí van algunas recomendaciones prácticas para dejarlo tipo “avatar de redes sociales”:

1. Forzar un contenedor cuadrado fijo

Asegúrate de que el contenedor padre siempre sea cuadrado. Por ejemplo:

.foto-circular,
.img-redonda {
  width: 150px;   /* o el tamaño que necesites */
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-circular img,
.img-redonda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

De esta forma, sin importar si la imagen es muy vertical u horizontal, el contenedor recorta lo sobrante y se mantiene siempre perfecto el círculo.

2. Deja que el círculo lo genere el contenedor, no la imagen

En lugar de aplicar border-radius: 50% a la imagen, aplícalo al contenedor (.foto-circular o .img-redonda). Eso garantiza que la máscara circular recorte el contenido sin deformarlo.

Resumen:

Haz el contenedor cuadrado y redondo (border-radius: 50% + overflow: hidden).

Usa object-fit: cover y object-position: center en la imagen dentro.

Así tendrás siempre avatares tipo Facebook/LinkedIn sin importar el tamaño original.

[Jefferson Maldonado]

¡Hola Maritzel! 🙌

Muy buena la idea de destacar a ciertos especialistas. Lo que pasa con el módulo de “sorting” de Divi Machine es que, cuando trabajas con campos ACF personalizados (como ese destacado con valores 0/1), no siempre respeta bien el orden ni la paginación, por eso te muestra menos registros de los esperados.

La forma más práctica y estable de lograrlo es usar una taxonomía o categoría específica para los especialistas destacados, en lugar de un campo ACF. Así:

1. Crea una categoría o taxonomía llamada, por ejemplo, Destacados.

2. A los especialistas premium, asígnales esa categoría, además de las que ya tengan.

3. En el módulo de loop/archivo, configuras primero que muestre los especialistas de la categoría “Destacados” (con ordenación normal), y después el resto.

De esa manera, WordPress + Divi Machine entiende nativamente el orden y no se corta la lista. Además, te será más fácil si en el futuro quieres dar estilo diferente a los destacados (un badge, un borde especial, etc.).

Otra opción más técnica sería usar un hook de pre_get_posts para reordenar la query de WordPress por el campo ACF destacado (primero los que tienen 1 y luego los 0), pero eso ya requiere un poco de código. Si quieres hacerlo sin código, la vía de la categoría es la más sencilla y limpia.

👉 Mi recomendación: crea la categoría “Destacados”, úsala para marcar a los premium, y así tendrás el orden perfecto sin que se limiten los resultados.

[Jefferson Maldonado]

¡Hola Víctor! 🙌

Ese error de Stripe (“The provided PaymentMethod cannot be attached. To reuse a PaymentMethod, you must attach it to a Customer first”) aparece cuando WooCommerce intenta reutilizar un método de pago (para membresías/suscripciones o “guardar tarjeta”) pero ese PaymentMethod no está adjuntado a un Customer en Stripe o pertenece a otro modo/cuenta.

Ve paso a paso (orden recomendado):

1. Claves y modo en vivo

• En WooCommerce → Pagos → Stripe, confirma que Test Mode está desactivado y que las LIVE keys (Publishable + Secret) son las correctas (sin espacios/copias duplicadas).

• En el panel de Stripe, verifica que estás en Live (no Test) cuando revises logs.

2. Webhooks en vivo

• En Stripe Developers → Webhooks, crea (o edita) el endpoint en modo Live para tu dominio y copia el Signing secret en WooCommerce (Stripe settings).

• Sin webhooks correctos, Stripe/Woo no completa la creación de Customer/SetupIntent y salen errores raros.

3. Guardar tarjeta / crear Customer

• En WooCommerce → Pagos → Stripe, activa “Save payment methods / Enable Payment via saved cards” (o “Payment Element” con guardar método).

• Esto fuerza a Woo a crear el Customer en Stripe y adjuntar el PaymentMethod al Customer antes de reutilizarlo (clave para BuddyBoss + membresías).

4. Borra métodos guardados “incompatibles”

• En tu sitio, entra al perfil del usuario de prueba (Mi cuenta → Métodos de pago) y elimina tarjetas/métodos guardados.

• Vuelve a pagar con una tarjeta nueva en modo Live (no las de prueba).

• Si el usuario ya intentó en test y luego Live, a veces quedan tokens de test guardados: eliminarlos evita el choque.

5. Actualiza todo y prueba “sin guardar”

• Actualiza WooCommerce, WooCommerce Stripe Gateway y cualquier plugin de membresías/suscripciones.

• Como prueba, desactiva temporalmente la opción de guardar tarjeta y haz un cobro one-time. Si pasa, el problema estaba en la fase de adjuntar el PM al Customer.

6. Revisa los logs de Stripe (pista definitiva)

• Stripe → Developers → Logs (modo Live). Abre la solicitud fallida y mira el error code y el request_id.

• Si ves “resource_missing / customer” o similar, confirma que Woo está enviando customer al crear el PaymentIntent/SetupIntent (se arregla con el punto 3).

7. Cosas que también pueden romperlo

• Cuenta Stripe Live mal verificada o moneda no admitida.

• Plugins de caché/seguridad bloqueando la llamada del Payment Element o del webhook. Prueba en modo incógnito y desactiva caché durante las pruebas.

• Dominio distinto entre checkout y el configurado en Stripe (subdominio vs dominio).

Si tras esto sigue igual, también puedes abrir chat con Stripe Support y darles el request_id: en 2 min te confirman si el PM estaba en otro modo/cuenta o sin Customer adjunto.

¡Ánimo! Es típico al pasar de prueba a vivo; con esos ajustes queda funcionando. 💪

[Jefferson Maldonado]

Hola Míriam, un gusto saludarte. No tenemos contenido acerca de hacer el módulo de audio dinámico, solo del módulo de video.

Hay alguna forma de hacerlo a través de código en combinación con ACF, pero es compleja de implementar y se necesita un desarrollador, mi recomendación sería explorar ese camino si es algo que necesitas con urgencia.

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

[Jefferson Maldonado]

¡Hola, Maritzel!

Lo que quieres (país → estado dependiente) se resuelve bien si cambias el enfoque de “muchos campos ACF” a taxonomías jerárquicas. Así evitas crear N campos y, además, los filtros en el archive se vuelven robustos y rápidos.

Enfoque recomendado (limpio y escalable)

1. Crea una sola taxonomía jerárquica (por ejemplo, ubicacion) para tu CPT: País = término padre
2. Estado/Provincia = término hijo del país correspondiente
3. En el CPT “especialistas”, seleccionas solo el estado (el país queda implícito por su padre).

Filtros en el Archive (Divi Machine)

En el módulo Filter Posts, añade dos “Filter Items” sobre la misma taxonomía ubicacion:

1. Filtro País: mostrar solo términos padre.
2. Filtro Estado: mostrar solo términos hijo y (si tu versión lo permite) vincularlo al país seleccionado (dependiente).
3. Si tu build no trae dependencia nativa, puedes:
4. Mostrar un único filtro (solo estados) —funciona perfecto porque el país ya va “dentro” del estado por jerarquía.
5. O aplicar el mismo pequeño JS del formulario para ocultar/mostrar dinámicamente los estados según el país seleccionado (añadiendo un data-parent por término o pidiéndolos por REST).

Lo cierto es que no hay una forma super sencilla de hacerlo, pero por favor revisa si con estos pasos te funciona.

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

[Jefferson Maldonado]

Hola Martizel, un gusto saludarte, el título de imagen siempre aparece por defecto tras colocarla en el módulo de imagen, una solución puede ser a través de un pequeño Snippet de CSS:

    /* Hide image titles on hover */
    img {
        pointer-events: none;
    }

Este ocultará el pointer event en las imágenes.

Otra solución podría ser el uso de este plugin: https://wordpress.org/plugins/hide-titles-on-hover/

Que hace justo esta función también.

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

wordpress.org

Hide Tooltips on Hover – Clean Up Title Attributes Without Losing Accessibility

Hide browser tooltips on hover while preserving accessibility for screen readers.

[Jefferson Maldonado]

¡Gracias por tu comentario Fernando!

[Jefferson Maldonado]

Listo, correo enviado.

[Jefferson Maldonado]

Que tal Víctor, claro que sí. Puedes contratar una hora de consultoría acá: https://muxstudio.com/servicios/consultoria-web-o-ux/

Y una vez que agendes intentaremos ayudarte a resolver el problema con asesoría personalizada.

muxstudio.com

Consultoría Web o UX

Agenda una sesión de consultoría Web o UX y recibe la guía que necesitas para solventar los problemas que tiene tu sitio web o tu diseño.

[Jefferson Maldonado]

Hola Simón, un gusto saludarte. Creo que en este punto lo más apropiado es esperar a que salga la versión publicable de Divi 5, con todas las actualizaciones en contenido responsive que tiene, seguramente se podrán corregir estos problemas de diseño que actualmente son difíciles de corregir en Divi 4.

Te recomendamos estar atento a todas nuestras publicaciones, acá en nuestra plataforma donde ya estamos dando contenido sobre Divi 5 que podrás ver aquí: https://uxdivi.com/cursos/curso-de-divi-5-fase-de-desarrollo

uxdivi.com

Curso de Divi 5 (Fase de Desarrollo)

Explora Divi 5 en su fase desarrollo con este curso UXDIVI. Aprende novedades, breakpoints, presets, diseño fluido y estructuras paso a paso.