Objectif du tutoriel

L'objectif de ce tutoriel est de vous montrer comment vous pouvez modifier le bouton "Ajouter au panier" de votre site web. Ceci avec un lien personnalisé vers la page de produit unique de WooCommerce.

Introduction

Souhaitez-vous modifier le bouton "Ajouter au panier" avec un lien personnalisé pour certains produits sur WooCommerce ? Ce petit tutoriel vous aidera à y parvenir. À 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 l'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.
Notez que vous pouvez personnaliser votre code pour atteindre votre objectif.  Et pour ce tutoriel, nous allons faire toutes les modifications dans le fichier functions.php du thème installé. 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 fonction personnalisée pour activer ou désactiver le bouton "ajouter au panier"

L'extrait ci-dessous nous permettra de créer un post meta pour activer ou désactiver l'ajout au panier à partir de la page du produit.
<?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' );
    
    
Si vous ajoutez le code ci-dessus dans le fichier functions.php et que vous actualisez la page produit de WooCommerce, nous remarquerons deux nouveaux champs sous l'éditeur de texte. Nous utiliserons le premier champ pour activer ou désactiver le bouton d'ajout au panier. Et en même temps, si le bouton d'ajout au panier n'est pas actif, un nouveau lien de bouton s'affichera à la place.

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

Dans le fichier functions.php, nous ajouterons le code ci-dessous qui nous permettra d'ajouter des informations supplémentaires sur la page de chaque produit. Et comme nous ne voulons afficher les informations que si l'option oui est sélectionnée, nous utiliserons la première étape pour vérifier nos conditions.
<?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 "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 );
?>
Merci pour la lecture, Laissez nous votre message via notre formulaire de contact. Vous pourriez également être intéressé par "Create a Video Channel on Your Website with YouTube API."