Hola @pabloiberia17 y @antoniovlc. El problema de especificidad que menciona @antoniovlc es muy común con el tema Classic. Los estilos predeterminados de Slick Carousel son bastante genéricos y a menudo requieren una sobrescritura más contundente.
Para conseguir esos botones circulares, el efecto hover y los puntos de navegación activos que buscas, necesitas no solo border-radius: 50% sino también ajustar el background-color y transform para el efecto de zoom. Y es crucial asegurar que el icono dentro de la flecha esté centrado.
Aquí tienes un fragmento de CSS que puedes añadir a tu themes/classic/assets/css/custom.css. Debería darte el resultado deseado:
/* Corrección: flechas y puntos de navegación del carrusel */
.products-section .slick-prev, .products-section .slick-next {
background-color: #007bff; border-radius: 50%; /* Fondo azul, circular */
width: 38px; height: 38px; /* Tamaño de botón */
display: flex; justify-content: center; align-items: center; /* Centrar icono */
}
.products-section .slick-prev:hover, .products-section .slick-next:hover {
transform: scale(1.1); /* Efecto zoom al pasar el ratón */
}
.products-section .slick-dots li button {
He usado .products-section para aumentar la especificidad. Ajusta los colores y tamaños (#007bff, #ccc, 38px, 12px) a tu gusto. El display: flex en las flechas es clave para centrar el icono de flecha dentro del nuevo botón circular.