Si has actualizado recientemente o has realizado una nueva instalación de Prestashop 1.7, te habrás dado cuenta que el botón de añadir al carrito en los listados de productos del tema que trae por defecto, ya no esta visible. Pero no te preocupes, aquí te voy a enseñar como volver a tenerlo con muy pocas lineas 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, si no 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 lió!! 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 linea 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, sera 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 linea 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 linea 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?0 votos, promedio: 0,00 de 50 votos, promedio: 0,00 de 50 votos, promedio: 0,00 de 50 votos, promedio: 0,00 de 50 votos, promedio: 0,00 de 5 (0 votos, promedio: 0,00 de 5, valorado)

 

Si te ha gustado, compártelo en tus redes sociales. Me ayudara a seguir mejorando.
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Share This