Avisos
Vaciar todo

Eliminar efecto hover listado productos  

 
Natalia
 Natalia
Usuario activo

Hola, estoy utilizando Prestashop 1.6 con el tema por defecto.
Me gustaría eliminar el efecto hover de los listados de productos. Pretendo que al pasar el cursor sobre un producto no se produzca ningún efecto y así sólo se vería el título y el precio. ¿Alguna idea para poder hacerlo? Gracias!!!

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 03/07/2016 2:02 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Natalia.
Prueba editando el archivo global.css que se encuentra en ' themes/default-bootstrap/css/global.css ' y añade lo siguiente al final del archivo:

.button-container {
  display: block !important;
}

Después de esto edita el archivo ' product_list.css ' que se encuentra en ' /themes/default-bootstrap/css/product_list.css ' y añade lo siguiente:

ul.product_list.grid > li .product-container .old-price, ul.product_list.grid > li .product-container .price, ul.product_list.grid > li .product-container .price-percent-reduction {
    display: none;
}

ul.product_list.grid > li.hovered .product-container .product-image-container .content_price {
    display: none;
}

Comprueba si este es el efecto que buscabas.

Nota: Recuerda realizar una copia del archivo antes de cualquier modificación, solo con un copia y pega en el block de notas tendrás suficiente para dejarlo como estaba anteriormente.

Un saludo

ResponderCitar
Respondido : 03/07/2016 3:24 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Natalia
 Natalia
Usuario activo

Gracias Pepe,
He aplicado los cambios pero ahora:
1. los botones "añadir carrito" y "más" estan fijos.
2. Cuando paso el ratón por encima, aparece el efecto hover mostrando el precio y los dos botones anteriores :ohmy:

ResponderCitar
Respondido : 03/07/2016 6:03 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Prueba a crear un fichero CSS personalizado https://www.webempresa.com/blog/como-modificar-estilos-css-en-plantillas-joomla-wordpress-o-prestashop.html e inserta el siguiente código:

ul.product_list.grid > li .product-container .product-image-container .content_price {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  bottom: -1px;
  display: none;
  left: 0;
  padding: 9px 0;
  position: absolute;
  width: 100%;
}
ResponderCitar
Respondido : 03/07/2016 6:48 pm

Cursos Gratuitos WordPress