Par défaut, la page boutique et les pages d’archives produits WooCommerce ne proposent que la possibilité d’afficher le bouton “Ajouter au panier” en dessous de l’image et du titre de vos produits. Heureusement, et cela est plus judicieux, nous pouvons ajouter un bouton “afficher le produit” à côté du bouton “ajouter au panier” en réalisant la petite manipulation qui suit.
La configuration par défaut
Voici comment, par défaut, WooCommerce affiche le bouton “ajouter au panier” en dessous des produits d’un site internet :
Il existe plusieurs situations dans lesquelles nous voudrions expliquer à notre visiteur pourquoi ce produit est le produit qu’il recherche. Et pour cela, il a besoin de lire la fiche produit de celui-ci. Nous allons donc créer un bouton “afficher le produit” avant ou après le bouton “ajouter au panier” inchaa’Allah.
Ajouter le bouton “Afficher le produit” avant le bouton “Ajouter au panier”
Pour ce faire, ajouter ce code au fichier “functions.php” de votre thème enfant de votre thème :
/** * Ajouter le bouton "afficher le produit" avant le bouton "ajouter au panier" */ add_action('woocommerce_after_shop_loop_item', 'wpt_custom_button_view_product', 5 ); function wpt_custom_button_view_product() { global $product; // Ignorer pour les produits variables et les produits "groupes" if( $product->is_type('variable') || $product->is_type('grouped') ) return; // Afficher le bouton personnalisé echo '<a style="margin-right:5px" class="button wpt-custom-button-view-product" href="' . esc_attr( $product->get_permalink() ) . '">' . __('Afficher le produit') . '</a>'; }
Voici le résultat que vous aurez inchaa’Allah :
Ajouter le bouton “Afficher le produit” après le bouton “Ajouter au panier”
Pour ce faire, ajouter ce code au fichier “functions.php” de votre thème enfant de votre thème :
/** * Ajouter le bouton "afficher le produit" après le bouton "ajouter au panier" */ add_action('woocommerce_after_shop_loop_item', 'wpt_custom_button_view_product', 10 ); function wpt_custom_button_view_product() { global $product; // Ignorer pour les produits variables et les produits "groupes" if( $product->is_type('variable') || $product->is_type('grouped') ) return; // Afficher le bouton personnalisé echo '<a style="margin-left:5px" class="button wpt-custom-button-view-product" href="' . esc_attr( $product->get_permalink() ) . '">' . __('Afficher le produit') . '</a>'; }
Voici le résultat que vous aurez inchaa’Allah :
Exemples de cas dans lesquels on pourrait personnaliser le texte “Afficher le produit”
Si sur votre site internet vous ne vendez que des parfums par exemple, alors vous pouvez personnaliser le texte comme suit “Afficher le parfum” ou bien “Lire les caractéristiques”.
À vous de voir, en fonction de votre site et vos produits, quelle phrase sera le mieux adaptée inchaa’Allah.
Alternative
Si vous désirez supprimer le bouton “Ajouter au panier” et ne mettre que le bouton “Afficher le produit” sur votre page boutique et vos archives WooCommerce, lisez cet article.
Qu’Allah vous assiste.