Comment Ajouter le Bouton « Afficher le Produit » à Côté du Bouton « Ajouter au Panier » Sur WooCommerce

Comment ajouter le bouton Afficher le produit à côté du bouton Ajouter au panier sur WooCommerce - WP4Muslim

Votre progression

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 :

WooCommerce ajouter au panier - WP4Muslim

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 :

Voir le produit avant ajouter au panier - WP4Muslim

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 :

Voir le produit après ajouter au panier - WP4Muslim

 

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.

Les Clés du E-commerce - WP4Muslim

Formation Gratuite "Les Clés du E-commerce"

J’offre une formation gratuite à toute personne désirant se lancer dans le e-commerce afin d’apprendre les bases pour bien se lancer et trouver le bon produit à vendre inchaa’Allah. Pour en bénéficier, inscris ton prénom et ton email et je t’envoi les accès sur le champs inchaa’Allah.

Partage cet article avec ceux pour qui il pourrait être bénéfique

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

 

Retour haut de page

FORMATION GRATUITE

Plus d'1h30 de cours répartis en 7 modules pour lancer ton site e-commerce sur les chapeaux de roue, même si tu es débutant et que tu n'as aucune connaissance technique...