/* Theme Name: Woodmart Child Description: Woodmart Child Theme Author: XTemos Author URI: http://xtemos.com Template: woodmart Version: 1.0.0 Text Domain: woodmart */ /* --------------------------------------------------------------------------- FIX reCAPTCHA TAPADO EN "CONTRASENA PERDIDA" (2026-08-04) --------------------------------------------------------------------------- Sintoma: en escritorio (>=1025px) el widget "No soy un robot" se pintaba DEBAJO del boton "Restablecer contrasena". El checkbox quedaba fisicamente inalcanzable, asi que el formulario siempre respondia "Please complete the reCAPTCHA to verify that you are not a robot." Causa: Woodmart 8.x (css/parts/woo-mod-grid.css) flota las filas del formulario a partir de 1025px: @media (min-width:1025px) { p:where(.form-row-first,.form-row-last){overflow:visible;width:48%} p.form-row-first{float:left} p.form-row-wide {clear:both} } ...pero el tema ya NO define `.clear{clear:both}` (en 7.6 existia; en 8.x solo quedo en las hojas RTL y en partes sueltas que lo ocultan con display:none). Las plantillas de WooCommerce SI dependen de ese `
` para cerrar las filas flotantes. Sin el clear, la fila del usuario/correo queda flotando y el bloque que sigue (el .g-recaptcha y el

del boton) arranca a la MISMA altura: el iframe del captcha esquiva el flotante y baja ~90px, el boton no, y terminan uno encima del otro. Afecta a las dos pantallas de recuperacion de clave, que comparten la clase `lost_reset_password`: - myaccount/form-lost-password.php (pedir el enlace) - myaccount/form-reset-password.php (escribir la clave nueva) Se limita a ese formulario a proposito: no se toca el checkout. Rollback: borrar este bloque. --------------------------------------------------------------------------- */ .woocommerce form.lost_reset_password .clear { clear: both; } /* --------------------------------------------------------------------------- BOTON "AVISAME" DE PRODUCTOS AGOTADOS (2026-08-07) --------------------------------------------------------------------------- Sintoma, dicho por el dueno: "al hacer hover el cart del button choca con el texto y en general los textos se sienten cheap". Causa 1 — el carrito encima del texto. Woodmart usa el estilo "replace" para el boton de la tarjeta: al pasar el mouse el texto SALE hacia arriba y ENTRA el icono de carrito. Son dos reglas del tema: .wd-add-btn-replace>a:hover span { transform: translateY(-100%) } .wd-add-btn-replace>a:hover:before { transform: translateY(0) } La primera solo funciona si la etiqueta esta envuelta en un . El boton de "Avisame" no lo emite el tema sino un snippet de WPCode (id 85453), y escribe el texto pelado: Avisame Sin , el texto se queda quieto y el carrito le cae encima. Ademas el icono es incorrecto de por si: este boton no agrega nada al carrito, anota al cliente en una lista de espera. Asi que no se "arregla" envolviendo el texto (eso mostraria un carrito mentiroso), se quita el icono. Causa 2 — la campana se siente barata. Es un PNG de 512x512 (18 KB) servido sin ancho ni alto, amarillo, sobre un boton azul marino de texto blanco. Se le da tamano y se lo lleva al color del texto. El !important no es pereza: cuando el cliente ya se anoto, child.js reemplaza el contenido del boton con — un estilo EN LINEA, y a eso solo se le gana con !important. Se apunta con [data-product-id] (con guion) porque es el atributo que escribe el snippet; el boton de carrito de verdad del tema usa data-product_id (con guion bajo). Son selectores que no se pisan. NO se toca el boton de "Anadir al carrito": ahi la animacion del tema esta bien y se queda como esta. Rollback: borrar este bloque. --------------------------------------------------------------------------- */ .wd-add-btn-replace > a[data-product-id]::before { content: none; } .wd-add-btn-replace > a[data-product-id] { display: flex; gap: 8px; align-items: center; justify-content: center; letter-spacing: .3px; } .wd-add-btn-replace > a[data-product-id] img { flex: none; width: 15px !important; height: 15px !important; /* Lleva cualquiera de los dos PNG (campana amarilla, tilde verde) al blanco del texto del boton. */ filter: brightness(0) invert(1); } /* --------------------------------------------------------------------------- EL ESTADO "ANADIDO A LA LISTA" (2026-08-07) --------------------------------------------------------------------------- Cuando el cliente se anota, child.js reemplaza el contenido del boton por: Anadido a la lista Ese PNG es una tilde verde de 32x32 con transparencia. Llevarla al blanco (lo que hace el bloque de arriba, pensado para la campana) la convierte en una mancha: a 15 px la forma de la tilde no se lee. Y la etiqueta, mas larga que "Avisame", parte en dos lineas y deja el icono descolgado a la izquierda. Se reemplaza el PNG por una tilde dibujada con dos bordes: nitida a cualquier tamano, del color del texto, y sin pedir una imagen mas. El :has() mira el src de la imagen hija, que es lo unico que distingue este estado: el JS no agrega ninguna clase al cambiar el boton. Si algun dia la agrega, conviene apuntar a la clase y no al nombre del archivo. Rollback: borrar este bloque. --------------------------------------------------------------------------- */ .wd-add-btn-replace > a[data-product-id]:has(img[src*="check-mark"]) { gap: 10px; font-size: 12px; letter-spacing: 0; } .wd-add-btn-replace > a[data-product-id]:has(img[src*="check-mark"]) img { display: none; } .wd-add-btn-replace > a[data-product-id]:has(img[src*="check-mark"])::before { content: ""; position: static; flex: none; width: 6px; height: 11px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: none; } /* --------------------------------------------------------------------------- BOTON "AVISAME": LA SENAL MIENTRAS ESPERA (2026-08-07) --------------------------------------------------------------------------- El alta tarda ~2.4 s (arranque de WordPress). Hasta hoy el boton no mostraba nada en ese rato, asi que se sentia roto y el cliente volvia a hacer clic. child.js ahora le pone la clase .bh-anotando y el texto "Anotando...". pointer-events:none es el que evita el doble clic de verdad; el JS ademas corta el segundo clic por las suyas. Cinturon y tirantes, porque una segunda peticion identica cuesta otros 2.4 s de servidor. Rollback: borrar este bloque (y el marcado "BH 2026-08" en child.js). --------------------------------------------------------------------------- */ .bh-anotando { pointer-events: none; cursor: default; opacity: .9; } .bh-anotando-girito { display: inline-block; flex: none; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bh-gira .6s linear infinite; } @keyframes bh-gira { to { transform: rotate(360deg); } } /* A quien pidio menos movimiento se le deja el circulo quieto: la senal la da igual el texto "Anotando...". */ @media (prefers-reduced-motion: reduce) { .bh-anotando-girito { animation: none; } }