Comment ajouter un bouton personnalisé Ajouter au panier dans WooCommerce

Publié: 2021-04-22

Ajouter un bouton Ajouter au panier personnalisé dans WooCommerce Vous cherchez un moyen d'ajouter un bouton personnalisé Ajouter au panier sur n'importe quelle page ? Le bouton Ajouter au panier est très important dans n'importe quelle boutique en ligne. Lorsqu'un client clique sur ce bouton, le produit est ajouté au panier.

Cela mène directement aux ventes et aux revenus.

Par conséquent, si vous souhaitez créer une page qui inclura des produits à vendre, il est important d'ajouter un bouton personnalisé Ajouter au panier.

Il est important de noter que WooCommerce vous propose de nombreuses options de personnalisation disponibles à différents niveaux, comme WordPress.

Comment ajouter un bouton personnalisé Ajouter au panier dans WooCommerce

Dans cet article, nous allons personnaliser le bouton Ajouter au panier et l'ajouter à n'importe quelle page de modèle. Il convient de mentionner que vous avez besoin de quelques compétences en codage avant de continuer.

Cependant, si vous n'êtes pas à l'aise avec la manipulation du code, lisez la suite car nous avons fait de notre mieux pour expliquer chaque étape.

Voyons comment vous pouvez y parvenir :

Étapes pour ajouter un bouton Ajouter au panier personnalisé dans WooCommerce

Avant de commencer, voici l'extrait de code qui ajoutera le bouton à n'importe quelle page de modèle.

<?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="<?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="<?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();

Comment ça fonctionne

Ce code est très facile à comprendre.

Le 'post_type' => 'product' est le type de publication personnalisé par défaut de WooCommerce.

'posts_per_page' => 12 définit le nombre maximum de messages pouvant être affichés sur une page.
apply_filters( 'woocommerce_short_description', $post->post_excerpt ) affiche l'URL de la page du panier et les articles dans le panier
esc_attr( $product->get_id() ) obtient l'ID du produit
esc_attr( $product->get_sku() ) obtient le SKU du produit

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui ajoutera un bouton personnalisé d'ajout au panier.
Ajoutez le code suivant au fichier php :

add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');

function njengah_add_to_cart_button_woocommerce() {

return __('Custom add to cart button code', 'woocommerce');

}

Voici le résultat :

Conclusion

À présent, vous devriez pouvoir ajouter un bouton personnalisé d'ajout au panier. Un bouton personnalisé est important car il ajoute de la valeur à l'expérience utilisateur.

Étant donné que nous modifions la page à l'aide d'un code personnalisé, nous vous recommandons de créer un thème enfant. Cela garantira que vos modifications ne seront pas perdues lors d'une mise à jour.

Comment ajouter un bouton personnalisé Ajouter au panier dans WooCommerce

Comment ajouter un bouton personnalisé Ajouter au panier dans WooCommerce

Étapes pour ajouter un bouton Ajouter au panier personnalisé dans WooCommerce

Comment ça fonctionne

Conclusion

Articles similaires