Bleu et Blanc Coloré Dégradé Musique YouTube Miniature (8)

Rediriger automatiquement la page Panier vers la page Commande

Si vous n’utilisez pas vraiment la boutique e-commerce de WooCommerce mais que vous souhaitez seulement profiter du tunnel d’achat (site d’abonnement à des options payantes, site de formations, etc.), peut-être que vous n’avez pas besoin que votre acheteur passe par l’étape de la page Panier.

Dans ce cas, rien de mieux que de simplifier le parcours d’achat de votre utilisateur et rediriger la page Panier directement vers la page Commande pour améliorer au mieux votre taux de conversion.

Dans le cadre d’un abonnement par exemple, il y a peu d’intérêt à afficher la page Panier puisqu’il y a un récapitulatif de l’achat sur la page Commande.

Pour ajouter cette fonctionnalité à votre boutique, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

				
					// Rediriger la page Panier directement vers la page Commande dans WooCommerce

add_action('template_redirect', 'wpm_wc_redirect_cart_to_checkout');

function wpm_wc_redirect_cart_to_checkout() {
// Si on est sur la page panier et que celui-ci n'est pas vide
	if (is_cart() && !WC()->cart->is_empty()) {
		wp_redirect(wc_get_checkout_url());
		exit;
	}
}

				
			

Et voila, grâce à ces quelques lignes de code, vos utilisateurs seront maintenant automatiquement redirigés vers la page Commande de WooCommerce lorsqu’il essayeront d’afficher leur page Panier.

Attention cependant à la boutique en ligne sur laquelle vous utilisez ce code car l’utilisateur ne pourra pas changer les quantités de produits dans le panier depuis la page commande.

Bleu et Blanc Coloré Dégradé Musique YouTube Miniature (6)

Modifier l’URL du logo de la page de connexion de WordPress

Lorsque vous arrivez sur la page /wp-admin de votre site, vous avez le logo de WordPress affiché au dessus du formulaire de connexion à l’administration.

Par défaut, le lien pointe vers l’URL du site francophone de WordPress: w-insideconcept.com

Si vous voulez modifier cette URL par celle de votre propre site, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

				
					// Modifier l'URL du logo de connexion sur la page d'administration 

add_filter( 'login_headerurl', 'wpm_custom_login_url' );

function wpm_custom_login_url($url) {
// On définit la nouvelle URL du lien ici
  return 'https://www.exemple.com';
}

				
			

Pensez juste à MODIFIER l’Url https://www.exemple.com par votre propre Url.

Bleu et Blanc Coloré Dégradé Musique YouTube Miniature (5)

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

Lorsque vous utilisez la gestion de stock de WooCommerce et qu’un de vos produits est en rupture de stock, rien mis à part une petite ligne en rouge sur la page du produit ne le précise.

Seule une petite ligne discrète en rouge « Rupture de stock » est affichée. Pas forcément très clair pour notre client donc.

 

 

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;
}

				
			

Bien sûr, n’hésitez pas à modifier l’apparence via le CSS pour coller au maximum au design de votre site et de votre boutique WooCommerce !

Bleu et Blanc Coloré Dégradé Musique YouTube Miniature (4)

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 :

Si vous possédez une idée plus originale, vous pouvez modifier le texte « Acheter à nouveau » par celui de votre choix. 

Bleu et Blanc Coloré Dégradé Musique YouTube Miniature (3)

Comment Faire Pour Ne Pas Afficher L’UGS Sur Les Pages Produits Dans WooCommerce ?

Vous souhaitez savoir si vous pouvez cacher l’UGS présente sur les pages produits dans WooCommerce ? En effet, cette référence unique dédiée à chaque produit à la vente vient s’imposer sur votre site. Néanmoins, vous devez savoir que cette unité de stockage se révèle être très utile pour votre e-commerce.

Dans certains cas, le fait de ne pas l’utiliser pourrait même vous jouer des mauvais tours. C’est pourquoi, les experts dans le domaine conseillent d’en faire usage. Ceci dit, bien que son utilisation soit recommandée, vous ne souhaitez plus la voir s’afficher. Vous trouverez donc dans les lignes qui suivent quelques astuces qui devraient vous intéresser.

Qu’Est-ce Que l’UGS et Pourquoi Est-elle Utile ?

Appelée SKU en anglais, l’UGS signifie « Unité de Gestion de Stock ». Cette dernière se situe dans la page d’édition d’un produit de votre site au niveau de la rubrique « Inventaire ». Certes, vous pouvez la remplir ou décider de la laisser vide, si vous ne désirez pas vous en servir.

Toutefois, sachez que cette référence s’avère très utile pour organiser efficacement la gestion de votre magasin en ligne. Peu importe le type de vos produits ou la taille de votre boutique, ce numéro d’article est d’une aide précieuse. Plus grave encore, son absence pourrait engendrer des soucis en matière de logistique, nuire à vos relations avec vos collaborateurs ou limiter votre potentiel de vente. 

Quoi qu’il en soit, l’UGS se présente sur vos pages produits dans le cas où vous l’utiliseriez. Or, vous pouvez faire en sorte qu’elle n’apparaisse pas et y avoir recours seulement à des fins administratives.

 

Retirer l’Affichage de l’UGS Sur Les Pages Produits

Vous disposez de plusieurs solutions afin de ne pas afficher l’UGS sur les pages produits de votre site.

  • Enlever l’Affichage de l’UGS à l’Aide d’un Snippet

Pour ce faire, il vous suffit de copier-coller le snippet suivant dans le fichier « functions.php » dans votre thème enfant :

 
				
					/* Ne pas afficher l'UGS sur vos pages produits */

add_filter( 'wc_product_sku_enabled', 'wpm_remove_sku' );

function wpm_remove_sku( $enabled ) {
  // Si on est pas dans l'admin et si on est sur la page produit
    if ( !is_admin() && is_product() ) {
        return false;

    return $enabled;
}
				
			

Ce code vous permettra de ne pas afficher l’UGS sur les pages produits de votre boutique en ligne. Cependant, vous pourrez le conserver et l’employer pour suivre vos commandes et gérer votre administration.

  • Cacher l’UGS Par le Biais du CSS

Bien que celui-ci soit moins efficace que le snippet, le CSS est capable de masquer l’UGS. Effectivement, cette méthode n’empêche pas l’UGS d’apparaître dans le code source de votre page.

Ceci dit, il se peut que vous trouviez cette technique intéressante. Dans ce cas, il vous faudra copier-coller le code ci-dessous dans la rubrique « CSS personnalisé » de votre thème ou dans le fichier « style.css » de votre thème enfant :

 

				
					/* Masquer l'UGS des pages produits */

.product .sku_wrapper {
      display: none;
}

				
			
  • Désactiver l’UGS Dans WooCommerce

Si vous êtes déterminé à ne pas faire appel aux UGS malgré leur importance, vous avez alors la possibilité de désactiver ces dernières. Pour réaliser cela, vous devez ajouter le champ de caractère suivant (toujours dans le fichier « functions.php » de votre thème enfant)  :

 
				
					/* Désactiver les SKUs sur WooCommerce */
add_filter('wc_product_sku_enabled', '__return_false');

				
			

Avec l’une de ces trois solutions, vous aurez la capacité d’arrêter l’affichage de l’UGS sur vos pages produits.