Plus de 100 trucs, astuces et extraits Ultimate WooCommerce Hide Guide

Publié: 2021-04-24

Guide de masquage WooCommerce WooCommerce est soutenu par plus de 5 millions d'installations actives dans la communauté WordPress, et ce nombre continue de croître chaque jour. Avec toutes les données utilisateur, WooCommerce peut obtenir suffisamment de commentaires pour s'améliorer de manière significative par rapport à ce que veulent leurs utilisateurs.

Il ne fait aucun doute que WooCommerce ne peut pas apporter de modifications sur un coup de tête. En effet, vous devez prendre en compte de nombreux facteurs, en particulier si vous avez un site compliqué. Cela implique que de petits changements peuvent entraîner une différence significative dans ce que vous voyez sur le front-end, et au pire, vous pouvez même créer une expérience client négative significative. C'est pourquoi j'ai décidé de créer le Ultimate WooCommerce Hide Guide .

Guide de masquage ultime de WooCommerce

Dans cet article, vous apprendrez à masquer certains éléments de votre boutique WooCommerce. Il est important de noter que la flexibilité offerte par WooCommerce est sous-estimée. Cependant, vous devez avoir les compétences et l'expérience nécessaires pour faire beaucoup de ce que vous voulez faire avec votre site WordPress/WooCommerce. Ce guide ultime vous assurera de pouvoir masquer n'importe quel élément sans casser votre site.

Avant de commencer, assurez-vous que vous avez toujours des sauvegardes prêtes, car la mise à jour et l'ajout de fonctionnalités à votre site WordPress nécessitent beaucoup d'attention. Ceci est juste un avertissement juste. Le plus gros inconvénient est que toute modification apportée au thème de cette manière sera perdue une fois que le développeur aura mis à jour le thème.

La meilleure façon de surmonter cela est d'utiliser un thème enfant. Un thème enfant vous permet d'apporter un nombre illimité de modifications à un site Web sans toucher aux fichiers de thème d'origine. Un thème enfant dépend entièrement de son parent pour fonctionner. Sans son thème parent présent, il ne fera rien et ne peut même pas être activé. Vous pouvez en savoir plus sur la création de thèmes enfants ici.

Cela dit, voyons comment vous pouvez masquer différents éléments dans les pages de votre boutique WooCommerce, telles que la page Boutique, la page Produit unique, la page Mon compte, la page d'accueil, la page de paiement et la page Panier.

WooCommerce Masquer la page de la boutique

Dans cette section, vous apprendrez à masquer différents éléments sur la page Boutique. La page de la boutique est l'endroit où vous affichez vos produits, c'est donc l'une des pages les plus importantes de votre boutique. C'est pourquoi il doit avoir un design attrayant et convivial.

Cependant, la page de la boutique est un composant préconçu de votre boutique et n'a pas d'outil intégré pour changer son apparence. C'est pourquoi nous utiliserons des extraits de code personnalisés pour masquer les éléments.

Visibilité des produits WooCommerce

Il existe des scénarios dans lesquels vous devrez peut-être masquer un produit de votre boutique WooCommerce. Certains d'entre eux incluent:

  1. Si les produits ne sont disponibles que pour certains clients, les produits doivent être cachés au public.
  2. Si les produits ne sont plus vendus mais peuvent être revendus à l'avenir.
  3. Si vous proposez des produits basés sur des services, ils doivent être ajoutés manuellement à un devis de représentant commercial.

Il existe de nombreux autres scénarios, mais ceux-ci se démarquent. Pour commencer, je vais vous expliquer comment masquer un seul produit WooCommerce du front-end à l'aide des fonctionnalités intégrées de WooCommerce et WordPress. Je partagerai également comment vous pouvez masquer les produits cachés du panier, du paiement, de la commande et des e-mails WooCommerce. Vous pouvez en savoir plus sur la visibilité des produits ici.

Étapes pour masquer un produit WooCommerce (produit unique)

  1. Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
  2. Dans le menu Tableau de bord, cliquez sur Produits et sélectionnez le produit que vous souhaitez masquer du site. Cliquez sur le titre du produit et accédez à la page d'édition, comme indiqué ci-dessous :
  3. Sur le côté droit, vous verrez la méta-boîte "Publier" familière. Il vous permet de définir des options de publication et de publier vos articles, produits ou pages. Il y a une option appelée "Visibilité du catalogue".
  4. Cliquez sur le lien Modifier à côté. Il vous sera présenté une liste d'options pour la visibilité du produit sur le front-end. cliquez sur le titre du produit
  5. Sélectionnez l'option Masqué définir un produit caché
  6. Cliquez sur le bouton Mettre à jour et le produit disparaîtra complètement du front-end de votre boutique WooCommerce.

Il est important de noter que les produits masqués apparaissent sur le panier s'ils sont ajoutés au panier "par programmation".

Étapes pour masquer les produits cachés du panier, du paiement, de la commande et des e-mails WooCommerce

Si vous souhaitez masquer les produits cachés du panier WooCommerce, du paiement, de la commande et des e-mails, vous devez envisager d'ajouter le code suivant dans le fichier functions.php de votre thème enfant.

 /**

  * Masquer les produits cachés du panier, de la caisse, de la commande - WooCommerce

   */

   add_filter( 'woocommerce_cart_item_visible', 'njengah_hide_hidden_product_from_cart' , 10, 3 );

add_filter( 'woocommerce_widget_cart_item_visible', 'njengah_hide_hidden_product_from_cart', 10, 3 );
add_filter( 'woocommerce_checkout_cart_item_visible', 'njengah_hide_hidden_product_from_cart', 10, 3 );

add_filter( 'woocommerce_order_item_visible', 'njengah_hide_hidden_product_from_order_woo333', 10, 2 );
   function njengah_hide_hidden_product_from_cart( $visible, $cart_item, $cart_item_key ) {
    $product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

    if ( $product->get_catalog_visibility() == 'caché' ) {
        $visible = faux ;
     }
     retourne $visible ;

 }

   function njengah_hide_hidden_product_from_order_woo333( $visible, $order_item ) {

    $product = $order_item->get_product();

    if ( $product->get_catalog_visibility() == 'caché' ) {

         $visible = faux ;
     }
     retourne $visible ;
 }

N'oubliez pas d'enregistrer les modifications que vous apportez.

WooCommerce Masquer la catégorie vide

WooCommerce vous permet de trier les produits en différentes catégories et balises. Cela signifie que même les catégories vides sont affichées sur la boutique et la page d'accueil. Vous pouvez masquer les catégories vides afin que les utilisateurs ne puissent pas les trouver.

Cependant, WooCommerce n'a pas d'option intégrée pour masquer les catégories de la page d'accueil ou des archives. Il affichera la catégorie même lorsqu'elle est vide. Masquer une catégorie vide est une tâche facile si vous êtes un développeur WordPress expérimenté.

Nous allons utiliser un extrait de code PHP pour masquer les catégories vides. Cependant, vous pouvez également utiliser CSS, mais cela recevra des points négatifs de la part des moteurs de recherche, ce qui nuira à votre référencement. Vous pouvez en savoir plus sur le masquage des catégories vides ici.

Étapes pour masquer les catégories vides du widget de catégorie dans WooCommerce

Voici les étapes que vous devez suivre :

  1. Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
  2. Tout d'abord, nous devons créer des catégories et attribuer des produits. Pour cela, cliquez sur Produits > Catégories. Vous pouvez attribuer des catégories à partir d'ici. Vous avez vu que j'ai attribué cinq produits à la catégorie des pièces automobiles et quatre à Njengah Tech à partir de la capture d'écran ci-dessous. La première catégorie est vide. catégories de produits
  3. Alternativement, vous pouvez également attribuer des catégories aux produits à partir de l'écran d'ajout/modification de produit, comme indiqué ci-dessous : attribuer des catégories
  4. L'étape suivante consiste à ajouter le widget de catégorie à la barre latérale ou à toute autre zone de votre boutique WooCommerce. Pour ce faire, accédez à Apparence > Widgets, faites glisser le widget des catégories de produits WooCommerce et déposez-le dans la zone de la barre latérale principale, comme indiqué ci-dessous : ajouter un widget
  5. Si vous actualisez le frontal, vous verrez toutes les catégories répertoriées : barre latérale des catégories de produits
  6. Pour masquer ou supprimer les catégories vides répertoriées ici, ajoutez les lignes de code suivantes à la fin du fichier functions.php de votre thème.
 fonction woo_hide_product_categories_widget( $list_args ){

            $list_args[ 'hide_empty' ] = 1;

            retourne $list_args ;

}

add_filter( 'woocommerce_product_categories_widget_args', 'woo_hide_product_categories_widget' )
  1. Après avoir placé le code ci-dessus, n'oubliez pas de sauvegarder le fichier. Accédez au front-end et actualisez la page. Vous remarquerez que la catégorie vide a été supprimée de la liste. catégories vides masquées

Étapes pour masquer le prix et l'ajouter au panier pour les utilisateurs déconnectés

L'image ci-dessous montre comment les prix et le bouton Ajouter au panier sont affichés par défaut, même pour les utilisateurs déconnectés : Prix ​​WooCommerce et bouton Ajouter au panier

Si vous souhaitez masquer les prix et le bouton Ajouter au panier pour les utilisateurs déconnectés, vous devriez envisager d'ajouter le code suivant dans le fichier functions.php de votre thème enfant :

 /**

  * Masquer le prix et ajouter au panier pour les utilisateurs déconnectés

 */

 add_action( 'init', 'njengah_hide_price_add_cart_not_logged_in' );

 function njengah_hide_price_add_cart_not_logged_in() { 

    si ( ! is_user_logged_in() ) {    

       remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

       remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

       remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

       remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); 

       add_action( 'woocommerce_single_product_summary', 'njengah_print_login_to_see', 31 );

       add_action( 'woocommerce_after_shop_loop_item', 'njengah_print_login_to_see', 11 );

    }

 }

 function njengah_print_login_to_see() {

    echo '<a href="' . get_permalink(wc_get_page_id('myaccount')) . '">' . __('Connectez-vous pour voir les prix', 'theme_name') . '</a>' ;

 }

N'oubliez pas d'enregistrer les modifications.

Ce sera le résultat sur le front-end : WooCommerce masque les prix et ajoute un bouton au panier pour les utilisateurs déconnectés

Vous pouvez supprimer le chiffre des champs de prix, ce qui signifie que le produit n'aura plus de prix et, par conséquent, le bouton Ajouter au panier.

Alternativement, vous pouvez écrire un filer. Ce filtre détectera l'identifiant du produit cible et renverra un faux. Cela supprimera le bouton Ajouter au panier.

 /**

* Masquer le bouton pour le produit avec ID = 10 ET pour les produits variables

 */

 add_filter('woocommerce_loop_add_to_cart_link', function( $add_to_cart_html, $product) {

 if( $product->get_id() == 604 || $product->is_type( 'variable' ) ) {

 retourner '';

 }

 retourner $add_to_cart_html ;

 }, 10, 2 );

N'oubliez pas d'ajouter le bon ID de produit. Voici le résultat : supprimer le bouton Ajouter au panier pour des produits spécifiques

WooCommerce Masquer les produits en rupture de stock

WooCommerce fournit aux utilisateurs un excellent système de gestion des stocks qui aide à créer un site Web de commerce électronique dans les plus brefs délais. L'une des exigences les plus importantes pour la gestion des stocks dans le commerce électronique est la possibilité de masquer les produits en rupture de stock. Heureusement, WooCommerce est livré avec une solution prête à l'emploi pour masquer les produits en rupture de stock dans les paramètres. Vous pouvez en savoir plus sur l'ajout de produits ici.

Étapes pour masquer les produits en rupture de stock dans un seul produit

  1. Accédez au sous-menu WooCommerce -> Paramètres dans le tableau de bord WordPress.
  2. Cliquez sur le sous-onglet Produits > Inventaire.
  3. Cochez l'option Out Of Stock Visibility qui masque les produits en rupture de stock.

Accédez au menu du tableau de bord WooCommerce et utilisez l'onglet Produits, cliquez sur le sous-onglet Inventaire pour voir l'option permettant de masquer les produits en rupture de stock, comme indiqué dans l'image ci-dessous :

Cochez cette option et enregistrez les paramètres, et vous réussirez à masquer les produits en rupture de stock du catalogue.

Alternativement, vous pouvez ajouter un script PHP personnalisé dans le fichier functions.php. Vous pouvez ajouter un crochet d'action qui s'accroche à pre_get_posts , et la fonction de rappel doit avoir la logique pour masquer le produit en rupture de stock à l'aide d'une requête de taxonomie. Voici un exemple d'extrait de code qui fonctionne parfaitement pour masquer les produits en rupture de stock :

 <?php

add_action( 'pre_get_posts', 'njengah_hide_out_of_stock_products' );

function njengah_hide_out_of_stock_products( $query ) {

if ( ! $query->is_main_query() || is_admin() ) {

retourner;

}

if ( $outofstock_term = get_term_by( 'name', 'outofstock', 'product_visibility' ) ) {

$tax_query = (tableau) $query->get('tax_query');

$tax_query[] = tableau(

'taxonomy' => 'product_visibility',

'champ' => 'term_taxonomy_id',

'termes' => array( $outofstock_term->term_taxonomy_id ),

'opérateur' => 'PAS DANS'

);

$query->set( 'tax_query', $tax_query );

}

remove_action( 'pre_get_posts', 'njengah_hide_out_of_stock_products' );

}

N'oubliez pas d'enregistrer les modifications.

WooCommerce Masquer tous les produits de la page de la boutique

Si vous exploitez quelque chose comme un magasin B2B/vente en gros ou réservé aux membres et que vous ne voulez pas que tous les produits soient accessibles au public, cette solution vous aidera. Cette solution conviviale pour les développeurs implique l'utilisation d'un script PHP personnalisé.

WooCommerce a une solution intégrée pour masquer des produits particuliers sur la page de la boutique. Vous pouvez en savoir plus sur cette solution ici.

Étapes pour masquer tous les produits Page de la boutique WooCommerce

Voici les étapes que vous devez suivre :

  1. Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
  2. Dans le menu Tableau de bord, cliquez sur Menu Apparence > Menu Éditeur de thème. Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème pour ajouter la fonction qui ajoutera la fonction permettant de masquer tous les produits sur la page de la boutique WooCommerce.
  3. Ajoutez le code suivant au fichier functions.php :
 /**

 * @snippet Supprimer la boucle de produit @ Boutique WooCommerce

*/

add_action( 'pre_get_posts', 'njengah_remove_products_from_shop_page' );

 function njengah_remove_products_from_shop_page( $q ) {

   if ( ! $q->is_main_query() ) return ;

   if ( ! $q->is_post_type_archive() ) return ;

   si ( ! est_admin() && est_boutique() ) {

      $q->set( 'post__in', array(0) );

   }

   remove_action( 'pre_get_posts', 'njengah_remove_products_from_shop_page' );

 }
  1. Ce sera le résultat : Suppression de tous les produits dans WooCommerce
  2. Pour masquer le 'Aucun produit correspondant à votre sélection', ajoutez cette ligne de code à la fin du fichier functions.php.
 /**

* @snippet Supprimer "Aucun produit correspondant à votre sélection n'a été trouvé" @ WooCommerce Loop Pages

*/

remove_action( 'woocommerce_no_products_found', 'wc_no_products_found' );
  1. Ce sera le résultat : supprimer le aucun produit n'a été trouvé correspondant à votre sélection

Dans le code ci-dessus, l'action ' pre_get_posts ', ' njengah_remove_products_from_shop_page ' qui ciblera la page boutique. Pour masquer les produits, j'ai créé une fonction qui supprimera les produits, aidée par une série de boucles et une action de suppression.

WooCommerce Masquer les zéros de fin

WooCommerce, par défaut, affiche les prix avec des zéros à la fin. De plus, WooCommerce n'a pas la possibilité de masquer ou de désactiver cette fonctionnalité. Si vous cherchez un moyen de masquer les zéros de fin dans votre boutique WooCommerce, vous êtes au bon endroit. Dans cette section, nous utiliserons un script PHP personnalisé que j'ai préparé à cet effet. Vous pouvez également apprendre comment afficher les zéros à la fin ici si votre thème ne le prend pas en charge.

Il convient de mentionner que cette solution supprimera les zéros de fin de l'ensemble de votre magasin.

Pour masquer les zéros de fin dans votre page WooCommerce Shop, ajoutez le code suivant au bas de votre fichier functions.php :

 // Masque les zéros à la fin des prix.

add_filter( 'woocommerce_price_trim_zeros', 'njengah_hide_trailing_zeros', 10, 1 );

function njengah_hide_trailing_zeros( $trim ) {

retourner vrai ;

}

N'oubliez pas de cliquer sur le bouton Enregistrer les modifications en bas de l'écran de l'éditeur de texte.

Vous avez maintenant ajouté avec succès l'extrait de code requis pour masquer les zéros de fin. Ce sera le résultat sur le front-end :

Comment masquer le nombre de produits WooCommerce

Il existe de nombreuses raisons pour lesquelles vous souhaiterez peut-être supprimer le nombre de produits dans les catégories ou sous-catégories. Si votre thème n'affiche pas bien le nombre de produits, je vous recommande fortement de le masquer.

Cet article explique comment masquer complètement le nombre de catégories à l'aide d'un script PHP personnalisé. De plus, vous apprendrez à le masquer à l'aide d'un extrait de code CSS que je partagerai.

Vous pouvez également utiliser CSS pour masquer le nombre de produits WooCommerce. Vous pouvez apprendre à ajouter l'extrait de code CSS ici.

Cependant, il est important de noter que ces extraits de code doivent être ajoutés au fichier functions.php de votre thème enfant. Vous pouvez également utiliser un plugin de personnalisation de site afin de ne pas perdre vos modifications lorsque vous mettez à jour votre thème WordPress.

Par défaut, voici comment WooCommerce affiche le nombre de produits sur la page Boutique :

Si vous souhaitez masquer le nombre de produits sur la page de la boutique WooCommerce, vous devez envisager d'ajouter le code suivant dans le fichier functions.php de votre thème enfant :

 /*

 *

 * Supprime le nombre de produits après le nom des catégories

 *

 */

add_filter( 'woocommerce_subcategory_count_html', 'njengah_remove_category_products_count' );

function njengah_remove_category_products_count() {

  retourner;

}

N'oubliez pas d'enregistrer les modifications. Ce sera le résultat sur le front-end :

Il convient de mentionner que WooCommerce affiche également le nombre de produits dans les sous-catégories. Vous pouvez masquer le nombre de produits en ajoutant le code suivant au bas du fichier functions.php :

add_filter( 'woocommerce_subcategory_count_html', '__return_false' );

Ce code supprimera le nombre de produits dans les sous-catégories.

WooCommerce Masquer les prix des produits par rôle d'utilisateur

Vous voudrez peut-être masquer les prix des produits en fonction de certains rôles d'utilisateur dans votre boutique WooCommerce en tant que stratégie marketing.

Cependant, WooCommerce, par défaut, n'a pas la possibilité de masquer les prix. Cet article se concentre sur la tarification basée sur le rôle de l'utilisateur, ou son absence (utilisateurs invités).

L'objectif principal est d'encourager les utilisateurs à s'inscrire pour voir les prix. Si vous souhaitez ajouter cette fonctionnalité, tenez-vous en à la fin. La meilleure partie est que je vais vous donner un guide étape par étape sur la façon de masquer les prix. Cependant, vous devez avoir quelques connaissances techniques.

Vous pouvez aller plus loin et masquer les prix et les totaux du panier et de la caisse pour les utilisateurs invités. Vous pouvez apprendre à le faire ici.

Étapes pour masquer les prix pour les utilisateurs invités

Si vous souhaitez masquer les prix pour les utilisateurs invités dans votre boutique WooCommerce, vous devriez envisager d'ajouter le code suivant au fichier functions.php de votre thème :

 /**

  * Masquer le prix du produit en fonction du rôle de l'utilisateur.

  */

 function njengah_hide_prices_guests( $prix ) {

             si ( ! is_user_logged_in() ) {

                         retourner ''; // Renvoie une chaîne vide pour aucun affichage de prix.

            }

             retourner $prix ;

}

add_filter( 'woocommerce_get_price_html', 'njengah_hide_prices_guests' ); // Masquer le prix du produit

N'oubliez pas d'enregistrer les modifications. Voici le résultat sur le front-end : cacher des produits aux invités

WooCommerce Masquer la catégorie

Dans cette section, je vais vous montrer comment empêcher l'affichage des catégories WooCommerce sur la page de la boutique. WooCommerce vous permet de décider comment vous souhaitez que vos produits soient affichés sur la page Boutique. Vous pouvez apprendre à afficher les catégories ici.

Pour diverses raisons, vous ne souhaitez peut-être pas afficher certaines catégories sur la page d'accueil. Dans cet exemple, je supprimerai la catégorie "Accessoires". Nous pouvons le faire soit en donnant le nom correct à cette catégorie, soit en la cachant de la liste.

Voici comment les catégories sont affichées sur le front-end : Afficher les catégories

Si vous souhaitez masquer une catégorie, pensez à ajouter le code suivant en bas du fichier functions.php :

 /**

  * Afficher uniquement les produits de la catégorie sélectionnée.

  */

 function get_subcategory_terms( $terms, $taxonomies, $args ) {

             $new_terms = array();

             $hide_category = array( 19 ); // Ids de la catégorie que vous ne souhaitez pas afficher sur la page de la boutique

                          // si une catégorie de produit et sur la page boutique

             if ( in_array( 'product_cat', $taxonomies ) && !is_admin() && is_shop() ) {

                 foreach ( $terms as $key => $term ) {

                         if ( ! in_array( $term->term_id, $hide_category ) ) {

                                     $nouveaux_termes[] = $terme ;

                         }

                 }

                 $terms = $new_terms ;

             }

   retourner $termes ;

}

add_filter( 'get_terms', 'get_subcategory_terms', 10, 3 );

Pour voir le résultat, actualisez la page. supprimer la catégorie

Dans la capture d'écran ci-dessus, vous pouvez voir que le code a supprimé l'ID de catégorie "Accessoires" = 19. N'oubliez pas d'ajouter le bon ID pour que le code puisse fonctionner.

Comment masquer des produits sans prix dans WooCommerce

Si vous souhaitez masquer des produits sans prix, vous pouvez rapidement implémenter cet extrait dans votre functions.php ou votre code de plugin, et tous les produits sans prix seront masqués de la vue client. Ce n'est pas compliqué. Tout ce que vous avez à faire est d'ajouter le code dans les fonctions du thème ou les fichiers du plugin.

Tout d'abord, vous devez créer une méta-requête pour tous les produits qui obtiendront les produits, et dans la méta-requête, vous chercherez la valeur vide de la clé - prix, et si la valeur est vide, vous pouvez réinitialiser la méta requete.

Cette méta-requête doit s'accrocher à cette action woocommerce_product_query, et la fonction de rappel contiendra la logique pour afficher tous les produits à l'exception de ceux sans prix. Vous pouvez en savoir plus sur les requêtes Meta et les arguments acceptés ici.

Voici le code :

 add_action( 'woocommerce_product_query', 'njengah_hide_products_without_price' );

 fonction njengah_hide_products_without_price( $q ){

   $meta_query = $q->get( 'meta_query' );

   $meta_query[] = tableau(

      'clé' => '_prix',

      'valeur' ​​=> '',

      'comparer' => '!='

   );

   $q->set( 'meta_query', $meta_query );

}

Ce code doit être ajouté au functions.php, et vous réussirez à masquer tous les produits sans le prix. Comme vous pouvez le voir sur la fonction de rappel de code, la valeur de la méta-requête est définie sur une chaîne vide " " c'est la base des produits WooCommerce pour masquer les produits sans logique de prix.

Masquer le badge de vente WooCommerce

Le badge WooCommerce en vente est une étiquette affichée sur la page de produit unique, les pages d'archives de produits, les ventes incitatives, les ventes croisées et les produits connexes. Idéalement, ce bouton est conçu pour informer les visiteurs de votre boutique que certains produits sont en promotion.

Vous pouvez configurer le badge WooCommerce en vente pour chaque produit en ajoutant le prix de vente et le prix régulier pour le même produit. Dans cet article, je veux illustrer comment vous pouvez modifier le badge de vente et comment vous pouvez le supprimer ou le masquer complètement.

Le design d'un badge en solde peut varier d'un site WooCommerce à l'autre, selon le thème de la boutique. Le thème WooCommerce par défaut - Storefront est livré avec un badge de vente standard par défaut sans aucune conception, comme indiqué sur l'image ci-dessous : badge woocommerce en vente

Si vous souhaitez supprimer le badge de vente de votre boutique WooCommerce, vous devez envisager d'ajouter le code suivant au fichier functions.php de votre thème enfant :

 // Ajouter un filtre pour supprimer le sale_badge

  add_filter( 'woocommerce_sale_flash', 'njengah_remove_on_sale_badge' );

  function njengah_remove_on_sale_badge( $sale_badge ){

    retourner '';

 }

Ce code est un filtre qui recherche le badge de vente sur la page et le remplace par une chaîne vide dans l'instruction de retour de la fonction de rappel. Voici le résultat :

cacher le badge woocommerce en vente | supprimer le badge woocommerce en vente

Vous pouvez également apprendre à masquer le badge de vente à l'aide de CSS et modifier le badge ici.

WooCommerce Masquer la quantité en stock

Vous pouvez masquer les messages de stock sur vos produits en apportant des modifications liées au code au thème que vous utilisez pour votre boutique WooCommerce. Je vous recommande fortement de faire une sauvegarde complète de votre boutique WooCommerce. Cela peut vous aider à revenir à l'état actuel des choses si quelque chose ne va pas avec vos modifications de code. Alternativement, vous pouvez utiliser un thème enfant.

WooCommerce est équipé d'une capacité de contrôle des stocks décente. Vous pouvez activer cette option dans votre boutique en utilisant l'onglet "Inventaire" de l'écran d'édition du produit dans la zone d'administration de WordPress. Vous pouvez voir comment vous pouvez afficher la quantité en stock ici.

Par défaut, voici comment le message de stock est affiché sur la page du produit unique : message en stock

Si vous souhaitez masquer cet élément, vous devriez envisager d'ajouter l'extrait de code suivant au bas du fichier functions.php :

 /**

 * Masquez le message "En stock" sur la page du produit.

 *

 * chaîne @param $html

* @param chaîne $text

 * @param WC_Product $produit

 * @chaîne de retour

 */

 function njengah_wc_hide_in_stock_message( $html, $text, $product ) {

 $availability = $product->get_availability();

 if ( isset( $disponibilité['classe'] ) && 'en stock' === $disponibilité['classe'] ) {

 retourner '';

}

 retourne $html ;

 }

 add_filter( 'woocommerce_stock_html', 'njengah_wc_hide_in_stock_message', 10, 3 );

Pour voir le résultat, actualisez la page du produit et vous verrez que le message a été supprimé : masquer les messages de stock woocommerce

WooCommerce Masquer le poids du produit

Si vous vendez des produits numériques, vous n'aurez peut-être pas besoin d'afficher le poids et les dimensions de votre produit. De plus, si vous n'expédiez pas le produit, il n'est pas nécessaire d'afficher son poids.

Cependant, avant de commencer, il convient de mentionner que votre thème n'affichera pas le poids et les dimensions d'un produit à moins que ces informations ne soient ajoutées dans le back-end. Vous pouvez en savoir plus sur l'ajout du poids des produits ici. À partir de l'image, vous pouvez voir que j'ai ajouté le poids, et voici comment il s'affiche à l'avant : Poids du produit

Si vous souhaitez masquer cet élément, pensez à ajouter le code suivant en bas du fichier functions.php du thème :

 /**

* Masque le poids et les dimensions du produit sur la page du produit unique.

 */

 add_filter( 'wc_product_enable_dimensions_display', '__return_false' );

N'oubliez pas d'enregistrer les modifications que vous apportez à ce fichier. Voici le résultat sur le front-end : enlever le poids en utilisant le code

WooCommerce Masquer le SKU, la catégorie et les balises sur la page du produit

Si vous êtes un développeur WordPress, vous penseriez qu'il existe un filtre WooCommerce spécifique pour cela. Cependant, il n'y a pas de filtre pour cela. Cela signifie que nous devons supprimer tout le bloc "méta du produit". De plus, vous pouvez rajouter les informations souhaitées, par exemple les catégories.

Si vous n'êtes pas développeur, copiez-collez l'extrait dans votre functions.php et observez les changements. De plus, vous devez apprendre à afficher le résumé du produit et à le réafficher si vous le supprimez. Vous pouvez apprendre à le faire ici.

Voici comment le résumé du produit est affiché sur le front-end : détails du produit

Si vous souhaitez masquer le résumé du produit, pensez à ajouter le code suivant en bas du fichier functions.php de votre thème :

 /**

  * Masquer le SKU, les chats, les balises sur une seule page de produit - WooCommerce

 */

  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

N'oubliez pas de sauvegarder vos modifications. Ce sera le résultat sur le front-end : masquer le résumé du produit

WooCommerce Masquer le prix en cas de rupture de stock

WooCommerce prend en charge vos besoins d'inventaire. WooCommerce est un système optimisé qui vous fait gagner du temps et des efforts pour mettre à jour votre stock. De plus, il est flexible pour la personnalisation afin de compenser les fonctionnalités qui lui manquent.

Les acheteurs potentiels sont frustrés lorsqu'ils voient la notification de rupture de stock ou si le produit n'est pas disponible. Une des choses que vous pouvez faire est de masquer le prix des produits en rupture de stock.

De plus, il existe de nombreuses situations où cette fonctionnalité a un sens. Par exemple, si vous avez une boutique d'adhésion WooCommerce, vous souhaitez probablement masquer vos prix aux visiteurs qui ne sont pas enregistrés. Vous pouvez en savoir plus sur le masquage du prix ici.

Si vous souhaitez masquer le prix des produits en rupture de stock sur la page produit unique, ajoutez le code suivant dans le fichier functions.php de votre thème :

 /**

  * Masquer le prix en cas de rupture de stock

  */

 add_filter( 'woocommerce_variable_sale_price_html', 'njengah_remove_prices', 10, 2 );

 add_filter( 'woocommerce_variable_price_html', 'njengah_remove_prices', 10, 2 );

 add_filter( 'woocommerce_get_price_html', 'njengah_remove_prices', 10, 2 );

 function theanand_remove_prices( $prix, $produit ) {

 if ( ! $product->is_in_stock()) {

 $prix = '';

 }

 retourner $prix ;

 }

Voici le résultat : masquer le prix des produits en rupture de stock

WooCommerce Masquer les informations supplémentaires

Lorsque vous ajoutez des informations d'expédition à votre produit (poids et dimensions), elles sont automatiquement ajoutées à l'onglet Informations supplémentaires WooCommerce sur la page du produit.

Le modèle de l'onglet "Informations supplémentaires" ajoute une liste de tous les attributs du produit. Si vous faites quelques recherches, vous constaterez que ces attributs sont ajoutés depuis le template product-attributes.php via cette fonction : enable_dimensions_display(). Vous pouvez apprendre pourquoi une solution PHP est meilleure qu'une solution CSS ici.

Voici comment l'onglet Informations supplémentaires s'affiche dans le thème Storefront : Onglet Informations supplémentaires

Si vous souhaitez masquer la section Informations supplémentaires, vous devriez envisager d'ajouter le code suivant au bas du fichier functions.php :

 /**

* Supprimer l'onglet Informations supplémentaires @ WooCommerce Single Product Page

*/

add_filter('woocommerce_product_tabs', 'njengah_remove_product_tabs', 9999);

function njengah_remove_product_tabs( $tabs ) {

unset( $tabs['informations_supplémentaires'] );

retourner $tabs ;

}

Voici le résultat sur la page de produit unique : supprimer l'onglet d'informations supplémentaires

Masquer le titre de l'onglet WooCommerce

WooCommerce a trois onglets différents, et ils ont des en-têtes. Ces onglets sont :

  • Information additionnelle
  • Commentaires
  • Description (affichée si vous avez ajouté un contenu de description pour le produit)

Cette section vous montrera comment masquer et modifier le titre du titre de l'onglet Description sur la page du produit unique. Si vous souhaitez masquer et modifier le titre de l'onglet Informations supplémentaires et avis, vous pouvez trouver la solution complète ici.

Voici comment le titre de l'onglet Description s'affiche sur le front-end : titre de l'onglet

Pour masquer et modifier l'en-tête de l'onglet Description, vous devez envisager d'ajouter l'extrait de code suivant à la fin du fichier functions.php :

 // Supprime la description du produit Titre

 add_filter( 'woocommerce_product_description_heading', '__return_null' );

 // Changer le titre de la description du produit

 add_filter('woocommerce_product_description_heading', 'change_product_description_heading');

 fonction change_product_description_heading() {

  return __('NOUVEAU TITRE ICI', 'woocommerce');

 }

Voici le résultat sur le front-end : masquer et modifier le titre de la description

Masquer le SKU de WooCommerce

WooCommerce vous permet d'ajouter un SKU pour n'importe quel produit sur la page des paramètres du produit en arrière-plan. Cette section apprendra comment masquer complètement le SKU du produit, même dans la section d'administration. Cependant, si votre boutique conserve le SKU pour l'administration, mais que vous ne souhaitez pas le désactiver dans la zone d'administration, vous pouvez apprendre à le faire ici.

Voici comment le SKU est affiché sur la page du produit : SKU dans le front-end

Si vous souhaitez masquer complètement le SKU même dans la zone d'administration, ajoutez le script PHP personnalisé suivant au bas du fichier functions.php de votre thème :

add_filter( 'wc_product_sku_enabled', '__return_false' );

Ce sera le résultat : Masquer le SKU WooCommerceDésactiver le SKU dans l'administration

N'oubliez pas que cette solution supprime le SKU de l'ensemble de votre boutique WooCommerce.

Comment masquer le bouton Ajouter au panier dans la page de produit unique WooCommerce

Avant d'aborder les étapes détaillées pour ce faire, vous vous demandez peut-être pourquoi vous pouvez masquer le bouton Ajouter au panier pour un produit spécifique. Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir le faire, par exemple, si vous avez affaire à des appareils électroniques tels que des appareils mobiles, de nombreux produits sont introduits quelques jours avant qu'ils ne soient autorisés à l'achat.

Les spécifications sont publiées tôt, de sorte que de nombreux propriétaires de boutiques en ligne donnent des spécifications détaillées des produits avant qu'ils ne soient disponibles à l'achat.

Cela signifie que le propriétaire du magasin ne peut pas avoir le bouton "Ajouter au panier" sur la page, car il ne veut pas que les gens achètent le produit pour l'instant jusqu'à ce qu'il soit disponible à l'achat.

Alternativement, vous pouvez décider de masquer le bouton du panier pour un produit spécifique pendant une période spécifique. Vous pouvez apprendre comment vous pouvez obtenir cette fonctionnalité ici.

Voici comment le bouton Ajouter au panier s'affiche sur la page du produit unique : aspect par défaut de l'ID de produit 185

Si vous souhaitez masquer le bouton Ajouter au panier dans WooCommerce pour un produit particulier, ajoutez le code suivant au bas du fichier functions.php. N'oubliez pas d'ajouter le bon ID de produit :

 /**

  * @snippet Masquer le bouton Ajouter au panier dans WooCommerce

 */

 add_filter('woocommerce_is_purchasable', 'woocommerce_hide_add_to_cart_button', 10, 2);

 function woocommerce_hide_add_to_cart_button( $is_purchasable = true, $product) {

     return ( $product->get_id() == 185 ? false : $is_purchasable );

 }

Voici le résultat : produit sans bouton ajouter au panier

WooCommerce Masquer l'image en vedette sur la galerie de pages de produit unique

WooCommerce utilise l'image en vedette pour représenter un produit dans les pages d'archives de produits comme la page Boutique, la page d'accueil, la page de catégorie, la page de résultats de recherche de produits, etc. WooCommerce utilise l'image en vedette sur les images miniatures de la page du produit dans la galerie d'images du produit.

Cependant, vous ne voudrez peut-être pas inclure l'image en vedette dans la galerie d'images du produit. Dans cet article, vous verrez comment il est très facile de masquer l'image vedette du produit WooCommerce de la galerie d'images de produits dans des pages uniques de produits. Si vous ne savez pas comment ajouter une galerie de produits, vous pouvez apprendre comment le faire ici.

Voici comment les images apparaissent sur le front-end : devant la galerie de produits

À partir de la capture d'écran, vous pouvez voir que l'image sélectionnée est répétée deux fois.

Pour masquer l'image sélectionnée, vous devriez envisager d'ajouter le code suivant au bas du fichier functions.php :

 /**

 * Empêchez l'image sélectionnée d'apparaître dans la galerie de produits, s'il existe une galerie de produits.

 *

 * @param array $html Tableau de code HTML à afficher pour la galerie de produits.

 * @param array $attachment_id ID de chaque variable d'image.

 */

function njengah_woocommerce_remove_featured_image( $html, $attachment_id ) {

            global $post, $product ;

            // Récupère les identifiants.

            $attachment_ids = $product->get_gallery_image_ids();

            // S'il n'y en a pas, allez-y et revenez tôt - avec l'image en vedette incluse dans la galerie.

            si ( ! $attachment_ids ) {

                        retourne $html ;

            }

            // Recherchez l'image sélectionnée.

            $featured_image = get_post_thumbnail_id( $post->ID );

            // S'il y en a un, l'exclure de la galerie.

            if ( is_product() && $attachment_id === $featured_image ) {

                        $html = '';

            }

            retourne $html ;

}

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'njengah_woocommerce_remove_featured_image', 10, 2 );

Voici le résultat : masquer l'image en vedette dans la galerie de produits

Masquer le champ de quantité de produit WooCommerce de la page du produit

Dans cette section, vous verrez comment il est facile de masquer la quantité de produit déposée à partir de la page du produit unique. Je vais vous montrer comment le faire pour de nombreux produits. Cependant, vous pouvez masquer le sélecteur de quantité pour un produit particulier à l'aide d'un extrait PHP ou CSS personnalisé. Vous pouvez en savoir plus à ce sujet ici.

Voici comment le sélecteur de quantité est affiché sur la page des produits : niveau de quantité par défaut sur un produit

Le code suivant vous aidera à masquer ou à supprimer la quantité lorsqu'il y a beaucoup de produits. C'est très simple à faire, car vous devez copier et coller le code dans le fichier functions.php :

 /** * @desc Supprimer dans tous les types de produits */

 function woo_remove_all_quantity_fields( $return, $product ) {

   retourner vrai ;

 }

 add_filter( 'woocommerce_is_sold_individually', 'woo_remove_all_quantity_fields', 10, 2 );

Voici le résultat : supprimer complètement la quantité

Comment masquer les variations de rupture de stock dans WooCommerce

Avoir des produits numériques créera un endroit pratique où les utilisateurs pourront accéder à vos produits. Un bon exemple est l'iTunes Store créé par Apple Company, qui offre la commodité de trouver de la musique. Les utilisateurs sont également prêts à payer pour cette commodité car ces produits peuvent être téléchargés.

Vous devez éviter la frustration des utilisateurs en ne les laissant jamais choisir un produit ou une variante de produit en rupture de stock, pour se rendre compte qu'ils ne peuvent pas l'acheter. WooCommerce, par défaut, ne grise pas les variantes en rupture de stock. Il informe uniquement l'utilisateur que le produit est en rupture de stock après avoir d'abord sélectionné la variation. L'apparence par défaut de la page produit pour une variation en rupture de stock ressemble à ceci : En rupture de stock

Si vous ne savez pas comment vendre des produits téléchargeables WooCommerce complexes, vous pouvez apprendre à les créer et à les ajouter ici.

Maintenant que vous savez comment vendre des produits téléchargeables complexes, vous devez ajouter le code suivant en bas du fichier functions.php de votre thème :

 /**

 * @snippet Désactiver les variations de stock @ WooCommerce Single

 */

 add_filter( 'woocommerce_variation_is_active', 'njengah_grey_out_variations_out_of_stock', 10, 2 );

 function njengah_grey_out_variations_out_of_stock( $is_active, $variation ) {

     if ( ! $variation->is_in_stock() ) renvoie false ;

     retourne $is_active ;

 }

Pour voir le résultat, actualisez la page du produit et vous verrez que la variation du produit a été désactivée en cas de rupture de stock : variation de produit désactivée

WooCommerce Masquer les éléments mobiles

L'une des choses les plus importantes que les propriétaires de magasins WooCommerce doivent faire est de s'assurer que leur site est adapté aux mobiles. Cependant, cela peut ne pas être aussi simple qu'il y paraît. Vous pouvez avoir un site qui fonctionne sur les appareils mobiles et un site conçu pour les appareils mobiles. Je vous recommande fortement de vous assurer que votre site fonctionne sur les appareils mobiles.

Dans cette section, vous apprendrez à masquer certains éléments mobiles WooCommerce.

Comment masquer l'icône du panier mobile de la vitrine dans WooCommerce

Le thème Storefront est surnommé le thème officiel de WooCommerce et est très réactif. Dans cette section, vous apprendrez comment masquer l'icône du panier mobile. J'utiliserai l'option "Personnaliser" sous "Apparence" dans le tableau de bord pour masquer cet élément. Cette section vous permet de modifier facilement votre thème de plusieurs manières autorisées par l'auteur du thème. Cependant, l'astuce consiste simplement à savoir quel CSS utiliser.

Lorsque les visiteurs arrivent dans votre magasin, ils voient une petite icône de panier de menu située en bas de l'écran mobile. Vous voudrez peut-être masquer cet élément et le placer ailleurs. Vous pouvez apprendre à identifier l'élément que vous devez modifier ici.

Voici comment l'icône du panier mobile s'affiche sur le thème de la vitrine : Icône de panier mobile

Si vous souhaitez supprimer cette icône, vous devez envisager d'ajouter le code CSS suivant dans la section CSS supplémentaire :

 .footer-cart-content{

             affichage : aucun ! important ;

 }

Voici le résultat : ajouter une règle

Comment masquer le pied de page mobile de la vitrine WooCommerce

De nombreuses personnes utilisent le thème Storefront avec WooCommerce, mais uniquement en tant que catalogue, afin que les clients puissent consulter les produits mais pas les acheter.

Dans ce cas, vous n'avez probablement pas besoin des pages Panier et Paiement, vous les supprimez donc. Cependant, Storefront affiche toujours un menu dans la zone Pied de page lorsque vous visitez le site sur un appareil mobile. Ce menu vous mène également à la page Panier, que vous avez supprimée. Vous pouvez obtenir un didacticiel détaillé sur la façon dont vous pouvez utiliser CSS pour masquer le pied de page mobile ici.

Voici comment le pied de page mobile s'affiche : barre de pied mobile

Si vous souhaitez supprimer le pied de page mobile, vous devriez envisager d'ajouter le code CSS suivant au bas du fichier functions.php de votre thème :

remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );

Pour voir le résultat, actualisez le site sur un appareil mobile et vous verrez que la barre de pied de page a été supprimée : supprimer la barre de pied de page php

Masquer l'en-tête WooCommerce

L'en-tête d'un site WordPress est un élément universel qui apparaît sur chaque page et publication. Compte tenu de son emplacement bien en vue, l'en-tête sert souvent de première impression de votre site par vos visiteurs. Vous pouvez ajouter des informations critiques et des appels à l'action (CTA) et des appels à l'action (CTA). Cette zone importante mérite d'être personnalisée. Dans cette section, vous apprendrez à masquer certains éléments de l'en-tête.

Comment masquer le panier WooCommerce dans le menu de navigation

Par défaut, WooCommerce ne vous permet pas de désactiver l'icône du panier WooCommerce à partir de l'en-tête ou de la navigation. Il existe deux façons de masquer l'icône du panier dans le menu de navigation. Vous pouvez utiliser PHP ou CSS. La solution CSS vous demande d'abord d'identifier l'élément que vous devez modifier. Vous pouvez en savoir plus ici.

Si vous utilisez Chrome ou Firefox, ils facilitent l'inspection et la manipulation des éléments dans le DOM. Ces navigateurs vous permettent de revoir la structure entière d'une page Web, y compris tous les éléments et leurs propriétés. Dans notre cas, nous voulons sélectionner un élément spécifique appelé l'icône du panier.

Voici comment l'icône du panier s'affiche dans l'en-tête : Icône du panier

Si vous souhaitez masquer cet élément, pensez à ajouter le code PHP suivant en bas du fichier functions.php de votre thème :

 /**

* Désactiver l'icône du panier

*/

fonction remove_sf_actions() {

remove_action( 'storefront_header', 'storefront_header_cart', 60 );

}

add_action( 'init', 'remove_sf_actions' );

Voici le résultat sur le front-end : Résultat sans panier

Masquer l'en-tête WooCommerce

La modification de l'en-tête d'un thème peut être une tâche difficile pour l'utilisateur moyen de WordPress. Cependant, le thème Storefront est très facile à personnaliser. Il ne vous faut que quelques clics pour modifier le format de l'en-tête, masquer les éléments d'en-tête, modifier les couleurs d'arrière-plan, de texte et de lien. Cette section partagera avec vous tout moyen simple de supprimer l'en-tête dans le thème Storefront.

Tout d'abord, nous devons identifier l'en-tête et tous ses éléments à l'aide de la console. Après cela, j'ajouterai une nouvelle règle à la console pour voir si cela fonctionne. Lorsque j'obtiendrai les résultats souhaités, je rendrai les modifications permanentes en ajoutant la nouvelle règle dans la section CSS supplémentaire. Vous pouvez en savoir plus à ce sujet ici.

Si vous souhaitez masquer l'en-tête du thème Storefront, ajoutez le code CSS suivant dans la section CSS supplémentaire :

 .site-header {      

affichage : aucun ;

}

Ce sera le résultat : Aucun en-tête

WooCommerce Masquer la page de mon compte

La personnalisation de la page « Mon compte » de WooCommerce est l'une des fonctionnalités les plus demandées par les développeurs. Cette page est vitale pour le bon déroulement de ses opérations. Par conséquent, cette page doit avoir un design épuré pour permettre aux utilisateurs de tirer le meilleur parti de la gestion de compte. Vous pouvez personnaliser cette page pour convertir plus de ventes ou inciter les clients à revenir dans votre magasin. Dans cette section, je vais partager comment vous pouvez masquer des éléments sur cette page.

Voici comment la page Mon compte s'affiche sur le front-end : Page Mon compte

WooCommerce Masquer les téléchargements de mon compte

Pour supprimer le menu de téléchargements de la page Mon compte de votre boutique WooCommerce, vous n'avez pas besoin d'écrire de code car une simple option de configuration est souvent négligée. Les points de terminaison WooCommerce permettent aux utilisateurs de créer des extensions d'URL personnalisées pour les pages WooCommerce les plus courantes.

Idéalement, cette fonctionnalité est censée rendre WooCommerce plus flexible et personnalisable pour répondre à un large éventail de besoins des utilisateurs finaux.

Ce qui suit est un résumé rapide des différents points de terminaison WooCommerce que vous pouvez personnaliser à partir de votre site Paramètres WooCommerce > Paramètres avancés > Points de terminaison. Vous pouvez en savoir plus sur le point de terminaison WooCommerce ici.

L'une des nombreuses raisons pour lesquelles vous souhaiterez peut-être supprimer le menu Téléchargements de la page "Mon compte" est lorsque vous ne vendez pas de produits numériques ou téléchargeables.

Accédez aux paramètres WooCommerce pour le supprimer, puis aux paramètres avancés et recherchez la section des points de terminaison. Dans cette section, recherchez le point de terminaison Téléchargements, supprimez le contenu du champ de texte et mettez à jour les paramètres. supprimer le menu des téléchargements Mon compte WooCommerce

Ce sera le résultat sur le front-end : supprimer le menu des téléchargements Mon compte WooCommerce supprimé

WooCommerce Masquer le tableau de bord

La page "Mon compte" est très importante car c'est là que seront stockées les informations importantes de vos utilisateurs et clients. De plus, c'est là que vos clients peuvent gérer leurs comptes, ajouter des détails de facturation, des adresses, etc., pour votre usage.

Cependant, je vous recommande fortement de personnaliser cette section afin que vous puissiez impressionner vos utilisateurs enregistrés et laisser aller plus de possibilités commerciales avec eux.

Vous devez noter que la page Tableau de bord est la seule page parmi les pages de compte, qui n'a pas de point de terminaison. Par conséquent, nous avons besoin d'un script PHP personnalisé pour cela.

Si vous souhaitez masquer l'onglet Dashboard, pensez à ajouter le code suivant en bas du fichier functions.php de votre thème :

 /**

  * @snippet Masquer le tableau de bord sur la page Mon compte

   */

 add_filter( 'woocommerce_account_menu_items', 'njengah_remove_my_account_dashboard' );

 fonction njengah_remove_my_account_dashboard( $menu_links ){

             unset( $menu_links['tableau de bord'] );

             retourne $menu_links ;

  }

Vous pouvez apprendre comment le code et comment vous pouvez détecter la page du tableau de bord et rediriger vers les commandes fonctionnent ici.

Voici le résultat :

Comment masquer n'importe quel onglet de la page Mon compte WooCommerce

Dans cette section, vous apprendrez à masquer n'importe quel onglet de la page Mon compte à l'aide d'un extrait de code PHP personnalisé. Si vous êtes familier avec la personnalisation PHP, presque tout peut être réalisé avec de simples extraits.

Vous pouvez en savoir plus sur les terminaux ici. De plus, vous pouvez également renommer n'importe quel onglet.

Si vous souhaitez masquer un onglet, vous devriez envisager d'ajouter le code suivant au bas du fichier functions.php de votre thème :

 add_filter ('woocommerce_account_menu_items', 'njengah_remove_my_account_links');

 fonction njengah_remove_my_account_links( $menu_links ){

             unset( $menu_links['edit-address'] ); // Adresses

             //unset( $menu_links['tableau de bord'] ); // Supprimer le tableau de bord

             //unset( $menu_links['payment-methods'] ); // Supprimer les méthodes de paiement

             //unset( $menu_links['commandes'] ); // Supprimer les commandes

             //unset( $menu_links['téléchargements'] ); // Désactiver les téléchargements

             //unset( $menu_links['edit-account'] ); // Supprimer l'onglet Détails du compte

             //unset( $menu_links['customer-logout'] ); // Supprimer le lien de déconnexion

             retourne $menu_links ;

 }

Le code fonctionne bien, mais vous n'avez besoin d'aucun codage lorsque vous souhaitez supprimer à la fois l'élément de menu et sa page. En effet, vous pouvez trouver toutes les sous-pages Mon compte par défaut dans WooCommerce > Paramètres > Avancé . Faites défiler vers le bas jusqu'à Points de terminaison de compte. Tout ce dont vous avez besoin est simplement de définir un point de terminaison spécifique vide.

WooCommerce Masquer la zone d'administration

La zone d'administration de WooCommerce est l'une des sections les plus importantes de tout site WooCommerce. Vous pouvez consulter vos rapports dans la zone d'administration pour suivre vos performances avec des statistiques.

Dans cette section, vous apprendrez à masquer différents éléments dans la zone d'administration de votre site WooCommerce.

WooCommerce Masquer les erreurs des visiteurs

Les plugins et thèmes obsolètes provoquent principalement des messages d'erreur PHP. Les fichiers de base changent souvent avec les mises à jour de WordPress, ce qui rend certaines parties du code obsolètes.

De plus, les thèmes et les plugins peuvent également afficher des messages d'avertissement PHP lorsqu'ils sont utilisés avec quelque chose d'incompatible. Deux plugins différents peuvent bien fonctionner seuls mais ont des problèmes lorsqu'ils sont associés. En effet, tous les développeurs n'utilisent pas la même syntaxe lors du développement de fichiers de site Web.

Cependant, certains de ces avertissements ne signifient pas nécessairement que votre site est défectueux. Ils ne semblent pas bons pour un visiteur sans méfiance. Le développeur peut créer une mise à jour pour corriger l'avertissement, mais cela prend plus de temps.

Cette section implique la personnalisation du fichier wp-config.php. Je vous recommande fortement de créer une sauvegarde de votre site avant d'apporter des modifications au code. Il s'agit d'une mesure de précaution en cas de problème. Vous pouvez rapidement restaurer votre site.

Dans votre fichier wp-config.php, recherchez la ligne suivante :

define('WP_DEBUG', true);

Cependant, dans certains cas, il peut être défini sur false :

define('WP_DEBUG', false);

Dans les deux cas, vous devez remplacer cette ligne par le code suivant :

 ini_set('display_errors','Off');

ini_set('error_reporting', E_ALL );

définir('WP_DEBUG', faux);

définir('WP_DEBUG_DISPLAY', faux);

N'oubliez pas de sauvegarder vos modifications et de télécharger votre fichier wp-config.php sur le serveur.

L'étape suivante consiste à visiter le front-end pour confirmer que les erreurs, avis et avertissements PHP ont disparu.

Vous pouvez également les réactiver sur un serveur local ou une zone de staging si vous travaillez sur un site Web.

WooCommerce Masquer la notification de mise à jour

Cette section illustre comment vous pouvez masquer les notifications de mise à jour dans votre boutique WooCommerce. Il convient également de mentionner que WordPress est un logiciel si délicat. Par conséquent, vous devez toujours savoir quoi faire avant de le faire.

Idéalement, il serait préférable d'exécuter des sauvegardes régulières et de tester les nouvelles versions de WooCommerce avant de mettre à jour votre boutique WooCommerce. Avec les bons outils en place, vous pouvez maintenir votre site WooCommerce à jour. Cependant, vous souhaiterez peut-être masquer la notification de mise à jour. Vous pouvez utiliser un environnement intermédiaire pour tester la mise à jour fournie par votre hébergeur. Notifications de mise à jour de WooCommerce

En ce qui concerne les mises à jour de WooCommerce, il existe quatre écoles de pensée parmi les propriétaires de magasins.

Si vous souhaitez masquer les notifications de mise à jour, pensez à ajouter le code suivant en bas du fichier functions.php :

 /**

  * Désactiver les notifications de mise à jour sur le tableau de bord WordPress

 */

  add_action( 'admin_init', 'njengah_hide_update_notifications_users' );

  function njengah_hide_update_notifications_users() {

     global $menu, $sous-menu ;

     $user = wp_get_current_user();

     // ENTREZ ICI LE SEUL NOM D'UTILISATEUR AUTORISÉ

     $autorisé = array( 'felixmatara' );

     // MASQUER WP, PLUGIN, NOTIFICATIONS DE THÈME POUR TOUS LES AUTRES UTILISATEURS

     if ( $user && isset( $user->user_login ) && ! in_array( $user->user_login, $allowed ) ) {

         add_filter( 'pre_site_transient_update_core', 'njengah_disable_update_notifications' );

         add_filter( 'pre_site_transient_update_plugins', 'njengah_disable_update_notifications' );

         add_filter( 'pre_site_transient_update_themes', 'njengah_disable_update_notifications' );

            // SUPPRIMEZ ÉGALEMENT LES COMPTEURS DE MISE À JOUR ROUGES @ ÉLÉMENTS DU MENU DE LA BARRE LATÉRALE

         $menu[65][0] = 'Plugins à jour'; 

         $submenu['index.php'][10][0] = 'Mises à jour désactivées'; 

     }

 }

  function njengah_disable_update_notifications() {

     globale $wp_version ;

     return (object) array( 'last_checked' => time(), 'version_checked' => $wp_version, );

 }

Une fois le code entré, pensez à mettre à jour le fichier functions.php. Cela masquera les notifications de mise à jour des autres utilisateurs, comme indiqué ci-dessous : masquer les notifications de mise à jour

WooCommerce Masquer le statut de la commande

Pour diverses raisons, vous souhaiterez peut-être masquer certains statuts de commande principaux. Cependant, la version par défaut de WooCommerce vous permet de marquer les commandes avec l'un des statuts suivants terminé, traitement, paiement en attente, en attente, remboursé, annulé ou échoué.

Voyons comment vous pouvez masquer le statut de la commande dans WooCommerce à l'aide d'un extrait de code. Pour vérifier les messages d'état de la commande par défaut, connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur. Ensuite, cliquez sur WooCommerce > Commandes . Vous verrez ceci : état de la commande back-end

Il convient de mentionner que lorsque vous masquez les statuts des commandes principales, assurez-vous qu'aucun produit n'a ce statut. De plus, vous devez vous assurer que votre boutique WooCommerce n'utilise ce statut nulle part car cela peut entraîner des erreurs. Par exemple, si vous ne prévoyez pas d'effectuer de remboursement dans votre boutique WooCommerce, vous pouvez masquer le statut de remboursement.

Si vous souhaitez masquer un statut de commande, ajoutez le code suivant en bas du fichier functions.php de votre thème :

 /*

  * Suppression des statuts de commande de base

  * @param array $wc_statuses_arr Tableau de tous les statuts de commande sur le site Web

  */

 fonction njengah_remove_order_statuses( $wc_statuses_arr ){

             // Traitement

             if( isset( $wc_statuses_arr['wc-processing'] ) ) { // si existe

                         unset( $wc_statuses_arr['wc-processing'] ); // le supprimer du tableau

             }

             // Remboursé

             if( isset( $wc_statuses_arr['wc-refunded'] ) ){

                         unset( $wc_statuses_arr['wc-refunded'] );

             }

             // En attente

             if( isset( $wc_statuses_arr['wc-on-hold'] ) ){

                         unset( $wc_statuses_arr['wc-on-hold'] );

             }

             // Manqué

             if( isset( $wc_statuses_arr['wc-failed'] ) ){

                         unset( $wc_statuses_arr['wc-failed'] );

             }

             // En attente de paiement

             if( isset( $wc_statuses_arr['wc-pending'] ) ){

                         unset( $wc_statuses_arr['wc-pending'] );

             }

             // Complété

             //if( isset( $wc_statuses_arr['wc-completed'] ) ){

             // unset( $wc_statuses_arr['wc-completed'] );

             //}

             // Annulé

             //if( isset( $wc_statuses_arr['wc-cancelled'] ) ){

             // unset( $wc_statuses_arr['wc-cancelled'] );

             //}

             retourne $wc_statuses_arr ; // renvoie les statuts des résultats

 }

 add_filter( 'wc_order_statuses', 'njengah_remove_order_statuses' );

Voici le résultat : masquer les statuts des commandes

Vous pouvez également ajouter un statut de commande personnalisé.

WooCommerce Masquer les prix de Google

Google est une organisation puissante en matière de recherche de produits. Google bat Amazon dans la portée de la recherche de produits. De plus, il convient de mentionner que de nombreux achats en ligne commencent par une recherche sur Google. Google utilise des extraits enrichis, et c'est pourquoi il excelle dans les recherches de produits.

Les extraits enrichis permettent aux acheteurs de voir les produits correspondant à leur recherche. De plus, ils peuvent lire les critiques et comparer les prix à partir d'un seul endroit. Les extraits enrichis agissent comme une encyclopédie complète des produits. Par conséquent, votre boutique en ligne doit suivre le mouvement des extraits enrichis de Google.

Par défaut, le balisage de schéma affiche le prix du produit dans les résultats de recherche de Google. De plus, des données telles que les étoiles d'avis, l'état des stocks et le nombre d'avis sont affichées.

Cependant, vous souhaiterez peut-être masquer les prix des produits WooCommerce des résultats de recherche Google dans certains cas. Prix ​​WooCommerce dans le moteur de recherche Google

Pour masquer les prix à Google, ajoutez le code suivant en bas du fichier functions.php de votre thème :

 /**

 * @snippet Masquer les prix des moteurs de recherche

 */

 add_filter( 'woocommerce_structured_data_product_offer', '__return_empty_array' );

N'oubliez pas d'enregistrer les modifications que vous apportez.

Masquer le hub marketing de WooCommerce

Depuis WooCommerce 4.1, il y a un onglet Marketing sous l'élément de menu Analytics. Cette section est surnommée le WooCommerce Marketing Hub. Cette section révèle une liste de plugins recommandés pour aider les propriétaires de magasins à démarrer la commercialisation de leurs magasins. C'est un excellent début pour tout nouveau propriétaire de magasin WooCommerce. De plus, vous pouvez créer des coupons dans cette section.

Cependant, certains propriétaires de magasins voudront peut-être masquer le hub marketing, car il ne suggère que les meilleurs plugins marketing que vous pouvez utiliser. À l'avenir, cette section pourrait s'agrandir pour inclure plus d'informations utilisables, mais si votre magasin ne distribue pas de coupons, cela semble abstrait et peut-être même inutile.

Voici comment le Hub Marketing s'affiche dans la zone d'administration : Centre de commercialisation WooCommerce

Si vous souhaitez supprimer cette section, vous devez ajouter le code suivant en bas du fichier functions.php de votre thème :

 /**

 * @ snippet Masquer le hub marketing WooCommerce

 */

 add_filter( 'woocommerce_admin_features', function( $features ) {

     /**

      * Filtrez la liste des fonctionnalités et supprimez celles qui ne sont pas nécessaires *

      */

     return array_values(

         array_filter( $fonctionnalités, fonction($fonctionnalité) {

             return $fonctionnalité !== 'marketing' ;

         }

  )

     );

 }

 );

N'oubliez pas d'enregistrer les modifications que vous apportez.

WooCommerce Masquer l'e-mail de commande client pour les commandes gratuites

Bien que créer des e-mails HTML impressionnants soit vraiment un exploit en soi, WooCommerce propose plusieurs options pour que même les débutants de WordPress puissent créer des e-mails. Vous pouvez en savoir plus sur ce que "Vanilla" propose des notifications par e-mail WooCommerce envoyées aux clients en réponse à leurs interactions avec le magasin.

Il y a des moments où vous vendez des produits gratuits pour donner aux clients l'accès aux membres enregistrés. Cela signifie que vous ne voudrez peut-être pas leur envoyer l'e-mail "Commande terminée", car votre logiciel de marketing par e-mail effectue le travail de suivi, ou ils sont automatiquement redirigés vers la ressource lors du paiement.

Vous voudrez conserver les e-mails "Commande terminée" pour les commandes qui ne sont pas de 0 $. Cependant, WooCommerce n'a pas cette fonctionnalité intégrée. Nous allons utiliser un extrait de code PHP personnalisé pour y parvenir :

 /**

  * @snippet Désactiver l'e-mail de commande client pour les commandes gratuites - WooCommerce

   */

   // Pour cibler un autre e-mail, vous pouvez modifier le filtre, par exemple :

 // "woocommerce_email_recipient_customer_processing_order"

 add_filter( 'woocommerce_email_recipient_customer_completed_order', 'njengah_disable_customer_order_email_if_free', 10, 2 );

 function njengah_disable_customer_order_email_if_free( $recipient, $order ) {

     $page = $_GET['page'] = isset( $_GET['page'] ) ? $_GET['page'] : '';

     if ( 'wc-settings' === $page ) {

         retourne $destinataire ;

     }

     if ( (float) $order->get_total() === '0.00' ) $recipient = '';

     retourne $destinataire ;

 }

N'oubliez pas d'enregistrer les modifications que vous apportez.

Comment masquer les balises dans le thème de vitrine WooCommerce

Dans n'importe quelle boutique WooCommerce, il existe deux principales options de taxonomie : les catégories et les balises. Les balises de produit sont comme des catégories de produits, mais il n'y a pas de hiérarchie dans les balises. Cela signifie qu'il n'y a pas de 'sous-étiquettes'. Par exemple, si vous vendez des vêtements et que vous avez de nombreux imprimés à carreaux, vous pouvez étiqueter « à carreaux ».

Cependant, la taxonomie "product_tag" est quelque chose que nous avons rarement besoin d'utiliser dans notre boutique WooCommerce. Lorsque vous ne l'utilisez pas, vous pouvez facilement le supprimer pour garder l'interface d'administration propre. Si votre administrateur WordPress est encombré, cela diminue la convivialité et les choses qui ne fonctionnent pas peuvent dérouter même les utilisateurs techniques.

Si vous allez sur la page d'édition de n'importe quel produit, vous trouverez la méta-boîte « Balises de produits », similaire à la méta-boîte « Balises » de WordPress. Vous devez le supprimer car il vous permet de choisir parmi les balises disponibles et d'en créer de nouvelles.

Vous pouvez utiliser CSS pour le masquer dans les options d'écran, mais cela ne suffit pas. Vous pouvez ajouter le script PHP suivant dans votre fichier functions.php pour le masquer :

 /**

* Supprimer les étiquettes de produit Metabox

 */

 add_action( 'admin_menu', 'njengah_hide_product_tags_metabox' );

 function njengah_hide_product_tags_metabox() {

 remove_meta_box( 'tagsdiv-product_tag', 'produit', 'côté' );

 }

Voici le résultat :

Vous pouvez également apprendre à masquer le lien "Tous les produits > Balises" dans le menu d'administration, à supprimer la colonne des balises de la page de tous les produits et à supprimer la zone de texte des balises de produit de la modification rapide et de la modification en masse ici.

Comment masquer des produits sans prix dans WooCommerce

Si vous souhaitez masquer des produits sans prix, vous pouvez rapidement implémenter cet extrait dans votre functions.php ou votre code de plugin, et tous les produits sans prix seront masqués de la vue client. Ce n'est pas compliqué d'ajouter simplement le code suivant dans les fonctions du thème ou les fichiers du plugin :

 add_action( 'woocommerce_product_query', 'njengah_hide_products_without_price' );

fonction njengah_hide_products_without_price( $q ){

$meta_query = $q->get( 'meta_query' );

$meta_query[] = tableau(

'clé' => '_prix',

'valeur' ​​=> '',

'comparer' => '!='

);

$q->set( 'meta_query', $meta_query );

}

Cette méta-requête doit s'accrocher à cette action woocommerce_product_query, et la fonction de rappel contiendra la logique pour afficher tous les produits à l'exception de ceux sans prix.

Comment masquer la barre d'administration pour les clients WooCommerce ou par rôles d'utilisateur

Il est important de masquer la barre d'administration dans WooCommerce aux abonnés, clients et utilisateurs non administrateurs pour éviter l'accès au tableau de bord WordPress. WooCommerce Masquer la barre d'administration pour les clients ou les abonnés

Pour masquer la barre d'administration pour l'administrateur, il existe probablement des plugins qui peuvent également aider et fonctionner pour WooCommerce.

Avant d'utiliser un plugin, vous devez d'abord essayer cette option rapide dans le tableau de bord d'administration de WordPress. Cette option fonctionne également bien pour les sites WooCommerce. Il n'y a pas de différence.

Accédez aux paramètres du profil d'utilisateur administrateur et cochez cette option pour masquer la barre d'administration pour les administrateurs lors de la consultation du site. WooCommerce Masquer la barre d'administration pour les clients ou les abonnés

Décochez cette option, enregistrez les paramètres, puis visitez l'interface pour voir si la barre d'administration a été masquée. Comme vous pouvez le voir dans l'image ci-dessous, la barre d'administration sera masquée pour l'utilisateur administrateur lors de la consultation du site. WooCommerce Masquer la barre d'administration pour les clients ou les abonnés

Vous pouvez également masquer l'option de code à barres d'administration à l'aide d'une fonction PHP. Vous pouvez encore améliorer cela et ajouter un test conditionnel où vous autorisez l'administrateur à afficher la barre d'administration alors que le client ne doit pas la voir.

Vous pouvez apprendre à masquer la barre d'administration WordPress par programmation sans plugin ici.

WooCommerce Masquer la livraison

Si vous vendez des biens physiques, l'expédition est l'un des aspects les plus importants du succès de votre magasin. En effet, cela influence directement l'expérience client.

Les clients qui achètent en ligne s'attendent à payer le moins possible mais reçoivent les produits rapidement et en parfait état. Par conséquent, vous devez avoir une bonne stratégie d'expédition.

Cependant, c'est l'un des domaines les plus difficiles pour les propriétaires de magasins de commerce électronique en raison des défis techniques et logistiques. Dans cette section, vous apprendrez à masquer les méthodes d'expédition WooCommerce lorsqu'il y a une livraison gratuite et dans certaines conditions.

Comment masquer les méthodes d'expédition WooCommerce pour certaines conditions

WooCommerce est l'une des meilleures solutions de commerce électronique qui propose des méthodes d'expédition telles que la livraison gratuite, le tarif forfaitaire et le ramassage local. Vous pouvez les configurer pour différentes zones d'expédition en fonction des emplacements. Par exemple, l'option Livraison gratuite ne peut être utilisée que pour les codes postaux proches de l'emplacement du magasin et l'option Tarif forfaitaire pour les autres zones de livraison.

Il convient de mentionner que l'expédition basée sur la localisation peut être réalisée en utilisant un plugin. Cependant, dans des conditions où l'emplacement n'est pas le rôle le plus important, il devient très difficile pour les propriétaires de magasins d'y parvenir. Certaines des conditions pourraient être :

  • La livraison gratuite ne devrait pas être disponible si le poids de la commande est supérieur à un certain nombre de livres ou de kg.
  • Lorsque la méthode d'expédition est disponible, elle est également basée sur le nombre de quantités ou le prix de cette commande.

À des fins d'illustration, utilisons la première condition où la livraison gratuite est disponible si le poids de la commande est supérieur à 7 kg. Cela nécessite le script PHP personnalisé suivant qui doit être ajouté au bas du fichier functions.php :

 /**

  * Masquez la livraison gratuite lorsque le poids de la commande est supérieur à 10 kg.

  *

  * @param array $rates Tableau des tarifs trouvés pour le package.

  * tableau @return

  */

 function njengah_hide_free_shipping_for_order_weight( $rates, $package ) {

     $order_weight = WC()->cart->get_cart_contents_weight();

     si ( $order_weight > 7 ) {

         foreach( $tarifs comme $rate_id => $rate_val ) {

             if ( 'free_shipping' === $rate_val->get_method_id() ) {

                 unset( $tarifs[ $rate_id ] );

             }

         }

     }

     retourner $rates ;

 }

 add_filter( 'woocommerce_package_rates', 'njengah_hide_free_shipping_for_order_weight', 100, 2 );

Voici le résultat : méthode d'expédition avec condition

WooCommerce Comment masquer les tarifs d'expédition si la livraison gratuite est disponible WooCommerce

L'augmentation des méthodes d'expédition et leur disponibilité sur la page du panier, même lorsqu'elles ne sont pas requises, pourraient nuire à l'expérience utilisateur de votre site ou dérouter les acheteurs. Ceci, à son tour, réduit les ventes dans votre boutique WooCommerce.

Par exemple, si la livraison gratuite est disponible, vous ne voudrez peut-être pas afficher les autres options de livraison payantes. WooCommerce, par défaut, affiche tous les tarifs d'expédition qui correspondent à une zone d'expédition donnée, il n'est donc pas possible d'y parvenir à partir des seuls paramètres. Vous avez besoin de PHP pour cela.

Je vais vous montrer comment désactiver toutes les méthodes d'expédition sauf "Livraison gratuite" afin que la livraison gratuite reste le seul choix possible. panier avec plusieurs options d'expédition

Ajoutez le code suivant dans le fichier functions.php :

 /**

  * Masquez une option d'expédition dans une zone lorsque la livraison gratuite est disponible

 */

 add_filter( 'woocommerce_package_rates', 'njengah_unset_shipping_when_free_is_available_in_zone', 10, 2 );

   function njengah_unset_shipping_when_free_is_available_in_zone( $rates, $package ) {

      // Uniquement les tarifs non définis si free_shipping est disponible

 if ( isset( $rates['free_shipping:8'] ) ) {

      unset( $tarifs['flat_rate:1'] );

 }   

   retourner $rates ;

   }

Annulez tous les tarifs d'expédition dans toutes les zones lorsqu'un tarif d'expédition gratuit est disponible en ajoutant le code suivant dans le fichier functions.php :

 /**

* Masquez TOUS les tarifs d'expédition dans TOUTES les zones lorsque la livraison gratuite est disponible

*/

add_filter( 'woocommerce_package_rates', 'njengah_unset_shipping_when_free_is_available_all_zones', 10, 2 );

function njengah_unset_shipping_when_free_is_available_all_zones( $rates, $package ) {

$all_free_rates = array();

foreach ( $tarifs as $rate_id => $rate ) {

if ( 'free_shipping' === $rate->method_id ) {

$all_free_rates[ $rate_id ] = $rate ;

Pause;

}

}

si (vide($all_free_rates)) {

retourner $rates ;

} autre {

renvoie $all_free_rates ;

}

}

Voici le résultat : livraison gratuite

Masquer la page du panier WooCommerce

Le panier WooCommerce est une page essentielle où les utilisateurs peuvent empiler ce qu'ils veulent acheter sur le site Web, puis simplement payer en payant en ligne. Il agit comme le panier d'achat normal dans un magasin. Les gens peuvent continuer à ajouter ce qu'ils veulent acheter dans le panier, et plus tard, payer au comptoir.

Laissez-moi vous montrer comment vous pouvez masquer différents éléments sur cette page.

WooCommerce Masquer le bouton du panier de mise à jour

Si vous connaissez WooCommerce, vous savez que si un client a ajouté un produit à son panier et a décidé de modifier la quantité, la seule façon dont la commande peut être reflétée avec ce changement est de cliquer sur le bouton de mise à jour du panier.

Il ne s'agit que d'une autre étape pour votre client, qui souhaite probablement voir le total mis à jour. Par conséquent, cette fonctionnalité doit être optimisée pour gagner du temps.

Voici comment le bouton Mettre à jour s'affiche sur la page Panier : Bouton de mise à jour du panier WooCommerce

Pour masquer le bouton Mettre à jour le panier, ajoutez le CSS suivant dans la section CSS supplémentaire :

 entrée[name='update_cart'] {

 affichage : aucun ! important ;

 }

 /* OU VOUS POUVEZ ESSAYER CECI */

 bouton[name='update_cart'] {

affichage : aucun ! important ;

 }

Voici le résultat : masquer le bouton du panier de mise à jour

Vous pouvez aller plus loin et "cliquer" sur le bouton via JQuery et laisser WooCommerce mettre à jour les totaux du panier et les taxes.

WooCommerce Masquer le sous-total

Si vous souhaitez masquer la ligne de sous-total dans la page du panier WooCommerce, vous pouvez soit utiliser CSS, soit utiliser un crochet de filtre qui annule la valeur cart_subtotal. Il est très facile d'implémenter cette solution dans votre thème.

Le sous-total est affiché avant que d'autres frais ne soient ajoutés comme l'expédition afin que nous ayons un total qui est une combinaison de tous les coûts du produit comme indiqué dans l'image ci-dessous : Woocommerce masquer le sous-total ou supprimer le sous-total du panier dans WooCommerce

Si vous souhaitez masquer cette section, vous devez envisager d'ajouter le code CSS suivant dans la section CSS supplémentaire :

 .cart-sous-total {

       affichage : aucun ;

 }

Voici comment vous pouvez extraire l'élément que nous devons changer : Woocommerce masquer le sous-total ou supprimer le sous-total du panier dans WooCommerce

Comment masquer le champ du code de coupon WooCommerce

Offrir des coupons aux clients fidèles est un excellent moyen pour les propriétaires de magasins WooCommerce de redonner à la communauté. Grâce à ces coupons, ils peuvent offrir des récompenses ou des remises comme incitation à l'achat. C'est juste une façon pour les propriétaires de magasins WooCommerce de vous remercier d'avoir acheté leurs produits. emplacement par défaut du champ du coupon

Vous n'avez pas besoin de montrer ou de former vos clients sur la façon de rechercher des remises ou des coupons, car ils pourraient abandonner votre panier pour rechercher des coupons disponibles dans votre magasin.

Lorsque les utilisateurs partent à la recherche de coupons, ils peuvent ne pas effectuer un achat car ils peuvent ne pas être satisfaits car ils ont l'impression d'avoir raté une remise.

Vous pouvez masquer complètement le code de coupon à l'aide de l'option intégrée WooCommerce ou du script PHP personnalisé suivant que vous devez ajouter dans le fichier functions.php :

 // masque le champ du coupon sur la page du panier

 function disable_coupon_field_on_cart( $enabled ) {

             si ( est_cart() ) {

                         $activé = faux ;

             }

             retourne $activé ;

 }

 add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_cart' );

Pour voir le résultat de ce code, vous devez accéder à la page du panier, et vous verrez ceci : champ de coupon désactivé

WooCommerce Masquer la page de paiement

Le processus de paiement est l'une des étapes les plus importantes du parcours client dans votre magasin. Cependant, il est important de noter que c'est la dernière chance dont vous disposez pour convaincre les acheteurs de faire un achat. De nombreux clients peuvent abandonner votre boutique à cause de cette page. Par conséquent, cette page doit être optimisée.

Une façon d'optimiser votre page de paiement consiste à personnaliser les champs de paiement en fonction des besoins de votre entreprise et de votre public cible. Par exemple, si vous ne vendez généralement pas à des entreprises, supprimez le champ Nom de l'entreprise.

Dans cette section, nous vous expliquerons comment masquer des éléments sur la page de paiement.

WooCommerce Masquer l'étiquette fiscale

Si vous souhaitez supprimer le "ex. TVA » qui apparaît dans les détails de la commande sur les factures, cette section est pour vous. Si votre boutique WooCommerce vend des articles hors taxe, vous n'avez pas besoin d'un avis indiquant que le prix est hors taxe, surtout si la facture contient un élément de ligne de taxe. étiquette fiscale

Aux États-Unis, les sous-totaux sont généralement affichés hors taxes. La taxe est incluse en tant que poste sur les factures. Cela signifie que les magasins qui vendent uniquement aux États-Unis n'ont généralement pas besoin de cette étiquette dans les factures par e-mail.

Pour supprimer les étiquettes, ajoutez le code suivant au bas du fichier functions.php :

 function njengah_change_email_tax_label( $label ) {

    $étiquette = '';

     retourne $étiquette ;

 }

 add_filter( 'woocommerce_countries_ex_tax_or_vat', 'njengah_change_email_tax_label' );

Désormais, le tableau des détails de la commande renverra uniquement les montants sans étiquette incluse pour indiquer que les prix sont affichés hors taxes : Masquer les étiquettes fiscales WooCommerce

Comment masquer l'icône PayPal sur la page de paiement WooCommerce

L'une des meilleures passerelles de paiement WooCommerce que vous devriez inclure dans votre boutique est PayPal. De nombreux utilisateurs font confiance à cette passerelle en raison de ses politiques de retour. Par conséquent, vous devez ajouter ce mode de paiement à votre boutique WooCommerce pour augmenter vos conversions.

L'une des lacunes de la passerelle WooCommerce PayPal est l'icône qui s'affiche sur le frontend. La plupart des utilisateurs veulent souvent s'en débarrasser car cela ne correspond pas à la conception de leurs thèmes. Icône PayPal par défaut

Vous pouvez modifier le filtre pour masquer l'icône PayPal en renvoyant une chaîne vide, comme indiqué dans l'extrait de code ci-dessous :

 /**

 * Masquer le filtre d'icône PayPal

*/

 add_filter( 'woocommerce_paypal_icon', 'njengah_hide_the_paypal_icon' );

  function njengah_hide_the_paypal_icon() {

   retourner '';

}

Alternativement, vous pouvez masquer l'icône PayPal à l'aide de CSS. Vous pouvez également modifier l'icône WooCommerce PayPal sur la page de paiement.

Voici le résultat : supprimer complètement l'icône PayPal

WooCommerce Masquer le champ du nom de l'entreprise lors du paiement

Il existe de nombreuses raisons pour lesquelles vous souhaiterez peut-être masquer le champ Nom de l'entreprise de WooCommerce Checkout. Champ Nom de l'entreprise sur la page de paiement

L'une des situations qui peut vous obliger à masquer ce champ est la vente aux consommateurs plutôt qu'aux entreprises. Si vous possédez une boutique WooCommerce axée sur le consommateur, le fait d'avoir le champ du nom de l'entreprise ne fait que compliquer votre commande. Cela pourrait semer la confusion chez les clients s'ils ne savent pas s'il doit être rempli ou non.

Pour masquer le champ Company Name, ajoutez le code suivant en bas du fichier functions.php :

 /**

 * @ snippet Masquer le champ Nom de l'entreprise de la page de paiement

 */

 add_filter( 'woocommerce_checkout_fields' , 'remove_company_name' );

 function remove_company_name( $fields ) {

      unset($fields['billing']['billing_company']);

      renvoie $champs ;

 }

Vous pouvez apprendre comment le code fonctionne ici.

Ce sera le résultat sur le front-end : WooCommerce masque le champ de paiement du nom de l'entreprise sur la page de paiement

WooCommerce Masquer les champs de facturation

WooCommerce ajoute un formulaire permettant au client de saisir ses informations de facturation par défaut. Cependant, vous souhaiterez peut-être supprimer une section des détails de facturation pour certains produits dans certains cas. Par exemple, vous pouvez masquer les champs de facturation pour les produits téléchargeables. Détails de la facturation

Vous pouvez utiliser un plugin comme les prix de WooCommerce Checkout Field Editor à 49 $. Cependant, cela pourrait être un peu cher.

Les détails de facturation que nous allons cacher sont :

  • Nom
  • Société
  • Adresse
  • Ville
  • Code postal
  • État
  • Téléphoner
  • Pays

Pour supprimer les détails de facturation de WooCommerce Checkout, ajoutez le code suivant au bas du fichier functions.php :

 /**

 * @snippet Simplifiez le paiement si seuls les produits virtuels

*/

 add_filter( 'woocommerce_checkout_fields' , 'njengah_simplify_checkout_virtual' );

 function njengah_simplify_checkout_virtual( $fields ) {

    $uniquement_virtuel = vrai ;

    foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {

       // Vérifie s'il y a des produits non virtuels

      if ( ! $cart_item['data']->is_virtual() ) $only_virtual = false; 

   }

     if( $only_virtual ) {

        unset($fields['billing']['billing_company']);

        unset($fields['billing']['billing_address_1']);

        unset($fields['billing']['billing_address_2']);

        unset($fields['billing']['billing_city']);

        unset($fields['billing']['billing_postcode']);

        unset($fields['billing']['billing_country']);

        unset($fields['billing']['billing_state']);

        unset($fields['billing']['billing_phone']);

        add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );

      }

     renvoie $champs ;

 }

Voici le résultat : Supprimer les champs de facturation

WooCommerce Masquer l'inscription

WooCommerce vous permet de configurer une connexion directement, avec ou sans inscription obligatoire et connexion sociale. De plus, il existe de nombreux types de connexion WooCommerce, que vous pouvez ajouter à votre boutique.

Le terme "Connexion WooCommerce" est le processus par lequel les clients se connectent à votre boutique en ligne. Cependant, il s'agit d'un terme assez vague et il existe plusieurs façons de le définir.

Comment masquer le formulaire d'inscription WooCommerce

Il existe différents types de connexion WooCommerce :

  • Boutique WooCommerce publique avec paiement en tant qu'invité - Cette configuration permet à quiconque de parcourir les produits de votre boutique. Il n'y a pas de contenu caché.
  • Boutique WooCommerce publique avec comptes d'utilisateurs obligatoires - Les clients doivent s'inscrire ou se connecter à leurs comptes pour acheter des produits.
  • Portail client avec catégories de produits protégées – Cette configuration utilise une protection par mot de passe sur différentes parties du magasin.
  • Boutique WooCommerce privée – Cachez toute la boutique .

Pour masquer l'enregistrement de l'utilisateur lors du paiement WooCommerce, accédez à WooCommerce > Paramètres. On the settings page, click on the Accounts and Privacy tab. Untick or uncheck the fields in orange:

You can learn how you can move the registration below to the billing section at the WooCommerce Checkout.

WooCommerce Masquer le pied de page

Masquer construit avec vitrine et WooCommerce

L'une des étapes de l'assistant d'intégration de WooCommerce vous permet d'installer le thème Storefront WooCommerce, ce qui est une bonne chose. Si vous avez l'intention de conserver le thème comme thème de votre boutique WooCommerce, vous devez le personnaliser.

L'un des problèmes les plus courants de ce thème est les liens de crédit de pied de page persistants que de nombreux utilisateurs souhaiteraient supprimer ou remplacer. Vous pouvez également ajouter d'autres fonctionnalités personnalisées telles que les méthodes de paiement prises en charge, les icônes sociales, l'avis de cookie et bien plus encore.

Si vous souhaitez supprimer les liens de pied de page, ajoutez le code suivant en bas de votre fichier functions.php :

remove_action('storefront_footer', 'storefront_credit',20);

N'oubliez pas d'enregistrer les modifications que vous apportez.

Vous pouvez apprendre à utiliser la fonction de thème enfant pour remplacer le lien de pied de page afin de pouvoir ajouter vos propres liens de crédit.

Conclusion

En résumé, cet article explique comment vous pouvez masquer différents éléments. Comme vous pouvez le constater, vous pouvez toujours masquer tous les éléments WooCommerce en fonction de vos objectifs ou de votre expérience en programmation.

Vous pouvez placer des extraits PHP au bas des fonctions de votre thème enfant. CSS, d'autre part, va dans le fichier style.css de votre thème enfant. Assurez-vous de savoir ce que vous faites lorsque vous modifiez de tels fichiers. Il s'agit d'un guide de niveau de code, et si vous rencontrez des problèmes, veuillez envisager de faire appel à un développeur WordPress qualifié.

Articles similaires