Quantcast

Améliorer votre Checkout Woocommerce

 

Avec plus de 37% des sites en lignes sous Woocommerce, WordPress a clairement montré sa puissance d’extension racheté en 2015 par Auttomatic cette extension qui transforme votre blog en E-commerce offre une multitude de possibilités et d’optimisation.Sachant que 75% des paniers sont abandonnés au moment du checkout  il est primordiale de s’intéresser au bon fonctionnement de votre checkout Woocomerce afin de gagner ou de ne pas perdre en conversions.

Sommaire [sommaire]

Le Checkout Woocommerce resemble à ceci :

checkout-page-woocommerce2-3

Mais comme vous pourrez vous rendre compte celui de Woocommerce est différent, il offre un expérience utilisateur plus riche allant directement au but sans étapes. Si vous avec acheter un plugin de Yoast,chose que je vous recommande si ce n’est pas déjà fait (je ne suis pas affilié). Vous remarquerez la qualité graphique épurée du checkout.

checkout woocommerce storefront

Il existe de nombreuses alternatives pour modifier son Checkout : Plugins tiers, plugins de Woocommerce, développement personnalisé. Faisons un petit tour des options possible pour optimiser votre Checkout. Gardez à l’esprit que votre site doit tourner rapidement. Faites des Test avant de choisir une solution correspondant à vos besoins

Modifier son Checkout Woocommerce avec un plugin

mobile-checkout-apppresser

Smart Checkout Woocommerce : Ce plugin proposé par Apppresser permet de transformer votre checkout en quelques clicks. Vous y trouverez l’option pour ordinateur et mobiles. L’installation se déroule comme pour tout plugin de WordPress soit via le DashBoard soit par FTP. J’utilise ce plugin depuis quelques mois et je dois dire que j’en suis content. L’intégration pour les mobiles est parfaite.

  • Les Plus : Installation et configuration simple/ Optimisé pour les smartphones
  • Les moins : J’aurrai aimé pouvoir personnalisé d’avantage le front-end

 

Pottle Page Builder : Ce page builder vous permet de changer tout les paramètres de vos produits ainsi que de votre checkout. Il dispose d’une option de Page Builder spéciale pour Wooocommerce. Le prix est relativement élevé pour un site :100€  toutefois l’offre reste très intéressante en illimité : 150€. Bien que le prix pourrait être un frein, Pottle Page builder vous fait gagner un temps précieux. Le fait de pouvoir changer tout les aspects de votre E-commerce est vraiment impressionnant. Une petite video d’introduction vous montre la prise en main de ce Page Builder.

 

Checkout Field Editor : Le plugin officiel d’Automattic vous permet de changer facilement votre Checkout sans avoir à toucher à une ligne de code. Il vous permet d’ajouter ou de retirer des champs dans votre formulaire. Ce plugin est proposé au prix de 49€ sur le site officiel de Woocommerce

checkout-page-woocommerce2-3

 

 

Modifier son Checkout Woocommerce avec du code

Comme toute modification sur votre site WordPress vous devriez utilisez un Child Theme pour ne pas écraser vos modifications lors de la prochaine mise à jour de votre thème.Le code dont nous allons parler aujourd’hui se doit d’etre mit dans le fichier Fonction.php de votre child Thème.

Voici le chargement normal de Woocommerce dans lequel il est possible d’effectuer des modifications avec les filtres Add action et remove action. Woocommerce vous permet d’avoir un contrôle total sur champs à renseigner. Vous devez juste savoir où il faut y accéder.

 

$this->checkout_fields['billing']    = $woocommerce->countries->get_address_fields( $this->get_value('billing_country'), 'billing_' );
$this->checkout_fields['shipping']   = $woocommerce->countries->get_address_fields( $this->get_value('shipping_country'), 'shipping_' );
$this->checkout_fields['account']    = array(
    'account_username' => array(
        'type' => 'text',
        'label' => __('Account username', 'woocommerce'),
        'placeholder' => _x('Username', 'placeholder', 'woocommerce')
        ),
    'account_password' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-first')
        ),
    'account_password-2' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-last'),
        'label_class' => array('hidden')
        )
    );
$this->checkout_fields['order']  = array(
    'order_comments' => array(
        'type' => 'textarea',
        'class' => array('notes'),
        'label' => __('Order Notes', 'woocommerce'),
        'placeholder' => _x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')
        )
    );
Chargement de Woocommerce

Vous pouvez rendre L’adresse optionnel dans le champs de votre Checkout en y ajoutant une fonction comme présenté ci-dessous :

// Hook in
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields ) {
     $address_fields['address_1']['required'] = false;

     return $address_fields;
}
Rendre optionnel L'adresse

Vous pouvez rendre le champs Téléphone non obligatoire en ajoutant ce code

<?php
add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );
function wc_npr_filter_phone( $address_fields ) {
	$address_fields['billing_phone']['required'] = false;
	return $address_fields;
}
?>
Enlever le téléphone des champs

 

Faites nous part de vos idées, de vos modifications de Checkout Woocommerce!


Liens qui pourraient vous intéresser:

Mis en boite dans

Laisser un commentaire