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

/*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 */
}