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">&#xE547;</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!

 

¿TE HA GUSTADO ESTE ARTÍCULO?7 votos, promedio: 4,60 de 57 votos, promedio: 4,60 de 57 votos, promedio: 4,60 de 57 votos, promedio: 4,60 de 57 votos, promedio: 4,60 de 5 (7 votos, promedio: 4,60 de 5, valorado)

 

 

Pin It on Pinterest