Proyecto cliente

Mi
Victoria

Sitio mivictoria.com.ar

Resumen del proyecto

4 componentes entregados.
1 override de WooCommerce.

Todos los componentes fueron construidos en HTML/CSS/JS vanilla y PHP, con identidad visual propia de Mi Victoria. Sin dependencias externas.

01
Carrusel de productos
Loop infinito con autoplay, dots de navegación y soporte responsive para 1, 2 o 3 columnas.
Homepage
02
Grilla con filtros
Grid de productos filtrable por categoría (LP5, LP32, Chardonnay, 1994) con animación de visibilidad.
Colección
03
Tabs de vinos
Panel con tabs por vino, info técnica colapsable, logos y nota de cata. Scroll horizontal en mobile.
Landing
04
Página de producto
Override completo de WooCommerce. 2 columnas, logo dinámico por categoría, nota de cata y carrusel relacionado.
WooCommerce

Detalle técnico

Componentes

Cada componente es un bloque standalone que se inserta en WordPress vía Elementor o shortcode.

01
Carrusel de productos destacados
Slider de productos con loop infinito real (clonado de nodos DOM), autoplay cada 3.5s, flechas de navegación, dots activos y resize handler. Muestra 3 tarjetas en desktop, 2 en tablet, 1 en mobile. Cada tarjeta incluye imagen, nombre, precio y botón "Comprar".
JavaScript vanilla Flexbox Loop infinito Responsive Autoplay
Ver sitio →
02
Grilla de productos con filtros
Grid de 3 columnas (2 en tablet, 1 en mobile) con botones de filtro por categoría. Filtrado instantáneo sin recarga de página usando classList.toggle('hidden'). Muestra mensaje vacío si ninguna tarjeta coincide con el filtro activo.
JavaScript vanilla CSS Grid Filtros dinámicos Responsive
Ver colección →
03
Tabs de vinos — ficha técnica
Panel de información con tabs para LP32, LP5, Sweet Chardonnay y 1994 Malbec. Cada tab muestra logo del vino, varietal, ubicación del viñedo, crianza, nota de cata y datos técnicos (alcohol, acidez, azúcar, pH) colapsables. Scroll horizontal sin scrollbar en mobile.
JavaScript vanilla CSS Transitions Logos SVG/PNG Toggle animado Mobile scroll
Ver sitio →
04
Página de producto — WooCommerce override
Template override completo en neve-child/woocommerce/content-single-product.php. Layout de 2 columnas con imagen a la izquierda y ficha a la derecha. Logo dinámico detectado por taxonomía de producto y por slug como fallback. Datos técnicos desde atributos de WooCommerce. Nota de cata desde la descripción larga. Carrusel de productos relacionados al pie.
PHP WooCommerce hooks Template override Neve child theme CSS Grid Logo dinámico
Ver producto →

Bugs resueltos

Problemas encontrados
y solucionados

Un registro de los problemas técnicos encontrados durante el desarrollo y cómo se resolvieron.

Título de producto duplicado
El template propio y los hooks de Neve renderizaban el título dos veces. Se eliminó la llamada a woocommerce_template_single_meta() del override.
Input de cantidad en el botón
WooCommerce mostraba el selector de cantidad. Se oclutó usando el filtro woocommerce_is_sold_individually aplicado solo en el contexto del template.
add_filter('woocommerce_is_sold_individually', '__return_true');
SVG bloqueado por WordPress
WordPress bloquea la subida de SVG por la UI. Los logos de Chardonnay y 1994 se subieron directamente a wp-content/uploads/ vía el File Manager de Ferozo.
Logo no aparecía en Chardonnay
La taxonomía no devolvía el slug correcto. Se agregó un fallback que detecta la categoría por el slug del producto (get_slug()), garantizando la detección siempre.
$product_slug = strtolower($product->get_slug()); if (strpos($product_slug, 'chardonnay') !== false) { $cat_slug = 'mi-victoria-chardonnay'; }
Imagen del producto con width:0
Neve aplica img { width: 100% } globalmente. El contenedor del logo medía 0px por flexbox, colapsando la imagen. Se resolvió con width: auto !important y width: 100% en el contenedor.
Galería WC con tamaño fijo por JS
Flexslider (galería de WooCommerce) inyecta anchos fijos via JavaScript que no se pueden pisar con CSS. Se reemplazó woocommerce_show_product_images() por un <img> simple con wp_get_attachment_image_url().

Stack técnico

Tecnologías

Todo el trabajo se desarrolló sobre la infraestructura existente del cliente, sin agregar plugins ni dependencias nuevas.

CMS WordPress Con WooCommerce para el ecommerce y Elementor Free para la maquetación de páginas.
Theme Neve + neve-child Child theme para los overrides de WooCommerce y CSS personalizados sin modificar el tema padre.
Hosting Ferozo Hosting compartido. Acceso vía File Manager para subir archivos PHP, SVG y assets directamente.
Frontend HTML / CSS / JS vanilla Sin frameworks. Todos los componentes son bloques standalone insertados vía widget de Elementor.
Backend PHP + WooCommerce API Template override de WooCommerce, hooks de acción/filtro, y atributos de producto para datos dinámicos.
Tipografía Noto Sans Nag Mundari + PT Serif Sistema tipográfico dual: sans para UI/precios, serif para títulos y descripciones editoriales.