Proposer des options d’achat au client directement sur la page du produit Woocommerce peut s’avérer nécessaire pour anticiper le processus de cross selling, satisfaire des impératifs liés à un service externe ou pour simplifier le tunnel de vente d’une boutique en ligne. Si les variations de produits Woocommerce peuvent répondre à une option standardisée, elles deviennent inefficaces lorsqu’il s’agit d’ajouter à la commande un produit n’étant pas assujetti au même taux de TVA ou aux mêmes options tarifaires.
Je vous propose ici un guide permettant de mettre en place une option de commande directement sur la page du produit afin de permettre au client de votre e-commerce, d’ajouter automatiquement un produit ou service lié au panier de sa commande.
Nous allons voir ici :
- Comment ajouter une option d’affichage de case à cocher sur la page du produit
- Comment ajouter une liste de sélection de service lié en page d’édition d’un produit Woocommerce
- Comment sauvegarder les métadonnées du produit
- Comment ajouter conditionnellement la case à cocher sur la page front du produit
- Comment valider l’entrée utilisateur sur Woocommerce
- Comment ajouter le produit supplémentaire au panier du client
Ajouter une option de service lié à la page d’édition de produit Woocommerce
La personnalisation de notre boutique Woocommerce consistera à intégrer un onglet de réglage spécifique à notre service supplémentaire, et y intégrer 2 champs permettant d’enregistrer les choix définis en zone d’administration.
Création d’un onglet de réglage du produit
Nous l’avons déjà vu dans un article précédent, les filtres Woocommerce woocommerce_product_data_tabs et woocommerce_product_data_panels vont respectivement nous permettre de créer un nouvel onglet de réglage sur la page d’édition de produit et d’y ajouter des champs standardisés.
N.B. Pour rappel, nous partons toujours du principe que nous développons un plugin WordPress et que nous encapsulons notre code dans une classe PHP.
Nous commençons par la création de l’onglet d’édition de produit Woocommerce.
La fonction de rappel prend en unique argument un tableau associatif des onglets. Nous devons donc ajouter notre déclaration à ce tableau avant de le retourner pour être traités par Woocommerce.
L’entrée « target » du tableau déclaratif correspondra à l’identifiant « id » du panel à créer ensuite.
private function set_hooks(){
add_filter( 'woocommerce_product_data_tabs', [ $this, 'cdw_woo_product_additionnal_order_tab' ] );
}
/**
* Ajoute un nouvel onglet aux réglages de produit Woocommerce
* @params $tabs array The product settings tabs array
* @return array Retuens the settings tabs array
*/
public function cdw_woo_product_data_tabs( $tabs ) {
$tabs[ 'cdw-woo-add-order-option' ] = [
'label' => __( 'Option de commande supplémentaire', $this->textDomain ),
'target' => 'cdw-woo-add-order-option',
'class' => '',
'priority' => 80
];
return $tabs;
}Création du panel de réglage du produit
Nous créons maintenant le panel de réglages à afficher au clic de notre onglet. Cet panel contiendra nos deux champs de données :
Une checkbox permettant de de définir quel produit Woocommerce proposera un service additionnel. Un champ <select> permettant de définir le produit ou service additionnel en question.
N.B. Nous utilisons les méthodes woocommerce_wp_checkbox et woocommerce_wp_select afin d’afficher des champs et tooltips standardisés.
N.B. Nous récupérons ici l’objet global $post permettant de cibler le post (le produit) en cours d’édition, et d’obtenir facilement les valeurs des métadonnées correspondant aux champs à afficher.
N.B. Enfin, nous utilisons wc_get_products pour établir une requête des produits enregistrés et nous bouclons sur le résultat pour peupler les options du champ <select>.
private function set_hooks(){
//…
add_filter( 'woocommerce_product_data_panels', [ $this, 'cdw_woo_additionnal_data_panel' ] );
}
/**
* Création d’un panel à afficher au clic sur le nouvel onglet
* Les champs de métadonnées seront intégrés dans ce panel
* @return void
*/
public function cdw_woo_additionnal_order_panel(){
global $post;
$display_add_order_choice = get_post_meta( $post->ID, '_cdw_dispay_add_order_choice', true );
$add_product = get_post_meta( $post->ID, '_cdw_additional_linked_product', true );
$products = wc_get_products( [ 'limit' => -1 ] );
$options = [ '' => __( 'Choisir un service ou produit additionnel', 'cdw' ) ] ;
foreach( $products as $product ) {
$options[ $product->get_id() ] = $product->get_title();
}
?>
<div id="cdw-woo-add-order-option" class="panel woocommerce_options_panel">
<div class="options-group">
<?php
woocommerce_wp_checkbox( array(
'id' => '_cdw_dispay_add_order_choice',
'label' => __( 'Choix du service additionne ?', 'jst' ),
'value' => $display_add_order_choice,
'wrapper_class' => '',
'description' => __( 'Cocher cette case pour faire apparaitre les champs relatifs au choix de votre service ou produit additionnel', 'jst' ),
'desc_tip' => true
));
?>
</div>
<div class="options-group">
<?php
woocommerce_wp_select(array(
'id' => '_cdw_additional_linked_product',
'label' => __( 'Service optionnel', 'jst' ),
'value' => $add_product,
'options' => $options,
'description' => __( 'Choisir le service optionnel à faire apparaître sur la page du produit', 'jst' ),
'desc_tip' => true
));
?>
</div>
</div>
<?php
}
Sauvegarde des métadonnées du produit
Le hook woocommerce_process_product_meta nous permet de stocker nos métadonnées à l’aide des méthodes natives de WordPress update_post_meta et delete_post_meta.
Le processus est très simple : en fonction de l’existence de la variable dans $_POST, nous mettons à jours ou nous supprimons la metadata de la base de données.
private function set_hooks(){
//…
add_action( 'woocommerce_process_product_meta', array( $this, 'cdw_woo_process_add_product_meta' ) );
}
/**
* Ajoute un nouvel onglet aux réglages de produit Woocommerce
* @params $posi_id int L’ID du produit pour lequel les métadonnées sont sauvegardées
* @return void
*/
public function cdw_woo_process_add_product_meta( $post_id ){
/**
* Meta affichage choix service additionnel
*/
$_cdw_dispay_add_order_choice = isset( $_POST[ '_cdw_dispay_add_order_choice'] )
? sanitize_text_field( $_POST[ '_cdw_dispay_add_order_choice'] )
: false;
$old_cdw_dispay_add_order_choice = get_post_meta( $post_id, '_cdw_dispay_add_order_choice', true );
if( !$_cdw_dispay_add_order_choice && $old_cdw_dispay_add_order_choice){
delete_post_meta( $post_id, '_cdw_dispay_add_order_choice' );
}
else{
update_post_meta( $post_id, '_cdw_dispay_add_order_choice', $_cdw_dispay_add_order_choice );
}
$_additionnal_linked_service = isset( $_POST[ '_cdw_additional_linked_product' ] )
? sanitize_text_field( $_POST[ '_cdw_additional_linked_product' ] )
: false;
$old_additionnal_linked_service = get_post_meta( $post_id, '_cdw_additional_linked_product', true);
if(! $_cdw_dispay_add_order_choice && $old_additionnal_linked_service){
delete_post_meta( $post_id, '_cdw_dispay_add_order_choice' );
}
else{
update_post_meta( $post_id, '_cdw_additional_linked_product', $_additionnal_linked_service );
}
}Ajout d’une case à cocher sur la page de produit
Nous allons maintenant donner au client la possibilité d’opter une option supplémentaire correspondant au produit choisi sur la page d’édition du produit Woocommerce, à l’aide d’une simple case à cocher ou d’un bouton radio.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Nous pourrions bien évidemment à ajouter ici un champ de texte pour recueillir une donnée textuelle, une nouvelle liste déroulante ou tout autre élément d’interface nécessaire à un traitement spécifique.
Le bouton d’ajout du produit au panier étant toujours visible sur un template de produit de boutique en ligne, le hook idéal pour intégrer notre interface est woocommerce_before_add_to_cart_button.
N.B. Le recours à la variable globale $product nous permet là encore de récupérer les métadonnées précédemment stockées pour le produit courant et de vérifier si l’option de service supplémentaire est disponible pour pouvoir afficher notre bouton radio :
private function set_hooks(){
//…
add_action( ‘woocommerce_before_add_to_cart_button’, [ $this, ‘cdw_woo_before_add_to_cart_button’ ] );
}
/**
* Affichage de l’interface utilisateur pour le choix du produit supplémentaire
* @return void
*/
public function cdw_woo_before_add_to_cart_button() {
global $product;
$id = $product->get_id();
$display_add_order_choice = get_post_meta( $id, '_cdw_dispay_add_order_choice', true );
if( $display_add_order_choice ) {
$sce_needed = isset( $_POST[ 'supp-sce-needed' ] ) ? $_POST[ 'supp-sce-needed' ] : 'non';
}
?>
<div class="cdw_option_field_group">
<label for=" supp-sce-needed">Avez-vous besoin d'un timbre service supplémentaire ?</label>
<div class="cdw-input-wrap">
<label>
<input type="radio" name="supp-sce-needed" value="oui" <?php checked( $sce_needed, 'oui' ); ?> checked > <?php _e( 'Oui, je veux un service supplémentaire', 'cdw' ); ?>
</label><br />
<label>
<input type="radio" name="supp-sce-needed" value="non" <?php checked( $sce_needed , 'non' ); ?> > <?php _e( "Non, je n'en ai pas besoin", 'cdw' ); ?>
</label>
</div>
</div>
<?php
}
Validation des données de service supplémentaire
Un élément important du processus de commande Woocommerce est la validation des données passées via son formulaire de commande.
La fonction de rappel du hook woocommerce_add_to_cart_validation nous donne accès à une variable booléenne $passed permettant de valider ou non le formulaire de commande, ainsi qu’à l’ID du produit nous facilitant le traitement du choix du client au cas où le produit est éligible au service supplémentaire
N.B les 2 arguments 3 et 4 de la fonction callback nous sont inutiles.
private function set_hooks(){
//…
add_action( 'woocommerce_add_to_cart_validation', array( $this, 'cdw_woo_add_to_cart_validation' ), 15, 2 );
}
/**
* Ajoute un nouvel onglet aux réglages de produit Woocommerce
* @params $passed boolean Variable de validation : false si invalide
* @params $prod_id int l’ID du produit
* @return void
*/
public function cdw_woo_add_to_cart_validation( $passed, $prod_id ) {
$display_add_order_choice = get_post_meta( $prod_id, '_cdw_dispay_add_order_choice', true );
if( $display_add_order_choice && ( !isset( $_POST[ 'supp-sce-needed' ] ) || !in_array( $_POST[ 'supp-sce-needed' ], [ 'oui', 'non' ] ) ) ) {
wc_add_notice( 'Veuillez indiquer votre besoin de service additionnel' );
$passed = false;
}
return $passed;
}Si la métadonée supp-sce-needed est trouvée pour le produit en cours d’ajout au panier, nous testons la valeur transmise pour le bouton radio. L’enregistrement du produit ou service supplémentaire pourra ensuite se faire en toute sérénité.
Ajouter de l’option de commande dans le panier d’achat
Techniquement, l’ajout programmatique d’un produit au panier Woocommerce se fait via la méthode add_to_cart de l’instance de la classe Cart.
En nous connectant au hook woocommerce_add_cart_item_data, nous veillons principalement à récupérer le produit lié et à l’ajouter au panier si $_POST[ ‘supp-sce-needed’ ] est trouvée :
/**
* Ajoute un nouvel onglet aux réglages de produit Woocommerce
* @params $cart_item_data array tableau des métadonnées de panier
* @params $prod_id int l’ID du produit
* @return array
*/
public function cdw_woo_add_cart_item_data( $cart_item_data, $prod_id ) {
if( isset( $_POST[ 'supp-sce-needed' ] ) && $_POST[ 'supp-sce-needed' ] == 'oui' ) {
$_cdw_additional_linked_product_id = get_post_meta( $prod_id, '_cdw_additional_linked_product', true );
if( $_cdw_additional_linked_product_id ) {
$_cdw_additional_linked_product = wc_get_product( $_cdw_additional_linked_product_id );
WC()->cart->add_to_cart( $_cdw_additional_linked_product_id );
}
}
return $cart_item_data;
}N.B. Nous pourrions n’afficher qu’une donnée concernant cette option dans le panier utilisateur, sans ajouter pour autant un produit tiers. Dans ce cas nous devrions ajouter la métadonnée au panier et la récupérer ultérieurement avec woocommerce_get_Item_data pour affichage :
if( $_cdw_additional_linked_product_id ) {
…
$cart_item_data[ 'cdw' ][ '_cdw_additional_linked_product' ] = $_cdw_additional_linked_product->get_title();
}
}
return $cary_item_data;
}
Voilà, vous avez désormais un moyen simple grtauit d’ajouter à vos,pages de produit Woocommerce une option de commande de produit ou de service supplémentaire.
Amusez-vous bien !