Personalizar > CSS adicional
(o en Elementor/tu constructor, en «CSS personalizado» a nivel de sitio).
Como es CSS global, se aplica automáticamente a /tienda/ sin tocar
plantillas ni romper el shortcode de WooCommerce.

PIEZA 2 — Banner superior: es un bloque HTML que debes insertar arriba de
la grilla de productos. Dónde pegarlo depende de tu constructor:
• Si usas Elementor con «Plantillas de tienda»: edita la plantilla de
archivo de producto y agrega un widget HTML arriba del widget «Productos».
• Si tu tema usa el Editor de sitios (FSE) de WordPress: edita la
plantilla «Product Archive/Shop» y agrega un bloque HTML personalizado
arriba del bloque de productos.
• Si no tienes acceso a editar la plantilla, como alternativa rápida
puedes pegar el banner en la parte superior de la descripción de la
categoría «Tienda» (Productos > Categorías o WooCommerce > Ajustes >
Páginas), que WooCommerce sí imprime arriba de la grilla.
======================================================================= –>

@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap’);

:root {
–vlk-black: #1B1B1B; –vlk-white: #F5F5F5; –vlk-green: #3E5F4A;
–vlk-blue: #1E4E79; –vlk-cold: #3BA7DB; –vlk-hot: #D8483C;
}

/* —- Grilla y tarjetas de producto (archivo de tienda + categorías) —- */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 24px !important;
list-style: none !important;
}
.woocommerce ul.products li.product {
background: #FFFFFF; border: 1px solid #E4E3DD; border-radius: 10px; overflow: hidden;
padding: 0 !important; position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
font-family: ‘Inter’, sans-serif;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 14px 30px rgba(27,27,27,0.12); transform: translateY(-5px); }
.woocommerce ul.products li.product img {
width: 100% !important; aspect-ratio: 1/1; object-fit: cover;
border-radius: 0 !important; margin: 0 !important; transition: transform 0.35s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.06); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: ‘Oswald’, sans-serif; font-weight: 600; text-transform: uppercase;
font-size: 1.02rem; color: var(–vlk-black); padding: 16px 16px 0; margin: 0;
}
.woocommerce ul.products li.product .price {
font-family: ‘Oswald’, sans-serif; font-size: 1.15rem; color: var(–vlk-black);
padding: 6px 16px 16px; display: block;
}
.woocommerce ul.products li.product .price del { color: #9a9d92; font-size: 0.85rem; }
.woocommerce ul.products li.product .price ins { color: var(–vlk-hot); text-decoration: none; }
.woocommerce ul.products li.product .button {
display: block; margin: 0 16px 16px; width: calc(100% – 32px);
background: var(–vlk-green) !important; color: var(–vlk-white) !important;
font-family: ‘Oswald’, sans-serif; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.03em; font-size: 13px; padding: 12px; border-radius: 5px;
text-align: center; border: none !important; transition: background 0.2s ease;
}
.woocommerce ul.products li.product .button:hover { background: #4c7259 !important; }
.woocommerce span.onsale {
min-height: 0; min-width: 0; line-height: 1; top: 12px; left: 12px; right: auto;
background: var(–vlk-hot) !important; color: var(–vlk-white) !important;
font-family: ‘JetBrains Mono’, monospace; font-size: 10px; text-transform: uppercase;
letter-spacing: 0.05em; padding: 5px 9px; border-radius: 999px;
}

/* —- Barra de resultados / orden —- */
.woocommerce-result-count, .woocommerce-ordering select {
font-family: ‘Inter’, sans-serif; font-size: 13.5px; color: #43463f;
}
.woocommerce-ordering select {
border: 1px solid #D8D6CE; border-radius: 6px; padding: 8px 12px; background: #FFFFFF;
}

/* —- Filtros y categorías (sidebar) —- */
.woocommerce .widget_price_filter,
.woocommerce .widget_product_categories,
.woocommerce .widget_layered_nav {
background: #FFFFFF; border: 1px solid #E4E3DD; border-radius: 10px; padding: 20px;
}
.woocommerce .widget-title, .woocommerce .widget_title {
font-family: ‘Oswald’, sans-serif; font-weight: 600; text-transform: uppercase;
font-size: 0.95rem; color: var(–vlk-black); margin-bottom: 14px; letter-spacing: 0.02em;
}
.woocommerce .widget_product_categories li, .woocommerce .widget_layered_nav li {
padding: 6px 0; font-family: ‘Inter’, sans-serif; font-size: 13.5px;
}
.woocommerce .widget_product_categories li a,
.woocommerce .widget_layered_nav li a { color: #43463f; transition: color 0.2s ease; }
.woocommerce .widget_product_categories li a:hover,
.woocommerce .widget_layered_nav li a:hover { color: var(–vlk-cold); }
.woocommerce .price_slider_amount .button {
background: var(–vlk-green) !important; border-radius: 4px !important; color: var(–vlk-white) !important;
font-family: ‘Oswald’, sans-serif; text-transform: uppercase; font-size: 12px !important;
}
.woocommerce .price_slider .ui-slider-range { background: var(–vlk-green) !important; }
.woocommerce .price_slider .ui-slider-handle { background: var(–vlk-black) !important; border: none !important; }

/* —- Banner superior de la tienda —- */
.vlk-shop-banner {
background: var(–vlk-black); color: var(–vlk-white);
padding: 44px 24px; margin-bottom: 32px; border-radius: 12px;
text-align: center; font-family: ‘Inter’, sans-serif;
}
.vlk-shop-banner span {
font-family: ‘JetBrains Mono’, monospace; font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(–vlk-cold); display: block; margin-bottom: 10px;
}
.vlk-shop-banner h1 {
font-family: ‘Oswald’, sans-serif; font-weight: 700; text-transform: uppercase;
font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0;
}
.vlk-shop-banner p { margin-top: 10px; color: rgba(245,245,245,0.72); font-size: 0.95rem; }

@media (max-width: 780px) {
.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; }
}

Catálogo completo

Equipo VALKÖR para cada aventura

Termos, botellas, tazas y accesorios de acero inoxidable — filtra por categoría y encuentra el tuyo.