Modifier le logo Paypal dans les options de paiement de WooCommerce

Par défaut, WooCommerce affiche l’un des nombreux icônes PayPal standards. Cependant, il est très courant de vouloir remplacer cette image par une autre.

Pour modifier cet icône, entrez le code suivant dans le fichier functions.php de votre thème et modifiez l’URL dans les guillemets pour qu’il corresponde à l’image de votre choix:

<?php

/* Change PayPal Icon */

function my_new_paypal_icon() {
    return '/wp-content/uploads/2017/04/paypal-icon.png';
}

add_filter( 'woocommerce_paypal_icon', 'my_new_paypal_icon' );

 

Comment afficher le pourcentage de réduction des promotions dans WooCommerce

Lorsque vous faites des soldes sur votre boutique en ligne WooCommerce, vous pouvez par exemple afficher un bouton « PROMO! » sur vos produits.

Mais afficher le pourcentage de réduction exact de vos produits peut inciter vos clients à passer à l’achat plus facilement et ainsi développer votre activité, ou celle de votre client.

Voici comment faire. Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Afficher le pourcentage de réduction des promotions WooCommerce */

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_show_sale_percentage_loop', 25 );

function wpm_show_sale_percentage_loop() {
global $product;

// Si le produit est en promotion
if ( $product->is_on_sale() ) {

// Si le produit n'est pas un produit variable
if ( ! $product->is_type( 'variable' ) ) {
$max_percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
} else {

// Sinon si c'est un produit variable, on récupère les différents prix
foreach ( $product->get_children() as $child_id ) :
$variation = $product->get_child( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();

// On calcule le pourcentage
$percentage = $price != 0 && ! empty( $sale ) ? ( ( $price - $sale ) / $price * 100 ) : $max_percentage;
if ( $percentage >= $highest_percentage ) :
    $max_percentage = $percentage;
    $regular_price = $product->get_variation_regular_price( 'min' );
    $sale_price = $product->get_variation_sale_price( 'min' );
endif;
endforeach;
}

// On affiche le pourcentage en l'arrondissant
echo "<div class='pourcentage'>-" . round($max_percentage) . "%</div>";
}
}

On ajoute ensuite un peu de CSS pour styliser l’affichage de notre pourcentage :

/* CSS pourcentage promotion WooCommerce */

.pourcentage {
	background-color: #D9534F;
	display: block;
	width:25%;
	margin:auto;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: bold;
	color: #fff;
	text-align:center;
	border-radius: .25em;
}

Et voilà le résultat:

Source: wpmarmite.com

Ajouter un bouton « Continuer le shopping » sur la page Panier

De nombreux sites proposent à leurs clients de continuer leurs achats lorsqu’ils s’apprêtent à valider leur commande.

Nous allons donc rajouter un bouton « Continuer le shopping » renvoyant vers votre page boutique sous le bouton « Procéder à la commande ».

Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

function wpm_continue_shopping_button() {

	 // On récupère le lien de votre page boutique   
	 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 
	 // On ajoute notre bouton 
	echo '<div class="wpm-continue-shopping">';
	echo ' <a href="'.$shop_page_url.'" class="button wpm-shopping-button">Continuer le shopping</a>';
	echo '</div>';
}

Bien entendu, vous pouvez modifier le texte « Continuer le shopping » par celui que vous préférez. Le bouton est maintenant présent sur la page Panier.

Copiez-collez le code suivant dans le fichier style.css de votre thème enfant:

/*CSS du bouton Continuer le Shopping */

.wpm-shopping-button{
	width:100%;
	text-align: center;
}

Et voilà :

Source: wpmarmite.com

WooCommerce: modifier le texte du bouton « Ajouter au panier » lorsque le produit a déjà été ajouté

Pour rendre votre boutique WooCommerce un peu plus originale, je vous propose de modifier le comportement de votre bouton « Ajouter au panier » lorsque le produit est déjà dans le panier.

Vous pouvez par exemple afficher dynamiquement le texte « Acheter à nouveau » à la place du texte « Ajouter au panier » .

Voici comment s’y prendre.

Copiez-collez le texte 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');
}

Maintenant lorsqu’un produit est déjà dans le panier, voici ce que vous devriez avoir sur vos pages produits :

Source: wpmarmite.com

WooCommerce : Ajouter un badge « Rupture de stock » sur les produits indisponibles

Nous allons plutôt afficher une badge « Rupture de stock » en rouge et gros sur l’image au niveau de la boutique et à coté du titre sur notre page produit. Cela améliorera grandement l’expérience client.

Voici comment procéder : copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

/* Indiquer la rupture de stock */

add_action( 'woocommerce_before_shop_loop_item_title', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page boutique
add_action( 'woocommerce_single_product_summary', 'wpm_display_sold_out_loop_woocommerce' );// On l'affiche sur la page du produit seul

 
function wpm_display_sold_out_loop_woocommerce() {
    global $product;
 	//Si le produit est en rupture de stock, on affiche :
    if ( !$product->is_in_stock() ) {
        echo '<span class="soldout">' . __( 'Rupture de stock', 'woocommerce' ) . '</span>';
    }
}

Vous pouvez utiliser le CSS suivant pour modifier l’apparence du badge :

.soldout {
	padding: 3px 8px;
	text-align: center;
	background: red;
	color: white;
	font-weight: bold;
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 12px;
}

Et voilà!

Source: wpmarmite.com

WooCommerce : Afficher un prix « A partir de » pour les produits variables

Lorsque vous utilisez les produits variables de WooCommerce, les prix sont affichés sous la forme « de X€ à Y€ ». Si vous avez une différence de prix conséquente entre le produit le moins cher et le produit le plus cher, cette affichage peut nuire à vos bénéfices.

En effet, un client qui va voir un prix élevé directement peut ne pas avoir envie de cliquer sur votre produit du tout.

Pour remédier à cela, vous pouvez opter pour un affichage du type « A partir de x€ ». C’est beaucoup plus vendeur (ce n’est pas pour rien qu’on voit cela partout dans les publicité 😉 ).

Pour cela, copiez-collez le snippet suivant dans le fichier functions.php de votre thème enfant:

/* Afficher "À partir de" pour les produits variables */
add_filter( 'woocommerce_variable_sale_price_html', 'wpm_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wpm_variation_price_format', 10, 2 );

function wpm_variation_price_format( $price, $product ) {
	//On récupère le prix min et max du produit variable
	$min_price = $product->get_variation_price( 'min', true );
	$max_price = $product->get_variation_price( 'max', true );

	// Si les prix sont différents on affiche "À partir de ..."
	if ($min_price != $max_price){
		$price = sprintf( __( 'A partir de %1$s', 'woocommerce' ), wc_price( $min_price ) );
		return $price;
	// Sinon on affiche juste le prix
	} else {
		$price = sprintf( __( '%1$s', 'woocommerce' ), wc_price( $min_price ) );
		return $price;
	}
}

Et voilà le résultat:

Source: wpmarmite.com

WooCommerce : Afficher le nombre de produits vendus

Pour afficher le nombre de produits vendus sur la page de chaque article, insérez le code suivant dans votre fichier functions.php:

/* 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 modifier la phrase affichant le nombre de ventes, modifiez le texte 'Produit vendu %s fois'.

 Attention à bien laisser le %s dans ce texte. C’est la variable contenant le nombre de ventes du produit !

Si vous voulez styliser un peu cet affichage, vous pouvez par exemple ajouter le code suivant dans le fichier style.css de votre thème enfant en ciblant la class CSS de notre texte qui est wpm-sold-product:

/* 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  */
}

Voici le rendu:

Source: wpmarmite.com