Comment offrir la livraison gratuite uniquement pour certains produits dans WooCommerce

WooCommerce permet de définir des frais de livraison fixes ou gratuits, mais il n’offre pas nativement la possibilité d’accorder la livraison gratuite uniquement pour certains produits. Dans ce petit tuto, nous allons voir comment ajouter cette fonctionnalité en modifiant le fichier functions.php de votre thème enfant ou en utilisant un plugin comme Code Snippets.

1. Ajouter une option « Livraison gratuite » dans l’administration WooCommerce

Il faut ajouter une case à cocher dans la fiche produit pour indiquer si un produit bénéficie de la livraison gratuite ou pas.

Ajoutez ce code dans votre fichier functions.php ou via un plugin de snippets :

// Ajouter une option "Livraison Gratuite" dans WooCommerce
add_action('woocommerce_product_options_shipping', 'add_free_shipping_checkbox');
function add_free_shipping_checkbox() {
    woocommerce_wp_checkbox(array(
        'id' => '_free_shipping',
        'label' => 'Livraison gratuite pour ce produit',
        'description' => 'Cocher cette case pour offrir la livraison gratuite sur ce produit.',
    ));
}

// Sauvegarder l'option de livraison gratuite
add_action('woocommerce_admin_process_product_object', 'save_free_shipping_checkbox');
function save_free_shipping_checkbox($product) {
    $free_shipping = isset($_POST['_free_shipping']) ? 'yes' : 'no';
    $product->update_meta_data('_free_shipping', $free_shipping);
}
  • Ce code ajoute une case à cocher dans l’onglet Expédition des fiches produits WooCommerce.
  • La valeur est enregistrée dans les métadonnées du produit.

2. Appliquer automatiquement la livraison gratuite aux produits éligibles

Une fois que nous avons défini quels produits doivent bénéficier de la livraison gratuite, nous devons masquer les autres modes de livraison lorsque ces produits sont dans le panier.

Ajoutez ce code dans functions.php :

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

function custom_free_shipping_for_selected_products($rates, $package) {
    $free_shipping_available = false;

    foreach ($package['contents'] as $item) {
        $product_id = $item['product_id'];
        $free_shipping = get_post_meta($product_id, '_free_shipping', true);

        if ($free_shipping === 'yes') {
            $free_shipping_available = true;
            break;
        }
    }

    if ($free_shipping_available) {
        // Supprimer toutes les autres méthodes sauf la livraison gratuite
        foreach ($rates as $rate_id => $rate) {
            if ('free_shipping' !== $rate->method_id) {
                unset($rates[$rate_id]);
            }
        }
    }

    return $rates;
}
  • Le code vérifie si au moins un produit éligible à la livraison gratuite est dans le panier.
  • Si oui, toutes les autres méthodes de livraison sont masquées sauf la livraison gratuite.

Test et vérification

  1. Allez dans WooCommerce > Produits et éditez un produit.
  2. Dans l’onglet Expédition, cochez la case « Livraison gratuite pour ce produit » et enregistrez.
  3. Ajoutez ce produit au panier et vérifiez que WooCommerce n’affiche plus les autres frais de livraison.
  4. Ajoutez un produit non éligible et vérifiez que les frais de livraison normaux s’affichent.

Avec ce code, WooCommerce applique automatiquement la livraison gratuite uniquement pour les produits sélectionnés. Cela permet de personnaliser votre stratégie de livraison et d’offrir des avantages exclusifs sur certains produit et sans plugin !

Le guide de l’UX design dans Woocommerce

En tant que UX Designer vous travaillez avec les chefs de produits, les développeurs ou encore les graphistes pour créer des prototypes. Vous êtes chargé de rendre l’expérience des visiteurs d’une boutique en ligne aussi agréable que possible. Cela signifie que les utilisateurs doivent pouvoir trouver ce qu’ils recherchent rapidement et facilement. Ils doivent également être en mesure de réaliser l’action qu’ils souhaitent sur le site, comme acheter un produit, service ou s’inscrire à un programme d’adhésion. Pour y parvenir, vous devez penser aux besoins de l’utilisateur à chaque étape de sa visite. L’objectif est de faire en sorte qu’il trouve facilement ce qu’il cherche, qu’il passe en douceur à la caisse et qu’il revienne régulièrement sur votre site. Woocommerce est l’une des plateformes de commerce électronique les plus populaires du moment, avec plus de 400 000 sites actifs. Dans cet article, nous examinons comment les règles de conception UX peuvent vous aider à améliorer une boutique en ligne avec Woocommerce, quel que soit le stade auquel vous vous trouvez dans votre processus de conception.

Recherche de l’utilisateur

La recherche de produits est un élément clé du parcours de l’utilisateur. Cela peut se faire de plusieurs façons :

  • Catégories de produits : Si un utilisateur sait quel type de produit il recherche, il peut parcourir vos catégories de produits. Si les catégories sont mal conçues, ce processus peut être difficile et frustrant. Donc pensez a bien structurer vos catégories !
  • Recherche de produits : Si un visiteur ne sait pas ce qu’il veut, il peut vouloir rechercher un produit spécifique. Une bonne fonction de recherche doit être facile à trouver et rapide à utiliser. Si un utilisateur ne trouve pas ce qu’il cherche, le problème peut venir de votre moteur de recherche.
  • Vous pouvez utilisez le plugin : Advanced Product Search For WooCommerce
  • Filtrage des produits : Si un utilisateur a un produit spécifique en tête, il peut vouloir filtrer les produits sur votre site pour trouver ceux qui correspondent à ses besoins. De mauvaises options de filtrage ou un manque de filtres peuvent rendre ce processus difficile.
  • Vous pouvez utilisez le plugin : plugin WOOF – products filter for Woocommerce

Définissez les besoins de votre utilisateur

Lorsque vous savez qui sont vos utilisateurs, vous pouvez rendre votre site plus facile à naviguer pour eux en le concevant pour leurs besoins particuliers. L’analyse des visiteurs consiste à apprendre à connaître votre public cible au moyen de statistiques et de personas.

Statistiques : Les données quantitatives recueillies auprès d’un large échantillon de visiteurs de sites Web peuvent éclairer vos décisions de conception, mais il peut être difficile d’appliquer ces données à un utilisateur spécifique.

Le plugin officiel Google Analytics pour WooCommerce est très bien pour suivre l’activité de vos utilisateurs.

Connaissez votre public

Connaître les données démographiques de vos utilisateurs peut vous aider à prendre des décisions de conception, mais ce n’est pas le seul facteur à prendre en compte. Vous devez également prendre en compte leurs attitudes, leurs comportements et leurs besoins. Analysez vos données analytiques. Posez-vous les questions suivantes :

  • Quels appareils vos visiteurs utilisent-ils ?
  • À quel moment de la journée visitent-ils votre site ?
  • Quel chemin parcourent-ils sur votre site ?
  • Combien de temps restent-ils sur chaque page ?
  • Sur quoi cliquent-ils ?
  • Qu’est-ce qu’ils ignorent ?

Bien que vous ne puissiez pas satisfaire tout le monde, en comprenant qui est votre visiteur type, vous pouvez créer une meilleure expérience pour lui.

Esquisse et création d’un fil de discussion

Lorsque vous esquissez et créez votre fil conducteur, pensez à la façon dont vos visiteurs se déplaceront sur votre site et à ce qu’ils vivront à chaque étape.

  • Chemin : Décidez du chemin que vos visiteurs emprunteront sur votre site. Ce parcours peut être différent pour chaque personne, mais il peut aussi être déterminé par le type de produit ou de service que vous proposez et par vos objectifs commerciaux.
  • Pages clés : Créez une liste des pages clés qui, selon vous, sont les plus importantes pour vos visiteurs.
  • Parcours de l’utilisateur : Examinez le parcours et les pages clés. Pensez à l’origine de vos visiteurs et à leur destination. Que veulent-ils atteindre ? Comment pouvez-vous les aider ?
  •  Travailler à rebours : Vous n’êtes pas obligé de commencer votre processus de conception à partir de zéro. Commencez par créer une carte du parcours de l’utilisateur pour identifier les problèmes à résoudre. Ensuite, commencez à travailler à rebours, en vous référant à votre parcours utilisateur au fur et à mesure.

Conception de l’interface utilisateur : À quoi faut-il s’attendre ?

Lorsque vous créez vos conceptions d’interface utilisateur, gardez ces conseils à l’esprit.

  • Modèles : Utilisez des modèles pour créer une expérience familière pour les visiteurs de votre site afin qu’ils sachent à quoi s’attendre.
  • Hiérarchie : Créez une hiérarchie visuelle qui guide l’attention de vos visiteurs vers les éléments les plus importants de chaque page.
  • Couleur : La couleur peut avoir un impact significatif sur la façon dont les gens perçoivent votre site, choisissez donc vos couleurs avec soin.
  • Structure : La structure de votre site doit soutenir vos objectifs commerciaux et le parcours de vos visiteurs.

Conclusion

On peut donc conclure que l’expérience utilisateur doit être soigneusement prise en compte lors du processus de conception afin de répondre aux attentes des utilisateurs et d’attirer davantage de clients et de ventes. En prenant le temps de réfléchir à la manière dont les visiteurs interagissent avec votre site Web, vous pouvez concevoir une expérience qui résonne avec votre marque et encourage le bon type de visiteur à s’inscrire ou à acheter.

Comment supprimer le fil d’Ariane de la page d’accueil dans Storefront/Woocommerce.

Storefront est le thème le plus adapté pour créer un site e-commerce avec Woocommerce. Storefront affiche par défaut la navigation par fil d’Ariane en haut de chaque page de produit. Mais il n’est pas nécessaire le l’avoir sur la page d’accueil.

Avec cette astuce, nous verrons comment supprimer complètement la navigation par fil d’Ariane sur la page d’accueil du thème Storefront WooCommerce.

Ajouter le code suivant dans le fichier function.php du thème Storefront.

add_action( 'init', 'naxialis_remove_storefront_breadcrumbs' );
 
function naxialis_remove_storefront_breadcrumbs() {
	
	if ( is_home() && ! is_front_page() ) :
	
   remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
	
	endif;
}

Puis cette ligne de code css dans le fichier style.css pour supprimer la marge sous l’entête.

.home.page:not(.page-template-template-homepage) .site-header { margin-bottom: 0;}

Comment ajouter automatiquement un produit lors de la visite d’une page spécifique Woocommerce

Avec le code ci-dessous lorsqu’un utilisateur visitera une page spécifique de votre boutique le produit sera ajouter automatiquement au panier.

 

  • Il vous récupérer l’ID de la page à visiter.
  • Récupérer l’ID du produit à ajouter automatiquement au panier

Pour les articles et page produit utiliser is_single a la place de is_page

 

/**
 * @author        Naxialis
 * @tester    	  WooCommerce 6.3.1
 */
 
add_action( 'wp', 'naxialis_add_product_to_cart_on_page_id_load' );
  
function naxialis_add_product_to_cart_on_page_id_load() {
          
   // Identifiant du produit a ajouter au panier
   $product_id = 1145;
 
   // Identifiant de la page visiter - utiliser is_single pour les article et page produit         
   if ( is_page( 2356 ) ) {    
      WC()->cart->empty_cart();
      WC()->cart->add_to_cart( $product_id ); 
   }
    
}

Comment afficher le prix total selon la quantité sur page produit dans Woocommerce

Avec le code ci-dessous lorsque l’acheteur choisira une quantité supérieure à 1, Le total vas s’afficher à côté du bouton « Ajouter au Panier », l’acheteur sera immédiatement le prix total sans avoir à ensuite se référer à la page Panier.

 

 

/**
 * @author        Naxialis
 * @tester        WooCommerce 6.3.1
 * @url           https://naxialis.com
 */
 
add_action( 'woocommerce_after_add_to_cart_button', 'naxialis_product_price_recalculate' );
 
function naxialis_product_price_recalculate() {
   global $product;
   echo '
Total:
'; $price = $product->get_price(); $currency = get_woocommerce_currency_symbol(); wc_enqueue_js( " $('[name=quantity]').on('input change', function() { var qty = $(this).val(); var price = '" . esc_js( $price ) . "'; var price_string = (price*qty).toFixed(2).replace(".", ","); $('#subtot > span').html(price_string+' " . esc_js( $currency ) . "'); }).change(); " ); }

Comment déplacer le champ email vers le haut du formulaire de la page de paiement dans Woocommerce

Pour déplacer le champ email du formulaire sur la page de paiement de votre boutique avec Woocommerce, ajouter le code ci-dessous dans le function.php de votre thème. Le code code vas changer la priorité du du champs email.

 

 

/**
 * @url           https://naxialis.com
 * @author        Naxialis
 * @tester        Woo 6.3.1
 * 
 */
  
add_filter( 'woocommerce_billing_fields', 'bbloomer_move_checkout_email_field' );
 
function bbloomer_move_checkout_email_field( $address_fields ) {
    $address_fields['billing_email']['priority'] = 1;
    return $address_fields;
}

Comment masquer la liste déroulante du mini panier dans Woocommerce

Pour masquer la liste déroulante des produits du panier dans le menu, ajouter le code ci-dessous dans le fichier function.php de votre thème WordPress.

/**
 * @sourcecode    https://naxialis.com
 * @author        Naxialis
 * @tester        WooCommerce 6.3.1
 */
 
add_filter( 'woocommerce_widget_cart_is_hidden', '__return_true' );

Comment définir le poids maximum dans les commandes Woocommerce

Dans certains cas, vous avez besoin de limiter Le poids de vos produits dans le paner sur votre boutique WooCommerce. Je vous montre comment définir un poids maximum de vos produits dans les commandes.

Ajouter le code ci-dessous dans le fichier function.php de votre thème WordPress :

add_action('woocommerce_check_cart_items','check_cart_weight');

function check_cart_weight(){
global $woocommerce;
$weight = $woocommerce->cart->cart_contents_weight;
if( $weight > 2 ){ // Induquez le poids ici exemple 2kg
wc_add_notice( sprintf( __( 'Pour les commandes supérieures a 2kg merci de me contacter.', 'woocommerce' ), $weight ), 'error' );
}
}

;

Intégration Ingenico / Ogone dans Woocommerce

Ingenico ePayments est la solution de paiement présente dans 200 pays et adopté par 60 000  e-commerçant et présent sur les terminaux de paiement des commerçants. Dans ce tuto je vais vous apprendre comment intégrer Ingenico dans votre site e-commerce avec woocommerce.

 

Votre compte Ingénico

Si vous êtes commerçant et que vous disposez un contrat avec Ingénico pour votre TPE vous devrez créer un second compte qui sera dédié à votre boutique en ligne (Ingenico ePayments), car les paramètre ne sont pas les mêmes que les TPE.

 

La passerelle de paiement Ingenico pour woocommerce

 

Il existe plusieurs plugins payant et gratuit :

 

Pour ce tuto je vais utiliser le plugin Pronamic Pay version gratuite qui convient très bien pour l’intégration d’un paiement par carte bancaire.  Après la création et validation de votre compte Ingenico vous aurez deux accès un compte test pour faire des essais de paiement et un compte réel, les deux se paramètre de la même façon seul les accès sont différents.

Connectez-vous à votre compte Ingenico pour récupérer les informations suivantes :

  • ID utilisateur API
  • SHA-IN Pass phrase
  • SHA-OUT Pass phrase
  • Sélection de Algorithme de hachage

Le PSPID et le mot de passe vous ai fourni par Ingenico.

 

ID utilisateur API

Pour récupérer votre ID Utilisateur vous allez dans Configuration —> Mot de passe.

 

SHA-IN Pass phrase

Pour récupérer votre SHA-IN Pass phrase vous allez dans Configuration —> information technique —> Contrôle de données et d’origine. Puis dans contrôles pour e-commerce indiquer l’url de votre boutique. Puis dans Clé SHA-IN cliquer sur visible pour la récupérer.

 

 

SHA-OUT Pass phrase

Pour récupérer votre SHA-IN Pass phrase vous allez dans Configuration —> information technique —> Retour d’information sur la transaction. Dans cette partie vous laissez les paramètres par défaut sauf dans la section Paramètres dynamiques du commerce en ligne où vous ajouté les commandes suivantes :

- ACCEPTANCE
- AMOUNT
- BRAND
- CARDNO
- CN
- COMPLUS
- CURRENCY
- DCC_COMMPERCENTAGE
- DCC_CONVAMOUNT
- DCC_CONVCCY
- DCC_EXCHRATE
- DCC_EXCHRATESOURCE
- DCC_EXCHRATETS
- DCC_INDICATOR
- DCC_MARGINPERCENTAGE
- ED
- IP
- NCERROR
- ORDERID
- PAYID
- PAYIDSUB
- PM
- STATUS

Puis faite sauvegarder.

Ensuite allez dans la section Tous les modes de soumission pour récupérer votre Clé SHA-OUT cliquer sur visible pour l’obtenir.

 

 

Sélection de Algorithme de hachage

Pour sélectionner l’algorithme de hachage vous allez dans Configuration —> information technique —> Paramètres globaux de sécurité et vous sélectionner SHA-256 et sauvegarder.

 

 

Maintenant que vous avez toutes les informations techniques installer le plugin Pronamic Pay puis activé le, vous aurez un onglet payer dans le menu admin de wordpress avec les sous-menus suivant :

  • Tableau de bord
  • Paiement
  • Abonnements
  • Rapports
  • Formulaire
  • Configurations
  • Réglages

Allez dans configurations puis faite ajouter (Configurations de passerelle de paiement)

  • Prestataire pour le paiement: Sélectionner Ingenico/Ogone – e-Commerce
  • Modus vous sélectionner live pour le paiement réel
  • Sélectionnez l’algorithme de hachage : SHA-256

Puis dans générale complétez les informations suivantes récupéré sur votre compte Ingenico :

  • PSPID
  • ID utilisateur API
  • Votre mot de passe utilisateur API
  • SHA-IN Pass phrase
  • SHA-OUT Pass phrase

 

Ensuite faite un test dans la section Test ajouté un montant quelconque puis cliquer sur Test pour vérifier la passerelle entre votre site et Ingenico.

 

IMAGE

 

Réglage Woocommerce

 

Une fois les vérifications faites, vous allez activez le paiement par carte bancaire dans woocommerce :

Woocommerce  puis Réglages et l’onglet ‘ Paiement ‘  Activé  Pronamic – Carte de crédit

 

Maintenant vous disposé d’un paiement par carte bancaire pour votre boutique en ligne.