WordPress

Dans le cadre de la création de votre site internet e-commerce, vous pourriez avoir besoin d’ajouter un supplément au panier et à la caisse ? Effectivement, un site Web doit constamment être peaufiné et ne doit en aucun cas être laissé à l’abandon. Au contraire, il existe énormément de plugins qui permettent d’améliorer l’interface et les fonctionnalités de vos pages.

Ceci dit, ces extensions ont tendance à être limitées. Mais, vous pouvez heureusement optimiser ces dernières à l’aide de codes extrêmement efficaces. Par exemple, votre boutique en ligne WooCommerce peut devenir davantage performante en utilisant ces remarquables astuces. C’est ce que nous proposons de voir ci-dessous à travers des snippets très utiles qui faciliteront vos affaires.

Ajouter un Supplément au Panier et à la Caisse à Toutes Les Transactions

• Ajouter un Supplément Basé Sur un Pourcentage au Panier et à la Caisse

Afin de mettre à exécution ce snippet, vous devez intégrer le code suivant dans le fichier « functions.php » de votre thème enfant (la mention « Frais supplémentaires » dans le code peut être modifiée) :

/**
     * Ajoutez un supplément de 1% à votre panier / caisse
     * modifiez le pourcentage $ pour définir le supplément à une valeur adaptée
     */
     add_action( 'woocommerce_cart_calculate_fees','woocommerce_custom_surcharge' );
     function woocommerce_custom_surcharge() {
       global $woocommerce;

	if ( is_admin() && ! defined( 'DOING_AJAX' ) )
		return;

	$percentage = 0.01;
	$surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;	
	$woocommerce->cart->add_fee( 'Frais supplémentaires', $surcharge, true, '' );
    }

• Ajouter un Supplément de Valeur Standard Dans le Panier et à la Caisse

Pour ce faire, il convient d’insérer le code ci-dessous dans le fichier « functions.php » de votre thème enfant (la mention « Frais supplémentaires » dans le code peut être modifiée) :

/**
     * Ajoutez un supplément de valeur standard à toutes les transactions dans le panier / la caisse
     */
     add_action( 'woocommerce_cart_calculate_fees','wc_add_surcharge' ); 
     function wc_add_surcharge() { 
     global $woocommerce; 

     if ( is_admin() && ! defined( 'DOING_AJAX' ) ) 
     return;

     $county = array('US');
     // modifiez les frais $ pour définir le supplément à une valeur adaptée
     $fee = 1.00;

      if ( in_array( WC()->customer->get_shipping_country(), $county ) ) : 
     $woocommerce->cart->add_fee( 'Frais supplémentaires', $fee, true, 'standard' );  
     endif;
    }

Ajouter un Supplément Basé Sur le Pays de Livraison

Ce snippet vous permet d’ajouter un supplément en pourcentage au panier et à la caisse en fonction du pays où vous livrez vos produits. Pour réaliser cette manœuvre, vous devez écrire le code suivant dans le fichier « functions.php » de votre thème enfant (la mention « Frais supplémentaires » dans le code peut être modifiée)  :

/**
     * Ajoutez un supplément de 1% à votre panier / caisse en fonction du pays de livraison
     * Les taxes, les frais d'expédition et le sous-total de la commande sont tous inclus dans le montant du supplément
     */
add_action( 'woocommerce_cart_calculate_fees','woocommerce_custom_surcharge' );
function woocommerce_custom_surcharge() {
  global $woocommerce;
 
	if ( is_admin() && ! defined( 'DOING_AJAX' ) )
		return;

 	$county 	= array('US');
	$percentage 	= 0.01;

	if ( in_array( $woocommerce->customer->get_shipping_country(), $county ) ) :
		$surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;
		$woocommerce->cart->add_fee( 'Frais supplémentaires', $surcharge, true, '' );
	endif;
 
}

J’espère que cet article t’aura aidé à atteindre ton objectif . Qu’Allah vous préserve.

Saviez-vous que le fait d’ajouter la catégorie produit aux classes CSS dans la balise body dans WooCommerce s’avère intéressant ? C’est justement ce que nous allons vous expliquer dans les lignes suivantes. Après lecture de ce billet, vous saurez parfaitement utiliser un remarquable snippet qui vous permettra de réaliser cette tâche.

À Quoi Cela Sert-il d’Ajouter la Catégorie Produit Aux Classes CSS de la Balise Body Dans WooCommerce ?

Vous n’êtes certainement pas sans savoir que la balise HTML <body></body> consiste en la balise qui comprend la majeure partie des codes HTML de votre page. En effet, le développeur rassemble dans celle-ci les données nécessaires pour pouvoir afficher le contenu à vos visiteurs.

Ici, le but de ce snippet est d’entrer dans la balise <body> afin d’y intégrer une classe CSS différente dédiée à chaque catégorie de produit. À vrai dire, cette manœuvre va vous permettre de réaliser de nombreux changements sur votre magasin en ligne WooCommerce.

Entre autres, vous aurez la possibilité de modifier la couleur des textes. De même, vous pourrez changer la police et la couleur de fond de la page. De manière générale, vous serez capable de customiser entièrement votre boutique en ligne.

Quel Snippet Dois-je Employer ?

Pour exécuter cette formidable astuce, il vous faut copier-coller le code suivant dans le fichier « functions.php » de votre thème enfant :

/* Ajouter la catégorie produit aux class CSS de la balise body */

add_filter( 'body_class', 'wpm_wc_product_cats_css_body_class' );
 
function wpm_wc_product_cats_css_body_class( $classes ){

// On récupère les catégorie de produits 
if( is_singular( 'product' ) )
  {
    $custom_terms = get_the_terms(0, 'product_cat');
    if ($custom_terms) {
// On boucle sur les catégories de produits
      foreach ($custom_terms as $custom_term) {
//On ajoute une classe par catégorie de produits de la forme product_cat_catégorieproduit
        $classes[] = 'product_cat_' . $custom_term->slug;
      }
    }
}
  return $classes;
}

Pour avoir la garantie que votre manipulation a bien fonctionné, choisissez une ou deux catégories d’un produit de votre site. Ensuite, vérifiez si elles apparaissent bien dans la balise <body> de votre page en cliquant droit sur votre page, puis en cliquant sur « Inspecter » (il est conseiller d’utiliser Google Chrome).

Qu’Allah vous préserve !

Dans WooCommerce, vous n’avez pas la possibilité de changer le texte du bouton « Ajouter au panier » après l’ajout du produit. De plus en plus de propriétaires de boutiques en ligne cherchent à personnaliser le comportement de ce bouton quand l’article a déjà été ajouté au panier. Mais, quel est intérêt de procéder à une telle action ? Ci-dessous, nous vous expliquons l’avantage de cette manœuvre. En outre, nous vous dévoilons la façon d’intégrer cette fonction à votre site WooCommerce.

Les Avantages de Changer le Texte du Bouton « Ajouter au Panier » Après l’Ajout du Produit Dans WooCommerce

Tout d’abord, cette astuce se révèle être un atout pour le design de votre site. En effet, vous pouvez changer la police du texte ou ajouter un symbole plus esthétique et plus élégant. Ainsi, vous rendrez votre boutique en ligne plus sympathique et plus fantaisiste.

Par ailleurs, cette technique de marketing a tendance à être utile pour la gestion de votre business. De même, celle-ci peut être un moyen intéressant d’accroître votre chiffre d’affaires. Certes, le fait de faire passer un message dynamique et accrocheur peut convaincre vos clients à consommer davantage de produits.

Comment Dois-je m’y Prendre Pour Intégrer Cette Fonctionnalité ?

À titre d’exemple, vous avez la possibilité de remplacer le texte « Ajouter au panier » par le texte « Acheter à nouveau ». Pour ce faire, il vous suffit de copier-coller le code suivant dans le fichier « functions.php » de votre thème enfant :

/* Modifier le texte du bouton "Ajouter au panier" si le produit est déjà dans le panier */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpm_custom_cart_button_text' );

function wpm_custom_cart_button_text() {
    global $woocommerce;

// On récupère tous les produits présent dans le panier
    foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
        $_product = $values['data'];
// Si l'ID d'un des produits du panier correspond à l'ID du produit de la page produit sur laquelle on se trouve, on change le texte du bouton 
        if( get_the_ID() == $_product->id ) {
            return __('Acheter à nouveau ?', 'woocommerce');
        }
    }
// Si les ID ne correspondent pas, on laisse le texte standard de WooCommerce
    return __('Ajouter au panier', 'woocommerce');
}

Si vous possédez une idée plus originale, vous pouvez modifier le texte « Acheter à nouveau » par celui de votre choix. Ceci dit, nous vous invitons à nous faire part dans les commentaires en bas de page de vos suggestions ou de vos expériences sur l’emploi de cette fonctionnalité.

Qu’Allah vous assiste !

Si le besoin s’en fait sentir, vous pouvez tout à fait changer les lignes d’objet de vos e-mails. Globalement, on a envie de faire ce type de changement lorsque ce contenu ne fournit pas assez d’information pertinente à notre destinataire. De même, vous voudrez certainement modifier cela dans le cas où l’objet de l’e-mail est vide. Quoi qu’il en soit, rassurez-vous car vous réaliserez bientôt cette tâche sans aucune complication. Pour cela, il vous suffit d’utiliser les quelques astuces que nous vous offrons ci-dessous. …

Comment Modifier La Ligne « Objet » Des E-mails Envoyés Par WordPress ?Lire la suite »

Il arrive parfois qu’un développeur Web tombe sur une traduction impossible sur WordPress. En effet, il existe des thèmes et des plugins dont certains textes ne sont pas traduisibles ou que la traduction ne s’applique pas malgré qu’on l’ai traduite dans le fichier PO. Cela est d’autant plus valable lorsque le code source n’a pas prévu la modification de ces éléments. Généralement, vous pouvez facilement traduire la majorité des mots de votre site via le logiciel Poedit et l’extension Loco Translate.

Or, malgré l’utilisation de ces deux solutions, vous aurez tendance à bloquer sur la traduction d’une expression sur une page ou encore d’un bouton. Alors, devez-vous baisser les bras ? Sinon, quelles options vous reste-t-il ? Ci-dessous, nous vous dévoilons deux méthodes efficaces pour traduire n’importe quel contenu de votre site. …

Comment Réaliser Une Traduction Impossible Sur WordPress ?Lire la suite »

En affichant le nombre de produits vendus dans WooCommerce, vous pouvez augmenter considérablement votre chiffre d’affaires. Cependant, en quoi le fait de dévoiler le nombre de produits vendus va nous aider à booster nos ventes ? En effet, cette stratégie marketing s’appelle la « preuve sociale ».

Ceci dit, vous pouvez mettre en place cette fonctionnalité dans WooCommerce à travers un remarquable snippet. Dans les lignes suivantes, nous vous expliquons la marche à suivre.

L’Affichage du Nombre de Produits Vendus et la Preuve Sociale

En quoi consiste la preuve sociale ? En résumé, c’est un procédé marketing dont l’objectif est d’exposer un nombre de clients ayant déjà consommé un produit afin d’inciter d’autres personnes à passer à l’achat. Ainsi, si vous arrivez à montrer par exemple que plus d’un millier de clients ont acheté votre produit, cela créera un effet de garantie de la qualité du produit chez autrui.

Or, sachez que vous avez la possibilité d’utiliser cette technique sur votre boutique en ligne WooCommerce par le biais d’un snippet. Autrement dit, vous pourrez révéler le nombre de vos produits vendus sur votre page boutique ainsi que sur chaque page produit.

Les Différents Façons d’Employer le Snippet

Certes, vous avez devant vous la possibilité de mettre ce snippet en place de plusieurs manières différentes :

1. Sur les pages produits ;
2. Au niveau de la page boutique exclusivement ;
3. Au niveau de la page boutique et des pages produits ;
4. À partir d’un certain seuil.

• Les Pages Produits

Pour réaliser cette manœuvre, il suffit de copier-coller le code suivant dans le fichier « functions.php » de votre thème enfant :

/* Afficher le nombre de produit vendu sur les pages produits WooCommerce */

// On affiche le nombre de ventes sur la page produit
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 );
 
function wpm_product_sold_count() {
    global $product;

  //On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
  // On affiche notre texte personnalisé contenant le nombre de vente
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Pour personnaliser votre texte, vous pouvez remplacer la phrase « ‘produit vendu %s fois’ » par ce que vous souhaitez. En revanche, veillez à ne surtout pas retirer le « % s » figurant dans la phrase, car il s’agit de la variable comprenant le nombre de ventes des produits.

Enfin, n’hésitez pas à personnaliser cet affichage en insérant du code CSS dans le fichier « style.css » de votre thème enfant en modifiant la class CSS « wpm-sold-product ». Nous vous donnons un exemple ci-dessous :

/* CSS Affichage nombre de produits vendus */

.wpm-sold-product {
  font-weight: bold; /* On met le texte en gras */
  background-color: #cecece; /* On met une couleur de fond grise */
  text-align:center; /* On centre le texte */
  padding-top:10px; /* On met une marge interne supérieure de 10pixels */
  margin-bottom:10px; /* On met une marge externe inférieure de 10pixels  */
}

• La Page Boutique Exclusivement

Dans ce cas, il faut copier-coller le code suivant dans le fichier « functions.php » présent dans votre thème enfant :

/* Afficher le nombre de produit vendu sur la page boutique WooCommerce */

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page boutique
 
function wpm_product_sold_count() {
    global $product;

  //On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
  // On affiche notre texte personnalisé contenant le nombre de vente.
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

Enfin, vous pouvez styliser votre affichage avec du code CSS, comme suit :

/* CSS Affichage nombre de produits vendus */

.sold-product {
  font-weight: bold; /* On met le texte en gras */
  background-color: #2ea3f2; /* On met un fond bleu */
  color: white; /* On met le texte en blanc */
  text-align:center; /* On centre le texte */
  padding-top:10px; /* On met une marge interne supérieure de 10px */
  padding-bottom:10px!important; /* On met une marge interne inférieure de 10px */
  margin-bottom:10px; /* On met une marge externe inférieure de 10px */
  border-radius: 50px; /* On définit des coins arrondis de 50px  */
}

• La Page Boutique et Les Pages Produits

Ici, on va utiliser quasiment le même snippet. Cependant, nous allons écrire cette fois-ci deux « add_action() ». Voici le code à copier-coller dans le fichier « functions.php » présent dans votre thème enfant :

/* Afficher le nombre de produit vendu sur les pages produits et boutique WooCommerce */

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page boutique
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count', 11 ); // On l'affiche ici sur la page produit
 
// Le code ensuite est le meme que précédemment
function wpm_product_sold_count() {
    global $product;

  //On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
  // On affiche notre texte personnalisé contenant le nombre de ventes
    echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
}

• À Partir D’un Certain Seuil

Le fait d’afficher un petit nombre de produits vendus n’est pas très convaincant pour vos prospects. De même, cela n’est pas efficace en matière de preuve sociale. C’est pourquoi, nous vous conseillons d’adapter votre snippet de sorte que votre site n’affiche le nombre de produits vendus qu’à partir d’un compte approprié.

Pour ce faire, vous devez copier-coller le code suivant dans le fichier « functions.php » présent dans votre thème enfant :

// Afficher le nombre de ventes sur la boutique et les pages produits si les ventes sont supérieures à 10 exemplaires

add_action( 'woocommerce_after_shop_loop_item', 'wpm_product_sold_count_10', 11 ); 
add_action( 'woocommerce_single_product_summary', 'wpm_product_sold_count_10', 11 );

function wpm_product_sold_count_10() {
    global $product;

  //On récupère le nombre total de ventes par produit
    $units_sold = $product->get_total_sales();
   
  // On affiche notre texte personnalisé contenant le nombre de vente seulement s'il est supérieur ou égal à 10.
 	if ($units_sold >= 10) {
    	echo '<p class="wpm-sold-product">' . sprintf( __( 'Produit vendu %s fois', 'woocommerce' ), $units_sold ) . '</p>';
  }
}

Enfin, il ne vous reste plus qu’à adapter ce nombre en remplaçant la valeur dans l’attribut « if ($units_sold >= 10) » par celle que vous voulez.

Qu’Allah vous assiste !