Hola @antoniovlc, excelente iniciativa para mejorar la conversión móvil. La clave está en un buen manejo de CSS responsive y la estructura del Smarty. Como bien apuntan @lorena24 y @nataliabici29, tu versión de PrestaShop es importante, pero asumiendo que es 1.7.5.1 con el tema Classic, la solución pasa por un tema hijo y CSS.
Primero, crea un tema hijo si no lo tienes. Luego, copia el archivo themes/classic/templates/catalog/_partials/product-add-to-cart.tpl a la misma ruta en tu tema hijo. Modifícalo para que la barra fija tenga el HTML correcto y esté visible por defecto, y luego usa CSS para controlarlo. Aquí te dejo el snippet modificado para el .tpl y el CSS:
En themes/yourchildtheme/templates/catalog/_partials/product-add-to-cart.tpl (añadido al final del archivo o donde creas conveniente):
<div id="sticky-add-to-cart-bar" class="product-add-to-cart-bar-mobile">
<div class="product-quantity-sticky">
<input type="number" name="qty" id="quantity_wanted_sticky" value="{$product.quantity_wanted}" class="input-group form-control" min="{$product.minimal_quantity|intval}" aria-label="{l s='Quantity' d='Shop.Theme.Actions'}">
</div>
<div class="add-sticky">
<button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if}>
<i class="material-icons shopping-cart"></i>
{l s='Añadir al carrito' d='Shop.Theme.Actions'}
</button>
</div>
He quitado las clases d-none d-md-block para que el div sea visible por defecto. Luego, controlamos su visibilidad y posición con CSS.
En themes/yourchildtheme/assets/css/custom.css (o el archivo CSS de tu tema hijo):
#sticky-add-to-cart-bar {
display: none; /* Ocultar por defecto */
}
@media (max-width: 767.98px) { /* Solo para pantallas móviles */
#sticky-add-to-cart-bar {
display: flex; /* Mostrar en móvil */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
Con estos cambios, la barra se ocultará por defecto y solo se hará visible y fija en pantallas móviles (hasta 767.98px de ancho, que es el breakpoint estándar de Bootstrap para móviles). El padding-bottom en el body es crucial para que el contenido no quede oculto bajo la barra fija. Asegúrate de compilar el CSS si usas PrestaShop 1.7 y que el tema hijo esté activo.