Tutorial WordPress: Hacer sticky el resumen de producto en WooCommerce con CSS

Introducción

Hacer sticky (pegajoso) el resumen de producto en WooCommerce permite que la caja con el título, precio, resumen corto y botones de compra permanezca visible mientras el usuario desplaza la galería de imágenes o la descripción larga. Con CSS moderno (position: sticky) puedes lograrlo de forma limpia y sin JavaScript en la mayoría de temas. Este artículo explica en detalle cómo implementarlo, las variantes más comunes, problemas habituales y soluciones.

Conceptos básicos: cómo funciona position: sticky

position: sticky combina comportamiento estático y fijo: el elemento se comporta como normal hasta que su contenedor lo obliga a pegarse a una distancia top/left/right/bottom especificada. Requisitos y limitaciones importantes:

El elemento sticky sólo se pega dentro del contenedor padre (ancestro que define el límite).
Los ancestros no deben tener overflow distinto de visible (overflow: hidden/auto/scroll puede impedir el sticky).
Transformaciones (transform) en un ancestro pueden romper el comportamiento sticky.
Navegadores modernos soportan position: sticky Safari requiere el prefijo -webkit-sticky en casos antiguos.

Identificar los selectores correctos en WooCommerce

La estructura típica de la página de producto en WooCommerce es algo así:

.single-product div.product (contenedor principal)
.woocommerce-product-gallery (galería)
.summary, .entry-summary (resumen del producto — título, precio, extracto, añadir al carrito)

Dependiendo del tema estas clases pueden variar, pero las más usadas son .product y .summary o .entry-summary. Ajusta los selectores si tu tema usa otros nombres o estructuras.

Pasos prácticos para implementar sticky

Verifica la estructura HTML de tu tema (usar inspeccionar en el navegador).
Asegúrate de que el contenedor padre (generalmente div.product) no tenga overflow que interrumpa el sticky.
Si la plantilla muestra galería y resumen en columnas, convierte el contenedor en un layout de dos columnas (flex) para que la altura del contenedor sea la de la columna más alta.
Aplica position: sticky al resumen, define top con el offset deseado y añade z-index si es necesario para que se muestre por encima de otros elementos.
Desactiva el comportamiento sticky en pantallas pequeñas con media queries (en móviles es preferible posición estática).

Ejemplo básico (recomendado para temas modernos)

Este bloque CSS es la base que funcionará en muchos temas: convierte el contenedor en flex y hace sticky a la columna de resumen.

/ 1) Convertir el contenedor en filas paralelas (galería   resumen) /
.single-product div.product {
  display: flex
  align-items: flex-start / importante: alinear al tope /
  gap: 2rem / espacio entre columnas /
}

/ 2) Sticky en el resumen /
.single-product div.product .summary,
.woocommerce div.product .summary,
.single-product .entry-summary {
  position: -webkit-sticky / Safari antiguo /
  position: sticky
  top: 24px / distancia desde la parte superior de la ventana /
  z-index: 5
  align-self: start / evitar estirado en algunos temas /
  max-width: 480px / opcional, controla ancho máximo /
}

/ 3) Ajuste cuando el admin bar de WP está presente /
body.admin-bar .single-product div.product .summary {
  top: 56px / 32px admin bar   24px de separación (ajusta a tu preferencia) /
}

/ 4) Desactivar en móviles /
@media (max-width: 900px) {
  .single-product div.product {
    display: block / vuelve al flujo vertical /
  }
  .single-product div.product .summary {
    position: static
    max-width: 100%
  }
}

Variantes y matices

Dependiendo del tema pueden ser necesarias adaptaciones:

Si el tema usa una rejilla CSS diferente, adapta el selector del contenedor padre (.product) para que sea el elemento que engloba tanto galería como resumen.
Si la galería está arriba y el resumen abajo (layout vertical), position: sticky puede pegar el resumen sólo al alcanzar su contenedor en ese caso el diseño no necesita flex, pero revisa límites del contenedor.
Si el resumen está dentro de un elemento con overflow: auto/hidden, mueve el sticky a un nivel superior o elimina el overflow.

Comprobaciones y problemas comunes

Si el sticky no funciona revisa:

¿Algún ancestro tiene overflow distinto de visible? (overflow: hidden/auto/scroll).
¿Algún ancestro aplica transform, filter o perspective? (estos crean un nuevo contexto y pueden romper sticky).
¿Estás aplicando position: sticky al elemento correcto? (aplícalo al bloque que quieres que se quede fijo).
¿Top es demasiado pequeño o demasiado grande? Ajusta el valor teniendo en cuenta el admin bar y encabezados fijos del tema.
¿Necesitas z-index para que el resumen esté por encima de la galería cuando se superponen?

Fallbacks y compatibilidad

Para navegadores antiguos o en casos donde position: sticky no se soporta, puedes usar @supports para degradar limpiamente o permitir que el elemento sea estático:

@supports not (position: sticky) {
  .single-product div.product .summary {
    position: static / comportamiento por defecto en navegadores no compatibles /
  }
}

Checklist rápido antes de publicar

Probar en diferentes resoluciones (desktop, tablet, móvil).
Verificar en navegadores principales (Chrome, Firefox, Safari, Edge).
Comprobar comportamiento con la barra de administración de WordPress visible (usuarios logueados).
Inspeccionar ancestros en la herramienta de desarrollador para overflow/transform que puedan romper el sticky.
Comprobar que el sticky no tapa información importante como botones o el precio (usar z-index equilibrado).

Ejemplo completo final (lista lista para pegar en CSS del tema o en Personalizar > CSS adicional)

/ --- Inicio snippet sticky resumen WooCommerce --- /
.single-product div.product {
  display: flex
  align-items: flex-start
  gap: 2rem
}

/ Selectores amplios por compatibilidad entre temas /
.single-product div.product .summary,
.woocommerce div.product .summary,
.single-product .entry-summary {
  position: -webkit-sticky
  position: sticky
  top: 24px
  z-index: 6
  align-self: start
  max-width: 480px
}

/ Ajuste cuando el usuario está logueado y aparece la admin-bar /
body.admin-bar .single-product div.product .summary {
  top: 56px
}

/ Evitar sticky en pantallas pequeñas /
@media (max-width: 900px) {
  .single-product div.product {
    display: block
  }
  .single-product div.product .summary {
    position: static
    max-width: 100%
  }
}
/ --- Fin snippet sticky resumen WooCommerce --- /

Notas finales y buenas prácticas

Usar CSS puro con position: sticky es la opción más ligera y con mejor rendimiento frente a soluciones JavaScript. Sin embargo, por la diversidad de temas WordPress y frameworks, a veces habrá que adaptar selectores y valores específicos. Prioriza pruebas en móviles y en usuarios logueados (admin bar) y revisa las reglas CSS del tema que puedan interferir (overflow, transform, z-index). Con los ajustes adecuados obtendrás un resumen de producto que permanece a la vista y mejora la conversión sin añadir scripts adicionales.

SushiHost