Cómo Personalizar tu Carrusel de Productos WooCommerce con CSS – Guía Completa

17 de diciembre de 2024

Si usas WooCommerce y quieres mejorar el diseño de tu tienda online, personalizar un carrusel de productos es una excelente forma de destacar. Hoy te mostraré cómo hacerlo utilizando CSS y el plugin WP Product Slider de Hommer. Es gratis, ligero y potente.

Este tutorial es la continuación de un video que realicé donde expliqué cómo instalar y configurar este plugin. Si no lo has visto, puedes verlo aquí.

Requisitos Previos

Antes de empezar, asegúrate de:

Tener WordPress y WooCommerce instalados.
Haber instalado el plugin WP Product Slider.
Conocer lo básico de CSS (aunque te daré el código listo).

1. Instalar y Configurar el Plugin WP Product Slider

Si aún no lo has hecho:

Ve a Plugins > Añadir Nuevo.
Busca WP Product Slider.
Instálalo, actívalo y configúralo seleccionando las categorías y productos.

2. Diseño Básico del Carrusel

Por defecto, el plugin muestra:

Imagen del producto.
Título, precio y botón de “Añadir al carrito”.
Un efecto hover básico con flechas de navegación.

Aunque es funcional, podemos darle un toque más profesional. ¡Vamos a personalizarlo!

3. Personalización con CSS – ¡Código Listo!

3.1. Mostrar Siempre Título, Precio y Botón

Por defecto, estos elementos se ocultan y aparecen solo al pasar el cursor. Modifícalo así:

/*quitar el fondo negro */
.grid figcaption{position:
	relative!important; 
background-color:#00000000 !important}

/* Asegurarse de que el texto dentro de figcaption no tenga transformaciones aplicadas */
figcaption {
    /* Desactiva cualquier transformación previa */
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;

/* Asegura que el texto sea completamente visible siempre */
    opacity: 1 !important;

/* Desactiva transiciones para eliminar animaciones */
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}

/* Asegurarse de que no se aplique ningún efecto hover al contenedor figcaption */
figure:hover figcaption,
figure.cs-hover figcaption {
    /* Mantener sin transformaciones en el estado hover */
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;

/* Mantener siempre visible el contenido (sin opacidad cambiada) */
    opacity: 1 !important;
	
}

/* Estilo para la imagen del producto dentro de figure */
figure img {   
    /* Redondear bordes de la imagen */
    border-radius: 20px !important;
    /* Añadir una sombra a la imagen */
    box-shadow: 0px 5px 10px 0px #c1c1c1 !important;
    /* Transición suave al hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en la imagen */
figure:hover img {
    /* Zoom leve al pasar el cursor */
    transform: scale(1.01);

/* Sombra más pronunciada en hover */
     box-shadow: 0px 8px 10px 0px #c1c1c1 !important;
}

/* Estilo para el título del producto */
figcaption .pro_title {
    font-size: 18px; /* Tamaño de fuente del título */
    font-weight: bold; /* Título en negrita */
    color: #333 !important; /* Color del texto */
    text-align: center; /* Centrar el texto */
       transition: color 0.3s ease; /* Transición suave en hover */
}

/* Hover en el título */
figcaption .pro_title:hover {
    color: #ccc888 !important; /* Cambiar color del título al pasar el cursor */
}

/* Estilo para el precio del producto */
figcaption .pro_price_area {
    font-size: 14px; /* Tamaño del texto del precio */
    font-weight: 700; /* Precio en negrita */
    color: #444; /* Color del precio */
    text-align: center; /* Centrar el texto */
    margin-bottom: 10px; /* Espaciado inferior */
}

/* Estilo para el precio anterior */
figcaption .pro_price_area del  {color:#f00 !important }

/* Estilo para el botón de añadir al carrito */
figcaption .wpb_cart_button .add_to_cart_button {
    display: inline-block; /* Botón en línea */
    padding: 8px 16px; /* Espaciado interno */
    font-size: 14px; /* Tamaño del texto del botón */
    background-color: #28a745 !important; /* Color de fondo verde */
    color: #fff; /* Color del texto blanco */
    text-transform: uppercase; /* Texto en mayúsculas */
    border: none; /* Sin borde */
    border-radius: 5px !important; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
}

/* Hover en el botón */
figcaption .wpb_cart_button .add_to_cart_button:hover {
    background-color: #218838 !important; /* Fondo más oscuro en hover */
    transform: translateY(-2px); /* Mover botón ligeramente hacia arriba */
}

/* Contenedor de las flechas – Centrado vertical y alineado a los lados */
.wpb_slider_area .owl-theme .owl-nav {
    position: absolute !important; /* Posicionamiento absoluto dentro del slider */
    top: 35% !important; /* Centrado vertical */
    width: 100% !important; /* Ocupar el ancho completo */
  
}

/* Flecha izquierda */
.wpb_slider_area .owl-theme .owl-nav .owl-prev {
    position: absolute !important;
    left:0px !important; /* Distancia desde el borde izquierdo */
    background-color: rgba(100, 100, 100, 0.1) !important; /* Fondo semitransparente */
    color: inherit !important; /* Mantener el color original del diseño */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* Bordes redondeados */
    pointer-events: auto !important; /* Permite interacción */
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

/* Flecha derecha */
.wpb_slider_area .owl-theme .owl-nav .owl-next {
    position: absolute !important;
    right: 10px !important; /* Distancia desde el borde derecho */
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: inherit !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    pointer-events: auto !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

/* Hover en las flechas */
.wpb_slider_area .owl-theme .owl-nav .owl-prev:hover,
.wpb_slider_area .owl-theme .owl-nav .owl-next:hover {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Fondo más oscuro en hover */
    transform: scale(1.1) !important; /* Efecto de zoom */
}

5. Cómo Implementar el Código

Ve a tu panel de WordPress.
Dirígete a Apariencia > Personalizar > CSS adicional.
Copia y pega el código según cada sección.
Guarda y refresca tu página.

Resultado Final

Después de implementar el CSS:

El título, precio y botón serán visibles siempre.
Las imágenes tendrán bordes redondeados, sombra y efecto zoom.
Las flechas estarán centradas y con diseño moderno.
El botón “Añadir al carrito” tendrá un efecto profesional.

Conclusión

Con solo un poco de CSS, puedes transformar el carrusel de productos de WooCommerce en algo único y atractivo. Esto no solo mejora el diseño, sino que también hace tu tienda más funcional y profesional.

¿Te gustó este tutorial? Suscríbete a mi canal de YouTube Tutoriales Alejo Diseña para más contenido sobre WordPress, WooCommerce y diseño web. ¡Activa las notificaciones y déjame tus comentarios!

¿Quieres más recursos?

Hosting recomendado: Hostinger
Plantillas premium: Divi
Plugins avanzados: CodeCanyon

Nos vemos en el próximo tutorial. ¡Chao, chao! 👋

Apoya el canal y ayuda a que este contenido siga creciendo.

0 comentarios

Enviar un comentario Cancelar la respuesta

Cargando canal ....

Todas las semanas subimos nuevo video

Regístrate gratuitamente y accede a todo el contenido

AB