Obtenir un rendez-vous

Nous avons reçu votre message et vous contacterons bientôt.

Merci d'avoir choisi prositeweb, votre agence de développement web à Montréal. Veuillez nous appeler au +1 (514) 548-2165 si vous avez besoin d'un soutien immédiat.

Remplacer le bouton d’Ajout au panier par un bouton vers un formulaire de contact personnalisé (WooCommerce)

Obtenez plus de détails sur le besoin de vos clients via un formulaire de contact

Remplacer le bouton d'Ajout au panier par un bouton vers un formulaire de contact personnalisé (WooCommerce)
Plus qu'un simple formulaire de contact (Obtenez les détails de vos clients)

Plus qu’un simple formulaire de contact (Obtenez les détails de vos clients)

Les options conventionnelles de boutiques en ligne ne sont pas toujours adaptées à toutes les réalités. En effet, vous avez généralement l’option de produits simple, variable ou externe. Cependant, le cas qui s’avoisine à certains concepts est les produits externe. Dans ce cas, l’utilisateur devrait remplir un formulaire pour vous contacter.

En remplaçant l’option d’ajout au panier par un bouton vers un formulaire, vous allez pouvoir collecter tous les détails de la commande exclu le paiement.

Téléchargez le code dans notre répertoire GitLab.

En savoir plus

Bon à savoir

Découvrez ci-dessous quelques éléments pouvant vous aider à mieux comprendre le mode de fonctionnement de l’extension.

WooCommerce propose par défaut 4 types de produits:

Les produits simples.

Qui sont généralement les produits sans aucune configuration . En effet, l’option de produit simple vous permet de vendre les produits qui ne possèdent pas de variations. Vous pouvez, par exemple, l’utiliser si vous avec un produit qui n’a pas différentes couleurs, finition ou tailles.

Les produits groupés.

Dans ce cas, on peut avoir un assemblage de produit. Par exemple, si vous vendez des meubles, vous pouvez utiliser l’option de produits groupée pour proposer une table et ses composantes.

Les produits externes ou d’affiliation.

Si vous suggérez les produits d’une compagnie sur votre site web, l’option de produit externe peut vous permettre de renvoyer les clients sur la page du fournisseur principal pour finaliser la commande.

Et, enfin, les produits variables.

Les produits variables sont génialement des produits avec plusieurs variations. À titre d’exemple, on peut avoir des produits de différentes couleurs, de tailles différentes ou avec des finitions différentes.

Le type de produit qui s’apparente le plus à la personnalisation du bouton « Ajouter au panier» est le cas des produits externes ou d’affiliation. Cependant, les informations que vous envoyez ne sont généralement pas dynamiques.  Par conséquent, à moins de rediriger vers un lien unique qui identifie facilement, vous ignorerez quels produits les clients a sélectionné à moins qu’il spécifie dans la description.

À la fin du tutoriel, vous pourrez être capable faire les actions suivantes :

  • Donner l’option à un administrateur de magasin d’activer ou de désactiver le bouton d’ajout au panier.
  • Afficher un bouton personnalisé pour remplacer le bouton « ajouter au panier ».
  • Personnaliser un texte pour expliquer aux utilisateurs ce qu’il faut faire.
  • Faire afficher un formulaire sous forme modale contenant le choix du client

Notez que vous pouvez personnaliser votre code pour atteindre votre objectif.  Pour ce tutoriel, nous allons faire toutes les modifications dans le fichier functions.php du thème installé.  Nous allons vous présenter une extension établie sur le même code qui permet de faire le même travail.

Vous pouvez faire les modifications soient dans le thème courant (installé sur votre site web ou via une extension). Dans ce qui suit, nous allons voir comment le faire dans votre thème.

Étapes nécessaires à la complétion des étapes (Dans le thème courant)

Le tutoriel est divisé en trois (3) étapes principales à suivre qui sont les suivantes :

  1. Créer une fonctionnalité personnalisée pour activer ou désactiver le bouton “ajouter au panier”.
  2. Ajouter des informations supplémentaires à la page de produit unique.
  3. Désactiver le champ “Ajouter au panier”

Étape 1 – Créer un méta boîte qui va permettre de contrôler l’activation ou la désactivation du bouton

L’extrait ci-dessous nous permettra de créer un post méta pour activer ou désactiver l’ajout au panier à partir de la page du produit.

Dans le code ci-dessus, vous créez un champ qui sera en dessous de la création et de la modification des produits. Pour commentaire,

  • prosite_option_paiement est l’identifiant unique du champ que vous voulez ajouter
  • « Add Extra CSS per Product & Disable Add to cart» Est le titre du champ, Vous pouvez utiliser loco translate pour faire la traduction
  • show_your_cart_box – est une fonction que nous allons définir qui aide à ajouter les champs du formulaire supplémentaire
  • product – correspond au type de publication (WooCommerce utilise product comme clé du type de publication). Si vous voulez faire apparaitre le méta boîte dans les autres types de publications, vous pouvez utiliser un tableau PHP avec la liste des clés de publication. Visitez ce lien pour en savoir plus sur les métabox.

Show_your_cart_box est une fonction de rappel qui permet d’afficher les champs de notre formulaire du méta boîte. Vous remarquerez que c’est le nom de cette fonction qui apparait dans add_to_cart_box.

La fonction save_cart_box_meta permet de faire la sauvegarde des informations durant la modification ou l’ajout d’un produit. Avec ces trois fonctions, vous aurez des informations supplémentaires en bas de chaque modification ou ajout de produit. Vous aurez, par exemple, quelque chose de semblable à cette image.

Remplacer le bouton “Ajouter au panier” avec un lien personnalisé sur la page de produit WooCommerce

Finalement, les codes combinés seront semblables à ceci:


<?php 

function add_to_cart_box() {
    	add_meta_box(
    		'cart_box_meta_box', // $id
    		'Add Extra CSS per Product & Disable Add to cart', // $title
    		'show_cart_box_meta_box', // $callback
    		'product', // $screen
    		'normal', // $context
    		'high' // $priority
    	);
    }
    add_action( 'add_meta_boxes', 'add_to_cart_box' );
    
    function show_your_cart_box() {
    	global $post;
    		$meta = get_post_meta( $post->ID, 'cart_box', true ); 
    	
    		
    		
    		?>

    	<input type="hidden" name="your_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">

        <!-- All fields will go here -->
  <p>
    	<label for="cart_box[checkbox]">Do you want to disable the add to cart button? (It will be replaced with a contact us link)</label>
    	<br/>
    	<?php 
    	if(!empty($meta['checkbox']) && $meta['checkbox']=="no") {
    	    ?>
    	 <input type="radio" id="no" name="cart_box[checkbox]" value="no" checked> No
    	 <br/>
    	 <input type="radio" id="yes" name="cart_box[checkbox]" value="yes" > Yes
    	 <br>
    	 <?php 
    	}elseif(!empty($meta['checkbox']) && $meta['checkbox']=="yes") {
    	      ?>
    	 <input type="radio" id="no" name="cart_box[checkbox]" value="no" > No
    	 <br/>
    	 <input type="radio" id="yes" name="cart_box[checkbox]" value="yes" checked> Yes
    	 <br>
    	 <?php 
    	} else {
    	     ?>
    	 <input type="radio" id="no" name="cart_box[checkbox]" value="no" checked> No
    	 <br/>
    	 <input type="radio" id="yes" name="cart_box[checkbox]" value="yes" > Yes
    	 <br>
    	 <?php 
    	}
    	 ?>
    </p>
    
    
      <p>
    	
    	<?php 
    	if(!empty($meta['checkbox']) && $meta['checkbox']=="yes") {
    	      ?>
    	      <label for="cart_box[message]">Message for visitors to display on the product page.</label>
    	<br/>
    	<br/>
    	 <input type="text" id="message" name="cart_box[message]" value="please call or make an appointment for more information" style="width: 100%" > 
    	 <?php 
    	}
    	 ?>
    </p>
    	<?php }
    	
    	function save_cart_box_meta( $post_id ) {
    	// verify nonce
    	if ( !wp_verify_nonce( $_POST['your_meta_box_nonce'], basename(__FILE__) ) ) {
    		return $post_id;
    	}
    	// check autosave
    	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    		return $post_id;
    	}
    	// check permissions
    	if ( 'page' === $_POST['post_type'] ) {
    		if ( !current_user_can( 'edit_page', $post_id ) ) {
    			return $post_id;
    		} elseif ( !current_user_can( 'edit_post', $post_id ) ) {
    			return $post_id;
    		}
    	}

    	$old = get_post_meta( $post_id, 'cart_box', true );
    	$new = $_POST['cart_box'];

    	if ( $new && $new !== $old ) {
    		update_post_meta( $post_id, 'cart_box', $new );
    	} elseif ( '' === $new && $old ) {
    		delete_post_meta( $post_id, 'cart_box', $old );
    	}
    }
    add_action( 'save_post', 'save_cart_box_meta' );
    
    

Étape 2 – Ajouter des informations supplémentaires à la page de produit.

Nous allons dès à présent créer un filtre qui aidera à ajouter du texte et un bouton sur la page produit. (Côté client).

Avec ce code, vous devriez être en mesure de voir apparaître un bouton sur votre page produit avec le message que vous voyez dans le code.


<?php 

// Add custom link in product single next to add to cart button
add_action( 'woocommerce_single_product_summary', 'login_button_on_product_page', 30 );
function login_button_on_product_page() {
    global $product;
    global $post;  
    $meta = get_post_meta( $post->ID, 'your_fields', true ); 
    if(!empty($meta['checkbox']) && $meta['checkbox']=="yes") {   // Show or hid
    $link = get_permalink(get_page_by_path('contact-us'));
    $messs="";
    if(!empty($meta['message'])) {
         $messs=$meta['message'];
    } else {
         $messs="please call or make an appointment for more information";
    }
    ?>
    <div class="need-style btncustom">
        <p>
            <?php echo $messs; ?>
            </p>
    <?php
    echo '<button type="button" data-default_text="Login" data-default_icon="sf-icon-account" class="ask-button custom-contact" onclick="window.location=\'' . esc_attr($link) . '\'"><i class="sf-icon-account"></i><span>Contact us</span></button>';
    ?>
    </div>
    <?php
    } 
}
?>

Étape 3 – Désactiver le champ « ajouter au panier»

Maintenant, nous allons pouvoir créer un champ conditionnel pour masquer ou afficher les champs, modifier le bouton « ajouter au panier» de même qu’ajouter des informations supplémentaires à la page du produit. Ensuite, nous allons créer un code pour désactiver les champs « ajouter au panier ». Le code ci-dessous nous aidera à y parvenir.


<?php 
// Remove add to cart button in product single page
// define the woocommerce_before_main_content callback 
function action_woocommerce_before_main_content( ) { 
    global $product;
      global $post; 
    $meta = get_post_meta( $post->ID, 'your_fields', true ); 
    if(!empty($meta['checkbox']) && $meta['checkbox']=="yes") {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    }
};
// add the action 
add_action( 'woocommerce_before_main_content', 'action_woocommerce_before_main_content', 10, 2 );
?>

Si vous suivez la produire élaborée ci-dessus, vous devez avoir une page produit après activation du lien personnalisé semblable à ceci.

Bouton paiement

Modification du bouton « Ajouter au panier» par un lien personnalisé à partir d’une extension.

L’un des avantages des extensions est qu’il est complément indépendant du thème WordPress. En effet, avec une extension, vous pouvez changer de thème sans avoir à refaire le même travail. Nous vous proposons ci-dessous un thème que vous pouvez gratuitement télécharger pour accomplir le même travail. L’extension utilise les codes élaborés ci-dessus. Nous y avons apporté quelques informations supplémentaires. À titre d’exemple, via l’extension, vous allez être en mesure de:

  • Sélectionner la page où vous souhaitez envoyer les données
  • Faire la modification des textes avec Loco Translate
  • Recevoir un courriel du client avec les données et ses préférences.

Comment ça marche?

Après téléchargement de l’extension, vous devez aller à réglage ⇒ Custom product link. Vous pourrez

  • sélectionner la page où vous voulez voir apparaître le formulaire,
  • ajouter les adresses courriels où les données du client devraient être envoyés

Conception

Une fois que vous aurez complété avec la configuration, vous devez aller sur les pages de vos produits sur lesquels vous souhaiterez avoir un lien personnalisé et cliquer sur Yes.

Remplacer le bouton “Ajouter au panier” avec un lien personnalisé sur la page de produit WooCommerce

Cela sera suffisant pour voir le bouton apparaitre sur votre page produit. Ci-dessous une petite démonstration vidéo

Si vous voulez gagner en temps, cliquez sur le lien ci-dessous pour télécharger l’extension.

Nous mettons à votre disposition notre extension WooCommerce (WordPress) disponible sur notre GitLab. En effet, l’extension vous permettra de dissocier la fonctionnalité de votre thème. Pour ce fait, vous allez pouvoir changer votre design si vous le souhaitez sans avoir à refaire les mêmes manœuvres. Téléchargez et installez sur votre site web. Il est cependant important de noter que c’est fonctionnel avec les conditions suivantes:

  • Tout d’abord, l’extension ne fonctionne que sur les sites WordPress avec WooCommerce installé
  • Ensuite, vous devez suivre les étapes ci-dessous pour finaliser la configuration

Comme bonnes pratiques, nous vous recommanderons de faire des tests avant de le mettre en ligne. Vous pouvez, par exemple, installer sur un serveur local ou un site web test.

 

Avez-vous un projet similaire?

Nous sommes des experts en création des extensions et thèmes. Vous pouvez nous contacter si vous avez un projet similaire.
Notre adresse 9590 Boul Henri-Bourassa E Bureau 108 H1E 2S4 Montreal, Québec , Canada
Téléphone +1 (514) 548-2165

Nous avons reçu votre message et vous contacterons bientôt.

Merci d’avoir choisi prositeweb, votre agence de développement web à Montréal. Veuillez nous appeler au +1 (514) 548-2165 si vous avez besoin d’un soutien immédiat.

Envoyez-nous un message

Avez-vous un projet en tête? Contactez notre Agence web pour une évaluation gratuite.

Si vous recherchez une agence web basée à Montréal capable de vous accompagner en développement Backend et Frontend, Contactez-nous.