Comment changer le design des boutons ajout quantité de la page produit ?

[Sampa-SF]

Bonjour,
Je cherche à transformer le design des boutons d'incrémentation de la partie product-add-to-cart. Dans le fichier .tlp, le code ne corresponds pas au code généré que l'on peut voir dans l'inspecteur de propriété et il semblerait que des classes soient générées en JS. Si je surcharge ou modifie le fichier product-add-to-cart.tpl je n'arrive pas a afficher correctement le bloc. En fait, je cherche juste à faire quelque chose comme ça
en remplaçant les flèches up et down par un + et un  -, en les plaçant de chaque côté du nombre de commande. C'est assez répandu dans les sites prestashop mais je n'y arrive pas 😞 . Est-ce que je suis dans la bonne démarche ? Est-ce qu'il faut modifier ça ailleurs ? Est-ce que quelqu'un aurait une solution ? Merci !

[Remy FRK Corp]

Bonjour

Effectivement avec du .JS, des fichiers .tpl ...il y a moyen de refaire la maçonnerie...

en CSS vous pouvez refaire la peinture sinon.

si vous ètes sur une boutique en 1.7xx essayez ca dans votre custom.css

( je promet rien, peut être un peu d'adaptation comme utiliser des sélecteurs si par exemple vous voulez limiter a une div, à une page etc... (example > div.product-add-to-cart)   (voir de l’optimisation) à faire... j'ai fait ca y'a un moment pour une de mes boutiques, après je n'utilise pas de thème payant je part toujours de classic, bref essayez de jouer avec ca devrait finir par coller à votre besoin )

.bootstrap-touchspin {
    width: 150px;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 50px
}
#quantity_wanted {
    margin: 0 auto;
    float: none
}
.product-quantity .input-group-btn-vertical {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%
}
 .product-quantity #quantity_wanted {
    width: 30%;
    border: none;
    text-align: center;
    height: 2rem
} 
.product-quantity .input-group-btn-vertical .btn {
    max-width: 100%;
    width: 35%;
    background: #f4f4f4;
    margin: 0;
    padding: 0
}
.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-down {
    float: left;
    height: 100%;
    border: none;
    border-right: 2px solid #ddd !important
}
.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
    content: "-"
} 
 .btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up {
    float: right;
    height: 100%;
    border-left: 2px solid #ddd !important;
    border: none
}
 .bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after {
    content: "+"
}
.product-quantity .input-group-btn-vertical .btn i {
    font-size: 1.35rem;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black
}

 

Edited January 29, 2021 by Remy FRK Corp (see edit history)

[Sampa-SF]

Remy bravo !!!
Je pensais pas qu'on pouvait résoudre ça uniquement en CSS !
Merci infiniment !

[Remy FRK Corp]

3 hours ago, Sampa-SF said:

Remy bravo !!!
Je pensais pas qu'on pouvait résoudre ça uniquement en CSS !
Merci infiniment !

de rien, bon courage pour la finalisation de votre boutique.