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](http://gqxi.cn/wp-content/uploads/2024/12/20241231120755390-image.png)
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 :
- 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. - 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. - 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](http://gqxi.cn/wp-content/uploads/2024/12/20241231114840274-image.png)
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' => 12
C'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](http://gqxi.cn/wp-content/uploads/2024/12/20241231115258448-image.png)
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](http://gqxi.cn/wp-content/uploads/2024/12/20241231115743609-image.png)
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](http://gqxi.cn/wp-content/uploads/2024/12/20241231120706737-image.png)
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 :
- Utilisation de plug-ins
- 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. - 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 :
- Créez unsous-thèmeou utiliser un thème existant.
- Remplacer les fichiers du modèle WooCommerce dans le dossier du thème
add-to-cart.php
. - 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.
Lien vers cet article :http://gqxi.cn/fr/32304L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
Pas de commentaires