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

Rediriger automatiquement la page Panier vers la page Commande

by with 6 Comments AstucesCodeCSSWoocommerceWordpress

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

by with 59 Comments AstucesCodeCSSWordpress

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

by with No Comment AstucesCodeCSSWoocommerceWordpress

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é

by with No Comment AstucesCodeCSSWordpress

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.