/* ============================================================ CHECKOUT Y CARRITO (bloques de WooCommerce) ============================================================ El checkout de esta tienda son bloques de WooCommerce, es decir React. No se puede maquetar sobrescribiendo plantillas, y cambiarle la estructura a la página donde se paga es el peor sitio para arriesgar. Así que aquí solo hay CSS, y todo cuelga de .wp-block-woocommerce-checkout o del carrito: fuera de esas dos páginas no cambia nada. El flujo de pago queda exactamente como lo hizo WooCommerce. ============================================================ */ .wp-block-woocommerce-checkout, .wp-block-woocommerce-cart{ --dst-campo-radio:999px; } /* ---- Título ---- */ .woocommerce-checkout .entry-title, .woocommerce-cart .entry-title{ font-family:var(--dst-titulo);font-weight:400; font-size:clamp(26px,3.4vw,40px);line-height:1.14; color:var(--dst-oscuro); } /* ---- Las tarjetas del formulario ---- */ .wp-block-woocommerce-checkout .wc-block-checkout__contact-fields, .wp-block-woocommerce-checkout .wc-block-checkout__shipping-fields, .wp-block-woocommerce-checkout .wc-block-checkout__billing-fields, .wp-block-woocommerce-checkout .wc-block-checkout__shipping-option, .wp-block-woocommerce-checkout .wc-block-checkout__payment-method, .wp-block-woocommerce-checkout .wc-block-checkout__order-notes, .wp-block-woocommerce-checkout .wc-block-checkout__pickup-options{ background:#FFFFFF; border:1px solid var(--dst-nude); border-radius:24px; padding:clamp(18px,2.2vw,24px); margin-bottom:14px; } /* El paso entero ya no necesita su propio borde ni sangría */ .wp-block-woocommerce-checkout .wc-block-components-checkout-step{ border:0;padding:0; } .wp-block-woocommerce-checkout .wc-block-components-checkout-step__container{padding:0} .wp-block-woocommerce-checkout .wc-block-components-checkout-step__content{padding:0;margin:0} /* ---- El ancho de la página ---- El tema capa el contenido de las páginas a 803 px. En el checkout eso deja el resumen del pedido en una columna de 281 px donde los nombres de los productos se parten letra a letra. Se ensancha solo aquí. */ body.woocommerce-checkout .site-content .em-container > article, body.woocommerce-cart .site-content .em-container > article{ max-width:1180px; } /* ---- Rótulos de sección ---- Se especifica el nivel de encabezado además de la clase: sin eso ganaba la regla de titulares del tema y salían a 32 px en tipografía de titular, cuando aquí son rótulos de sección, no titulares. */ body.woocommerce-checkout .wp-block-woocommerce-checkout h2.wc-block-components-checkout-step__title, body.woocommerce-checkout .wp-block-woocommerce-checkout h3.wc-block-components-checkout-step__title, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title, body.woocommerce-checkout .wp-block-woocommerce-checkout h2.wc-block-components-title{ font-family:var(--dst-cuerpo); font-size:15.5px;font-weight:600;line-height:1.3;color:var(--dst-oscuro); margin:0 0 4px;letter-spacing:0; } body.woocommerce-checkout .wc-block-components-sidebar h2.wc-block-components-title{ font-size:15.5px;font-family:var(--dst-cuerpo);font-weight:600; } .wp-block-woocommerce-checkout .wc-block-components-checkout-step__description{ font-size:12.5px;color:var(--dst-texto);margin:0 0 14px; } .wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading{ margin:0 0 10px; } /* ---- Campos ---- */ /* Ecomus estiliza estos campos con .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=email] que pesa (0,4,1). Mi regla anterior pesaba (0,3,2) y perdía: los campos se quedaban con el radio del tema. Se incluye .wc-block-components-form para igualarla y añadir un peso más, en vez de tapar con !important. */ body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-country-input input, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-state-input input, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-textarea, body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input{ border:1px solid var(--dst-nude); border-radius:16px; padding:22px 18px 8px; font-family:var(--dst-cuerpo);font-size:14px; color:var(--dst-oscuro);background:#FFFFFF; box-shadow:none; } body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:focus, body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input:focus{ border-color:var(--dst-rosa); outline:2px solid rgba(185,107,112,.28);outline-offset:0; box-shadow:none; } /* La etiqueta flotante tiene que caber dentro de la pastilla */ body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-text-input label{ left:19px;color:var(--dst-texto);font-size:14px; } .wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label{ font-size:11px;color:var(--dst-texto); } .wp-block-woocommerce-checkout .wc-block-components-text-input.has-error input{ border-color:var(--dst-vino); } /* ---- Opciones de envío y pago, como fichas ---- */ body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked-option-highlighted, body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked-option-highlighted{ border:1px solid var(--dst-nude); border-radius:16px; /* El hueco de la izquierda NO es decorativo: WooCommerce coloca el círculo del radio en position:absolute con left:16px, así que el texto tiene que empezar después. Con el 15px de antes el círculo caía ENCIMA de las primeras letras —medido: 21 px de solape en las cuatro opciones, se leía "reos a domicilio" y "nsferencia bancaria o Bizum"—. El círculo ocupa de 16 a 36; 46 deja diez de aire. */ padding:13px 15px 13px 46px; margin-bottom:9px; background:#FFFFFF; transition:border-color .2s ease,background .2s ease; } .wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover{ border-color:var(--dst-rosa); } .wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked), .wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted, .wp-block-woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked){ border-color:var(--dst-rosa); border-width:1.5px; background:var(--dst-rosa-suave); } .wp-block-woocommerce-checkout .wc-block-components-radio-control__option::after, .wp-block-woocommerce-checkout .wc-block-components-radio-control__option-layout::after{border:0} /* ---- Resumen del pedido ---- */ .wp-block-woocommerce-checkout .wc-block-components-sidebar .wc-block-components-order-summary, .wp-block-woocommerce-checkout .wc-block-components-sidebar > div{ border-radius:24px; } .wp-block-woocommerce-checkout .wc-block-components-sidebar{ background:#FFFFFF; border:1px solid var(--dst-nude); border-radius:24px; padding:clamp(18px,2.2vw,24px); } .wp-block-woocommerce-checkout .wc-block-components-totals-item__label{color:var(--dst-texto)} .wp-block-woocommerce-checkout .wc-block-components-totals-item__value{color:var(--dst-oscuro);font-weight:500} .wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--dst-rosa-oscuro); } /* El descuento del pack, en positivo */ .wp-block-woocommerce-checkout .wc-block-components-totals-fees .wc-block-components-totals-item__value, .wp-block-woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value{ color:var(--dst-rosa-oscuro);font-weight:600; } /* ---- Botón de pagar ---- Este es el botón que cierra la compra, y el tema lo pinta con el rosa de marca: blanco sobre ese rosa se queda en 3,9 de contraste, por debajo de lo legible a 13 px. Se oscurece al rosa oscuro de la propia marca, que sube a 5,7 sin dejar de ser el mismo color de casa. Va con !important a propósito, y es la única vez: el tema lo fija con !important y ni un estilo en línea lo cambia —comprobado—, así que igualarlo es la herramienta correcta, no un parche a ciegas. El mismo cambio se aplica al botón "Finalizar compra" del panel del carrito, para que los dos botones de comprar sean el mismo color. */ body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button, body.woocommerce-checkout .wp-block-woocommerce-checkout .wp-element-button.wc-block-components-checkout-place-order-button{ background:var(--dst-rosa-oscuro) !important; color:#FFFFFF !important; border:0;border-radius:999px; padding:17px 26px; font-family:var(--dst-cuerpo);font-size:13px;font-weight:600; letter-spacing:.08em;text-transform:uppercase; transition:background .24s ease; } body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled){ background:var(--dst-vino) !important;color:#FFFFFF !important; } /* ---- Cupón ---- */ .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button, .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button{ border-radius:999px;background:var(--dst-rosa-oscuro);color:#FFFFFF;border:0; } .wp-block-woocommerce-checkout .wc-block-components-totals-coupon__button:hover{background:var(--dst-vino)} /* ---- Avisos ---- */ .wp-block-woocommerce-checkout .wc-block-components-notice-banner, .wp-block-woocommerce-cart .wc-block-components-notice-banner{ border-radius:18px; } /* ============================================================ LA CESTA ============================================================ El carrito de bloques venía con la caja de totales en gris del navegador y los nombres subrayados en rosa: al lado del checkout, que ya tiene la cara de la marca, parecía otra tienda. */ /* La cabecera de la página ocupaba 174 px para una sola palabra. */ body.woocommerce-cart .page-header--page{padding-top:38px;padding-bottom:6px} /* Caja de totales: la misma que el resumen del checkout. */ body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper, body.woocommerce-cart .wc-block-cart__sidebar > div{ background:#FFFFFF; } body.woocommerce-cart .wc-block-cart__sidebar{ background:#FFFFFF; border:1px solid var(--dst-nude); border-radius:24px; padding:clamp(18px,2.2vw,24px); } body.woocommerce-cart .wc-block-cart__totals-title{ font-family:var(--dst-titulo);font-weight:400; font-size:1.25rem;letter-spacing:0;text-transform:none; color:var(--dst-oscuro); } /* Nombre del producto: ni subrayado ni rosa; es un título, no un enlace suelto. */ body.woocommerce-cart .wc-block-components-product-name{ color:var(--dst-oscuro);text-decoration:none;font-weight:500; } body.woocommerce-cart .wc-block-components-product-name:hover{color:var(--dst-rosa-oscuro)} /* Botón de finalizar: el mismo que el de realizar el pedido. */ body.woocommerce-cart .wc-block-cart__submit-button{ border-radius:999px;text-decoration:none;letter-spacing:.08em; } /* ---- Barra de envío gratis, arriba del todo ---- */ .dst-envio-cesta{ max-width:1180px;margin:0 auto 18px; border:1px solid var(--dst-nude);border-radius:20px;background:#FFFFFF; } .dst-envio-cesta .dst-envio{border-bottom:0;padding:16px 20px} /* ---- Sugerencias ---- */ .dst-sugerencias{ max-width:1180px;margin:34px auto 0; border:1px solid var(--dst-nude);border-radius:24px; background:var(--dst-crema);padding:clamp(18px,2.4vw,26px); } /* El peso extra es para ganarle a `body.page-template-default .site-content article p`, que en el carrito alcanza a estos párrafos con (0,3,1). */ body .dst-sugerencias .dst-sugerencias__titulo{ font-family:var(--dst-titulo);font-weight:400;font-size:1.25rem;line-height:1.25; letter-spacing:0;text-transform:none; color:var(--dst-oscuro);margin:0 0 4px; } body .dst-sugerencias .dst-sugerencias__motivo{ font-size:14px;line-height:1.55;color:var(--dst-texto);margin:0 0 18px;max-width:62ch; } .dst-sugerencias__lista{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px; } .dst-sugerencia{ display:flex;align-items:center;gap:12px; background:#FFFFFF;border:1px solid var(--dst-nude);border-radius:18px;padding:10px; } .dst-sugerencia__foto{ flex:0 0 auto;width:62px;height:62px;border-radius:14px;overflow:hidden; background:var(--dst-crema-3);display:block; } .dst-sugerencia__foto img{width:100%;height:100%;object-fit:cover;display:block} .dst-sugerencia__texto{flex:1 1 auto;min-width:0} .dst-sugerencia__nombre{ display:block;font-size:14px;font-weight:500;line-height:1.3; color:var(--dst-oscuro);text-decoration:none; overflow:hidden;text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .dst-sugerencia__nombre:hover{color:var(--dst-rosa-oscuro)} .dst-sugerencia__precio{ display:block;font-size:13.5px;color:var(--dst-rosa-oscuro);font-weight:600;margin-top:3px; } .dst-sugerencia__precio .woocommerce-Price-amount{font-size:13.5px;color:inherit} .dst-sugerencia__anadir{ flex:0 0 auto; background:none;border:1px solid var(--dst-rosa);border-radius:999px; padding:9px 15px;font-family:inherit;font-size:12px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--dst-rosa-oscuro); cursor:pointer;transition:background .2s ease,color .2s ease; } .dst-sugerencia__anadir:hover:not(:disabled){background:var(--dst-rosa);color:#FFFFFF} .dst-sugerencia__anadir:disabled{opacity:.6;cursor:default} @media (max-width:575px){ .dst-sugerencias{margin-top:24px;border-radius:20px} .dst-sugerencia{padding:9px;gap:10px} .dst-sugerencia__foto{width:54px;height:54px} .dst-sugerencia__anadir{padding:9px 12px;font-size:11px} } /* ---- El "EUR" que sobra en el total ------------------------------------- WooCommerce pinta la fila del total así:
31,75 € EUR
El código de moneda es un nodo de texto suelto, sin etiqueta, así que no se puede ocultar por selector. Y el bloque lo vuelve a montar cada vez que cambia el carrito, de modo que quitarlo con JavaScript sería una pelea sin fin: reaparecería en el siguiente repintado. Se apaga el tamaño del contenedor —que sólo afecta a ese texto suelto— y se le devuelve al importe el suyo. En España el símbolo € no necesita que le pongan "EUR" al lado. */ /* Lleva `body` delante porque la hoja de WooCommerce (cart.css) define el tamaño con el mismo peso y se carga después: sin esto ganaba ella y el "EUR" seguía viéndose. Comprobado leyendo las reglas que alcanzan al elemento. */ body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:0; } body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value > *{ font-size:20px; } /* ============================================================ UN SOLO RECUADRO POR CAJA ============================================================ Tres sitios donde salían dos marcos, uno dentro de otro, y el de dentro con las esquinas cuadradas. Medido en pantalla antes de tocar nada. */ /* 1 · Resumen del pedido. El bloque trae su propio borde de 1 px con border-radius:0, y va dentro de la tarjeta redondeada del lateral. */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{ border:0; } /* 2 · Formas de pago. WooCommerce anida .radio-control__option dentro de .radio-control-accordion-option, y mi regla les daba borde a las dos: una caja de 675 px con otra de 612 dentro. El marco lo lleva la de fuera, que es la que se pulsa. */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{ border:0; padding-top:0; padding-bottom:0; margin-bottom:0; background:transparent; } /* 3 · Las rayas de los lados. `.wc-block-components-radio-control::after` es una caja absoluta de 675×52 px con borde a izquierda y derecha, que WooCommerce dibuja ENCIMA de la opción elegida para marcarla. Como aquí la opción ya tiene su propio borde, esa caja sólo añadía dos líneas verticales duplicadas. */ body.woocommerce-checkout .wc-block-components-radio-control::after, body.woocommerce-cart .wc-block-components-radio-control::after{ display:none; } /* ============================================================ RESUMEN DEL PEDIDO (después de pagar) ============================================================ Esta pantalla no la pinta el bloque de checkout, sino las plantillas clásicas de WooCommerce, así que se quedaba fuera de todo lo de arriba. Medido en un pedido real: "Nuestros detalles bancarios" salía a 68 px y "Beatris Glavan:" a 52, con un interlineado tan apretado que el titular se montaba encima del texto de la dirección que tenía justo arriba. */ body.woocommerce-order-received .site-content h2{ font-family:var(--dst-titulo);font-weight:400; font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:0; color:var(--dst-oscuro); margin:34px 0 14px; } body.woocommerce-order-received .site-content h3{ font-family:var(--dst-titulo);font-weight:400; font-size:clamp(17px,1.8vw,20px);line-height:1.3;letter-spacing:0; color:var(--dst-oscuro); margin:24px 0 10px; } body.woocommerce-order-received .site-content h2:first-child{margin-top:0} /* El aviso de "gracias" y los datos del pedido, con aire y sin pegarse. */ body.woocommerce-order-received .woocommerce-order > *{margin-bottom:22px} body.woocommerce-order-received .woocommerce-order-overview{ list-style:none;margin:0 0 26px;padding:18px 20px; border:1px solid var(--dst-nude);border-radius:20px;background:#FFFFFF; display:flex;flex-wrap:wrap;gap:16px 28px; } body.woocommerce-order-received .woocommerce-order-overview li{ margin:0;border:0;padding:0;font-size:13px;color:var(--dst-apagado); } body.woocommerce-order-received .woocommerce-order-overview li strong{ display:block;font-size:15.5px;color:var(--dst-oscuro);margin-top:3px; } /* Las tablas del pedido, con la cara del resto de la tienda. */ body.woocommerce-order-received table.shop_table, body.woocommerce-order-received table.woocommerce-table{ border:1px solid var(--dst-nude);border-radius:20px;border-collapse:separate; border-spacing:0;overflow:hidden;width:100%; } body.woocommerce-order-received table.shop_table th, body.woocommerce-order-received table.shop_table td{ padding:13px 16px;border-bottom:1px solid var(--dst-crema-3);vertical-align:top; } body.woocommerce-order-received table.shop_table tfoot tr:last-child th, body.woocommerce-order-received table.shop_table tfoot tr:last-child td{border-bottom:0} /* Los datos bancarios, en tarjeta y no como un titular a pantalla completa. */ body.woocommerce-order-received .woocommerce-bacs-bank-details{ border:1px solid var(--dst-nude);border-radius:20px; padding:clamp(16px,2vw,22px);background:var(--dst-crema); } body.woocommerce-order-received .wc-bacs-bank-details-account-name{ font-family:var(--dst-titulo);font-weight:400;font-size:17px;margin:0 0 8px; } body.woocommerce-order-received ul.wc-bacs-bank-details{ list-style:none;margin:0 0 18px;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px 22px; } body.woocommerce-order-received ul.wc-bacs-bank-details li{ margin:0;font-size:14px;color:var(--dst-texto); } body.woocommerce-order-received ul.wc-bacs-bank-details li strong{ display:block;color:var(--dst-oscuro);font-weight:600; } /* Y aquí también sobra el código de moneda. Igual que en el carrito, viene como nodo de texto suelto detrás del importe: 11,80 € EUR Sin etiqueta no hay selector que lo alcance, así que se apaga el tamaño de la celda y se le devuelve el suyo al importe. La celda no lleva más texto: comprobado leyendo su HTML. */ body.woocommerce-order-received table.shop_table td:has(> .woocommerce-Price-amount){ font-size:0; } body.woocommerce-order-received table.shop_table td:has(> .woocommerce-Price-amount) > *{ font-size:15px; }