Si has actualizado recientemente, has realizado una nueva instalación de Prestashop 1.7 o te han diseñado una tienda online, te habrás dado cuenta qué el botón de añadir al carrito en los listados de productos del tema que trae por defecto, ya no está visible. Pero no te preocupes, aquí te voy a enseñar como volver a tenerlo con muy pocas líneas de código.
Yo soy de los que piensa que quitar el botón de “Añadir al Carrito”, “Añadir a la Cesta”, “Comprar Ahora” o como quieras llamarlo, es un gran error, no solo a nivel de usabilidad, sino también a nivel de conversiones. Con esta acción estamos alejando a nuestro usuario del proceso de compra, le añadimos un clic más a todo el proceso y seguro que habrás oído por ahí en miles de sitios que contra menos clics tenga este proceso, más probabilidades tendrás de terminar realizando la venta.
Así que, ¡vamos al lio! Voy a explicarte como volver a activar el botón de comprar en Prestashop 1.7.
Paso a paso botón “Añadir al carrito” en Prestashop 1.7
1. Tocando el archivo tpl
Lo primero que tendremos que hacer, es buscar el archivo product.tpl abriendo nuestro ftp y entrar en la carpeta del tema activo, en este caso “themes > classic > templates > catalog > _partials > miniatures”. Al editarlo, esto es lo que nos encontramos.
Aproximadamente en la línea 61, tendremos que agregar el siguiente código que hará que nuestro botón vuelva aparecer a falta de hacer los ajustes en nuestra hoja de estilos.
<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
<input type="hidden" name="token" value="{$static_token}">
<input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
<input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">
<button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url || $product.quantity_wanted>$product.quantity}disabled{/if}>
<i class="material-icons shopping-cart"></i>
{l s='Add to cart' d='Shop.Theme.Actions'}
</button>
</form>2. Tocando el css
El siguiente paso, será dejar bonito y todo cuadrado en la caja de nuestro producto ya que hasta ahora se puede ver algo descuadrado. Para ello vamos a irnos a nuestra hoja de estilos en la ruta “themes > classic >assets > css” y allí editaremos el archivo theme.css
Si no has modificado el tema anteriormente, en la línea 6146, tenemos la regla que establece los estilos de las cajas de los productos. La propiedad que tenemos que tocar es “height: 318px;” y aumentar su altura hasta “368 px” y así poder encuadrar nuestro botón correctamente.
La siguiente y ultima regla a modificar se encuentra en la línea 6207 y pertenece a la descripción del producto. De la misma forma que en el paso anterior aumentamos el valor de la propiedad height de “70 px” a “115 px”.
Con estos sencillos pasos, ya tenemos activos de nuevo nuestros botones de añadir al carrito y nuestra tienda online lista para aumentar sus ventas.
¿Que te ha parecido este pequeño truco para Prestashop 1.7?
Déjame un comentario con tu opinión y comentarios, seguro que me ayudaran a mejorar. ¡Nos vemos!
(7 votos, promedio: 4,60 de 5, valorado)
Justo lo que estaba buscando. Muchas gracias!!!
He comprobado que no funciona cuando cambias de página, o cuando activas un filtro de la navegación por facetas. Al cambiar la url no hace bien la acción. Si refrescas página vuelve a funcionar. No se si se te ocurre la forma de hacer que funcione.
Voy a revisarlo por si ha cambiado algo, y te cuento.
a mi me sucede esto cuando agrego un producto que esta activado en la tienda pero que tiene 0 stock, entonces si agrego ese producto al carrito sale el mensaje pero no lo agrega y ahi es cuando ya no agrega otros productos hasta recargar la pagina, ya lo hice varias veces con productos distintos y eso es lo que he encontrado, espero les sirva de algo
Saludos 😉
Alguien me puede explicar detalladamente el proceso para poder hacer aparecer el botón??? Se lo agradecería mucho!!
hice lo indicado pero no me cambia nada en la pagina, aun no puedo ver el botón. Gracias
Hola Nestor, te da algún error? o directamente no te sale el botón?
Hola me funciona bien cuando estoy como invitado, pero cuando me registro como cliente, se inhabilita y ya no permite agregar a la cesta, cuando como invitado si lo permite.
Eres un crack
Gracias, gracias y gracias por compartir. Gente así hace falta 🙂
Si me funcionó, mil garcias por el aporte, aunque como otro comentario anterior no vuelve aparecer el boton si seleccionas una categoria o catalogo de productos en particular.
Gracias, todo funciona perfecto.
El único problema es que cuando un producto está fuera de stock el botón no se desactiva
lo logré solucionar:
añadir la siguiente línea al código
{if $product.availability == ‘unavailable’}disabled{/if}
¿Dónde hay que añadir esto?
Hola!
Querría saber si es posible cambiar el tamaño del botón ‘añadir al carrito’ en la versión 1.6.1.18
Muchas gracias!
Ya lo he averiguado. Gracias de todas formas. Saludos!
Hola, muchas gracias por tu aporte, esta sensacional.
Tengo un par de dudas:
1) Dónde debemos añadir la siguiente línea al código para que cuando un producto está fuera de stock el botón se desactive
{if $product.availability == ‘unavailable’}disabled{/if}
2) Cómo puedo hacer para que en vista rápida al añadir al carrito más unidades de un producto de las que hay en stock, advierta con un mensaje que el stock no es suficiente.
Esta cuestión si la realiza bien en vista detallada.
Gracias.
Buff solo te puedo dar las miles y miles de gracias, con esto me ha funcionado perfecto en un template que no tiene botón en las categorías ¡Gracias!
No conocía tu página, pero acaba de ir a favoritos 🙂
Yo el problema que experimento es el que el boton de “Vista Rápida” o “Quick View” se queda oculto detrás de la descripción del producto. Pienso que también habría que elevarlo modificando el CSS alguien sabe como hacerlo? Gracias de ante mano.
A mi me pasa que me aparece un circulo rojo y el boton esta como imagen bien colocado pero no funciona, no es posible presionarlo.
Me pasa exactamente lo mismo, lo añado y aparece el boton, pero cuando pinchas aparece un circulo rojo y aunque presiones no hace nada.
Igualmente el ultimo aporte no es un codigo php y al copiarlo no funciona.
¿¿Lo has conseguido solucionar o has encontrado otra solución para que aparezca el botón??
Muchas gracias!
Has dado en el clavo con este post , realmente creo que este sitio tiene mucho que decir en estos temas . Volveré pronto a vuestro sitio para leer mucho más , gracias por esta información .
para los que no manejamos códigos y debemos solucionar esto? :/
Buenas, tras trastear un poco en el tema os dejo la modificación que mejor me ha funcionado, primero os comento, este fragmento lo hemos incluido dentro de un if que pregunta algo asi como si se muestra el precio, si generamos un else para este caso y vovlemos a pegar el fragmento facilitado por JLMarin quedaria algo asi:
{if $product.show_price}
{if $product.has_discount}
{hook h=’displayProductPriceBlock’ product=$product type=”old_price”}
$product.quantity}disabled{/if}>
{l s=’Add to cart’ d=’Shop.Theme.Actions’}
{l s=’Regular price’ d=’Shop.Theme.Catalog’}
{$product.regular_price}
{if $product.discount_type === ‘percentage’}
{$product.discount_percentage}
{elseif $product.discount_type === ‘amount’}
{$product.discount_amount_to_display}
{/if}
{else}
$product.quantity}disabled{/if}>
{l s=’Add to cart’ d=’Shop.Theme.Actions’}
{/if}
Este codigo empieza en mi linea 57 de archivo producto.tpl
y se me muestra el boton tanto en modulos de destacados como nuevos y dentro de las categorias.
Gracias y espero os sea util.
Gracias por tu aporte
Hola , no soy capaz de poder poner que marque sin stock cuando llegue a 0, donde debo introducir este trozo de codigo? entre el de Jlmarin y la linea que comentas?
Hola,
muchísimas gracias a todos por colaborar, sois geniales!
He usado el código y en mi caso me aparece el botón en todas partes, la pega es que me sale siempre deshabilitado (me sale un circulo rojo y no permite hacer clic) y desconfigurado (sale fuera de la cajita del producto). Por más vueltas que le doy no consigo habilitar el botón.
Mis productos tienen combinaciones (imagino que esa es la pega…)
¿Podeís echarme un cable?
Mil gracias a todos!
a mi me sale el boton pero cuando le doy agregar me sale un circulo rojo