Replace the “Add to cart” button with a personalized link on the product page

Editing the "Add to Cart" button with a custom link on the single WooCommerce product page requires three simple steps: Create a custom feature to enable or disable the "add to cart" button, Add additional information to the product page unique and Disable the "Add to cart" field.

Replace the

Objective of the tutorial

The objective of this tutorial is to show you how you can modify the “Add to cart” button on your website. This with a personalized link to the unique product page of WooCommerce .

Introduction

Would you like to change the “Add to Cart” button with a custom link for some products on WooCommerce? This little tutorial will help you achieve that. At the end of the tutorial, you may be able to do the following actions:

  • Give the option to a store admin to enable or disable add to cart.
  • Display a custom button to replace the “add to cart” button.
  • Customize text to explain to users what to do.

Note that you can customize your code to achieve your goal. For this tutorial, we are going to make all the modifications in the functions.php file of the installed theme. The tutorial is divided into three (3) main steps to follow which are as follows:

  • Create a custom feature to enable or disable the “add to cart” button.
  • Add additional information to the single product page.
  • Deactivate the “Add to cart” field.
  • Step 1 – Create a custom function to enable or disable the “add to cart” button

    The snippet below will allow us to create a meta post to enable or disable add to cart from the product page.

    <?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' );
        
        

    If you add the above code to the functions.php file and refresh the WooCommerce product page, we will notice two new fields below the text editor. We will use the first field to enable or disable the add to cart button. At the same time, if the edit button “add to cart” is not active, a new button link will appear instead.

    Step 2 – Add additional information to the single product page.

    In the functions.php file, we will add the code below which will allow us to add additional information on the page of each product. Since we only want to display the information if the yes option is selected, we will use the first step to check our 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
        } 
    }
    ?>

    Step 3 – Disable the “add to cart” field

    Now we will be able to create a conditional field to hide or display the fields, modify the “add to cart” button and also add additional information to the product page. Next, we will create a code to deactivate the “add to cart” fields. The code below will help us achieve this.

    <?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 );
    ?>

    Thanks for reading, Leave us your message through our Contact form . You might also be interested in “Create a Video Channel on Your Website with YouTube API.”

     

    Leave a Reply

    Do you want a quality website, ecommerce or tools?

    Please leave us a message, and an expert will contact you within the next few hours for a free 15 min consultation

    Free Estimate