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

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.