Comment ajouter un bouton "Ajouter au panier" personnalisé dans WooCommerce

WooCommerce s."Ajouter au panierLe bouton " permet aux clients d'acheter facilement des articles sur votre site marchand. Lorsqu'un client clique sur le bouton "Bouton "Ajouter au panierL'article est alors ajouté à leur panier et ils peuvent poursuivre leurs achats ou passer directement à la caisse.

Ce bouton simplifie le processus d'achat pour les clients, en leur permettant d'ajouter plus facilement des articles à leur panier et de terminer leur achat. De nombreux sites web peuvent avoir besoin de le personnaliser pour améliorer l'expérience utilisateur globale des clients.

Image [1] - Comment personnaliser le bouton Ajouter au panier de WooCommerce | Guide pratique

Avantages de la personnalisation du bouton "Ajouter au panier

Il y a de nombreux avantages à utiliser un bouton "Ajouter au panier" personnalisé dans WooCommerce, en voici les trois principaux :

  1. Esthétique améliorée
    Les boutons personnalisés peuvent être adaptés au style de la marque et à la palette de couleurs afin d'améliorer l'esthétique générale du site web. Cela crée un effet visuel uniforme et professionnel sur le site d'achat.
  2. Fonctionnalité améliorée
    Les boutons personnalisés peuvent offrir des fonctionnalités plus étendues, comme l'affichage d'informations supplémentaires sur un article, telles que le prix, l'état des stocks ou les remises et promotions applicables.
  3. Augmenter le taux de conversion
    En améliorant "Ajouter au panier"L'esthétique et la fonctionnalité des boutons sont efficaces pour augmenter les conversions, ce qui accro?t le revenu global et la rentabilité.

Afficher le bouton "Ajouter au panier" dans le modèle

L'extrait de code suivant affiche sur toute page de modèle WooCommerce sélectionnée la mention "Bouton "Ajouter au panier.

<?php

/* Template  Name: Customize Add To Cart*/

get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <ul class="products">
            <?php
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 12,
            );
            $loop = new WP_Query( $args );
            if ($loop->have_posts()) {
                while ($loop->have_posts()) : $loop->the_post();
                    ?>
                    <div id="product-image1">
                        <a href="/fr/</?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                           title="<?php echo esc_attr( $product->get_title() ); ?>">
                            <?php echo $product->get_image(); ?>
                        </a>
                    </div>
                    <div id="product-description-container">
                        <ul>
                            <a href="/fr/</?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
                               title="<?php echo esc_attr( $product->get_title() ); ?>">
                                <li><h4><?php echo $product->get_title(); ?></h4></li>
                            </a>
                            <li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
                            <li><h2><?php echo $product->get_price_html(); ?> </h2></li>
                            <?php
                            echo apply_filters(
                                'woocommerce_loop_add_to_cart_link',
                                sprintf(
                                    '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
                                    esc_url( $product->add_to_cart_url() ),
                                    esc_attr( $product->get_id() ),
                                    esc_attr( $product->get_sku() ),
                                    $product->is_purchasable() ? 'add_to_cart_button' : '',
                                    esc_attr( $product->product_type ),
                                    esc_html( $product->add_to_cart_text() )
                                ),
                                $product
                            );?>
                        </ul>
                    </div>                     <?php endwhile;
            } else {
                echo __( ' o products found' );
            }
            wp_reset_postdata();
            ?>
        </ul>
        <!--/.products-->         </main>
    <!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();

La capture d'écran suivante montre l'extrait de code en action.

Image [2] - Comment personnaliser le bouton Ajouter au panier de WooCommerce | Guide pratique

Analyse des extraits de code

L'extrait de code ci-dessus est long, mais relativement simple à comprendre. Voici une brève description des parties importantes du code qui vous aidera à le comprendre et à le modifier si nécessaire :

  • 'post_type' => 'product': Il s'agit du type d'article personnalisé par défaut de WooCommerce pour l'affichage des produits.
  • 'posts_per_page' => 12C'est le nombre maximum de produits à afficher sur chaque page, actuellement fixé à 12, mais qui peut être modifié en fonction des besoins du site web.
  • apply_filters( 'woocommerce_short_description', $post->post_excerpt )Description : Affiche une description courte et une description détaillée du produit.
  • esc_url( $product->add_to_cart_url() ): : En collaboration avec l'Agence européenne pour la sécurité et la santé au travail (ESA), l écho fonctionne ensemble pour afficher l'URL de la page du panier d'achat et les articles contenus dans le panier, le cas échéant.
  • esc_attr( $product->get_id() ): Permet d'obtenir l'identifiant du produit.
  • esc_attr( $product->get_sku() )SKU (stock keeping unit) : Obtient le SKU (stock keeping unit) de l'article.
  • esc_html( $product->add_to_cart_text() ): Obtenir le contenu textuel du bouton du panier d'achat.

Ajouter du texte au-dessus du bouton "Ajouter au panier".

Une autre meilleure possibilité de personnalisation consiste à personnaliser la rubrique "Bouton "Ajouter au panierpour ajouter une ligne de texte au-dessus de l'ic?ne L'extrait de code suivant ajoute une ligne de texte au-dessus de l'ic?ne écho met en ?uvre cette fonction :

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_woocommerce') ;
function custom_add_to_cart_button_woocommerce() {
return __('WooCommerce custom add to cart button code', 'woocommerce') ; }
}

Le code ci-dessus affiche une ligne de texte au-dessus du bouton. L'effet réel est illustré ci-dessous :

Image [3] - Comment personnaliser le bouton Ajouter au panier de WooCommerce | Guide pratique

Modifier le texte du bouton "Ajouter au panier

Le dernier élément de personnalisation consiste à modifier le texte affiché sur le bouton. Cela peut être fait avec le simple extrait de code suivant :

add_filter('woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_woocommerce') ;
function custom_add_to_cart_button_woocommerce() {
return __('WooCommerce custom add to cart button code', 'woocommerce') ; }
}

L'étiquette du bouton devient custom_add_to_cart_button_woocommerce() dans une fonction retour Le texte spécifié par la déclaration.

Image [4] - Comment personnaliser le bouton Ajouter au panier de WooCommerce | Guide pratique

résumés

Personnalisation de WooCommerce "Ajouter au panier"Les boutons sont une fonction utile qui permet aux administrateurs de personnaliser l'apparence et la fonctionnalité des pages de produits. Cela permet non seulement d'améliorer l'expérience d'achat du client, mais aussi d'avoir un impact positif sur le succès global du site d'achat, car les boutons jouent un r?le très important dans le processus d'achat. Si vous avez des questions, vous pouvez les laisser dans la section des commentaires.

Image [5] - Comment personnaliser le bouton Ajouter au panier de WooCommerce | Guide pratique

Questions fréquemment posées

Q : Comment puis-je personnaliser le bouton "Ajouter au panier" de WooCommerce ?
Réponse :
La personnalisation du bouton Ajouter au panier dans WooCommerce peut se faire de trois manières :

  1. Utilisation de plug-ins
  2. Remplacer le thème dans le fichier woocommerce/templates/single-product/add-to-cart/simple.php pour personnaliser l'apparence et le comportement des boutons.
  3. utiliser woocommerce_single_product_summary Les crochets tels que la modification du texte ou du style du bouton, ainsi que la modification de l'apparence du bouton par le biais de CSS.

Q : Comment changer le HTML du bouton "Ajouter au panier" dans WooCommerce ?
Réponse :
Pour modifier le code HTML du bouton "Ajouter au panier", procédez comme suit :

  1. Créez unsous-thèmeou utiliser un thème existant.
  2. Remplacer les fichiers du modèle WooCommerce dans le dossier du thème add-to-cart.php.
  3. Modifiez la structure HTML de ce fichier en fonction de vos besoins.

Q : Comment ajouter des champs personnalisés à mon panier d'achat WooCommerce ?
Réponse :
Pour ajouter des champs personnalisés à votre panier WooCommerce, vous pouvez utiliser l'option woocommerce_after_cart_item_name des crochets. Par exemple, vous pouvez ajouter une zone de texte, une zone de sélection ou une case à cocher. Voici un exemple d'ajout d'un champ personnalisé :

Q : Comment puis-je obtenir le bouton "Ajouter au panier" ?
Réponse :
Pour obtenir le bouton "Ajouter au panier" dans WooCommerce, vous pouvez utiliser la fonction WooCommerce woocommerce_template_single_add_to_cart()Cette fonction permet d'afficher le bouton sur la page du produit.


Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Service clientèle WeChat
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨詢:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
? Déclaration de reproduction
Cet article a été écrit par Banner1
LA FIN
Si vous l'aimez, soutenez-le.
félicitations13 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires