Remplacer le lien du bouton « Ajouter au panier » par un lien personnalisé sur la page de produit

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

Si vous recherchez comment remplacer le lien du  modifier le bouton « ajouter au panier » par un lien personnalisé sur la page produit de votre boutique WooCommerce, cet article est pour vous.

Pourquoi remplacer le lien du bouton « Ajouter au panier » par un lien personnalisé?

WooCommerce propose par défaut 4 types de produits:

  • Les produits simples. Qui sont généralement les produits sans aucune configuration
  • 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érer 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 dynamique.  Par conséquent, à moins de rediriger vers un lien unique qui est facile à identifier, vous ne saurez pas quels produits les clients a sélectionné à moins qu’il spécifie dans la description.

Le but de cet article est de voir ensemble comment vous pouvez prendre en considération le contenu ou le produit choisi par le client.

Ce que le tutoriel va permettre de faire

À 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é.  Et nous allons vous présenter une extension basée sur le même code qui permet de faire le même travail. Le tutoriel est divisé en trois (3) étapes principales à suivre qui sont les suivantes :

Modification dans le thème WordPress.

Tel que mentionné plus haut, 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 une 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éer 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 permet d’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 la méta-boîte dans les autres types de publication, 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 rappelle 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 quelques choses de similaire à cette image.

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

Finalement, les codes combinés seront similaires à 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 permettra d’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 » et aussi 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é similaire à 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 télécharger gratuitement 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 allez pouvoir

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

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 devrait être 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.

Téléchargez l'extension gratuitement avec toutes les fonctionnalités

Obtenez le lien de téléchargement l'extension directement dans votre courriel

Télécharger

En conclusion

WooCommerce comme tout autre solution open-source sont assez flexible en termes de modification. Personnaliser votre page pour l’adapter à vos réalités d’affaire est relativement facile. Dans le cas où vous avez besoin de notre expertise en conseil ou développement de logiciel, vous pouvez nous contacter.

laissez un commentaire



Merci

Merci d'avoir contacté Prositeweb,
retourner à l'accueil

N'hésitez pas à nous contacter à tout moment pour toute demande concernant nos services. Contactez-nous

Merci