Comment créer des boutons d’ajout au panier avec une quantité prédéfinie sous WooCommerce ?

J’ai sérieusement passé plus de temps que d’habitude à essayer d’écrire un titre décent. Pourtant, je ne suis pas sûr à 100% d’avoir bien expliqué le problème – voici donc un peu plus de contexte.

Le formulaire d’ajout au panier de la page produit unique de WooCommerce comporte une entrée de quantité et un bouton d’ajout au panier. C’est très simple. Les clients peuvent définir une quantité et ajouter le produit actuel au panier.

Imaginons maintenant que vous souhaitiez modifier cette expérience en fonction des besoins de votre entreprise, et qu’au lieu de la saisie de la quantité et du bouton d’ajout au panier, vous souhaitiez afficher 3 boutons : « Ajouter 1 au panier », « Ajouter 2 au panier », « Ajouter 3 au panier ».

Et si vous pouvez combiner cela avec une fonctionnalité de remise sur quantité, vous pouvez même modifier le message, par exemple : « Ajouter 1 au panier », « Ajouter 2 au panier et économiser X € », « Ajouter 3 au panier et économiser Y € »…

Voyons donc comment masquer le formulaire d’ajout au panier par défaut et afficher à la place des boutons qui permettent au client d’ajouter au panier une quantité de produit prédéfinie (pour les produits simples). Comme le montre cette capture d’écran :

Plus de formulaire d’ajout au panier – à la place, nous affichons des boutons de sélection de quantité prédéfinis, de sorte que nous forçons le client à choisir l’un des 3. Cela fonctionne encore mieux si vous avez des remises en gros !
add_action( 'woocommerce_before_single_product', 'wootimeo_123_quantity_selectors', 1 );
 
function wootimeo_123_quantity_selectors() {
   global $product;
   add_action( 'woocommerce_single_product_summary', 'wootimeo_quantity_selectors', 17 );
   add_action( 'woocommerce_single_product_summary', 'wootimeo_quantity_selectors_css', 18 );
   remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
 
function wootimeo_quantity_selectors() {
   global $product;
   ?>
   <div class="quantities-wrapper">
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=1">Ajouter 1 <?php echo $product->get_name(); ?> au panier</a>
        </div>
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=2">Ajouter 2 <?php echo $product->get_name(); ?> au panier</a>
        </div>
        <div class="quantity-wrapper">
            <a class="single_add_to_cart_button button alt qtyselector" href="/?add-to-cart=<?php echo $product->get_id(); ?>&quantity=3">Ajouter 3 <?php echo $product->get_name(); ?> au panier</a>
        </div>
    </div>
   <?php
}
 
function wootimeo_quantity_selectors_css() {
   ?>
   <style>
       a.single_add_to_cart_button.qtyselector { display: block; border-radius: 8px; text-transform: uppercase; margin-bottom: 1em; text-align: center; }
   </style>
   <?php
}Langage du code : JavaScript (javascript)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *