El objetivo era realizar modificaciones en la página del catálogo directamente en Woocommerce. Se quería lograr un efecto dinámico al momento de hacer hover con el mouse sobre las imágenes, y también colocar la dimensión de las imágenes de una forma consistente para el tamaño de los cuadros del cliente.

El objetivo se logró usando CSS + HTML, y por supuesto editando mediante los ganchos (hooks, actions y filters) de Woocommerce. Usando la manera correcta de editar las plantillas, se logro la consistencia deseada y el efecto de Hover en las imágenes.

En la página de producto el objetivo era lograr replicar el diseño de uno de los sitios del principal competidor pero aplicando el aire original y adecuado para la marca del cliente que es minimalista y resaltado en colores de alto contraste como negro y blanco.

La mejor forma de lograrlo fué de igual forma que con la página de catálogos, editar con los ganchos de Woocommerce para lograr la estructura deseada. Luego con CSS y HTML se dieron los estilos exactos y diferenciadores. El mayor reto que se presentó en la construcción de la página fué con la galería de imágenes en la página de los productos.

Fué un reto porque el modelo de Galería de imágen que el cliente deseaba debía tener puntos gruesos en lugar de miniaturas de imágen. La forma que tiene woocommerce para hacer funcionar ésta galería hacía un poco complicado el proceso de darle forma. Finalmente se logró instalando un plugin que lograra la tarea y que permitiera las facilidades necesarias al cliente para modificarlo cuando quisiera.

Te gusta lo que ves?

Trabajemos Juntos