Get Appointment

We have received your message and will contact you soon.

Thank you for choosing prositeweb, your web development agency in Montreal. Please call us at +1 (514) 548-2165 if you need immediate support.

Replace the “Add to Cart” button link with a custom link on the WooCommerce 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.

If you are looking for how to change the “add to cart” button link with a custom link on your WooCommerce store’s product page, this article is for you.

Why replace the “Add to Cart” button link with a custom link?

WooCommerce offers four types of products by default:

  • Simple products. Which are generally the products without any configuration
  • Bundled products. In this case, we can have a product assembly. For example, you can use the bundled products option to offer a table and its components if you sell furniture.
  • External or Affiliate Products. If you suggest a company’s products on your website, the external product option can allow you to send customers to the leading supplier’s page to complete the order.
  • And finally, variable products. Variable products are fantastic products with multiple variations. For example, we can have products of different colours, different sizes or with different finishes.

The type of product that most closely resembles the customization of the “Add to cart” button is the case of external or affiliate products. However, the information you send is generally not dynamic.  Therefore, unless you redirect to a unique link that is easy to identify, you won’t know which products the customer has selected unless specified in the description.

The purpose of this article is to see together how you can consider the content or product chosen by the customer.

What the tutorial will do

At the end of the tutorial, you may be able to do the following actions:

  • Give an option to a store admin to enable or disable the add to cart button.
  • Display a custom button to replace the “add to cart” button.
  • Customize the text to explain to users what to do.
  • Display a form in modal form containing the customer’s choice

Note that you can customize your code to achieve your goal.  For this tutorial, we will make all the changes in the functions.php file of the installed theme.  And we’re going to introduce you to an extension based on the same code that does the same job. We have divided the tutorial into three (3) main steps to follow, which are as follows:

Modification in the WordPress theme.

As we have mentioned above, you can change your theme (installed on your website or via an extension). We will see how to do it in your theme in the following.

Steps needed to complete the steps (In the current theme)

We have divided the tutorial into three (3) main steps to follow, which are as follows:

  1. Create a custom feature to enable or disable the “add to cart” button.
  2. Add additional information to the single product page.
  3. Disable the “Add to cart” field

Step 1 – Create a meta box that will control the activation or deactivation of the button

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

In the code above, you create a field below the creation and modification of products. For comment,

  • prosite_option_paiement is the unique identifier of the field you want to add
  • “Add Extra CSS per Product & Disable Add to cart” – Is the field title, You can use loco translate to do the translation
  • ‘show_your_cart_box’ – is a function we are going to define that allows to add the additional form fields
  • ‘product’  – matches the post type (WooCommerce uses the product as the post type key. If you want to make the meta box appear in other post types, you can use a PHP array with post keys. Visit this link to learn more about metaboxes.

show_your_cart_box is a callback function that displays our meta box form fields. You will notice that it is the name of this function that appears in add_to_cart_box.

The save_cart_box_meta function saves information during the modification or addition of a product. You will have additional information at the bottom of each product modification or addition with these three functions. For example, you will have a few things similar to this image.

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

In the end, the combined codes will be similar to this:


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

Step 2 – Add additional information to the product page.

We will create a filter that will add text and a button to the product page. (Client side).

With this code, you should see a button appear on your product page with the message you see in the 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
    } 
}
?>

Step 3 – Disable the “add to cart” field

We will be able to create a conditional field to hide or show the areas, modify the “add to cart” button, and 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 );
?>

If you follow the product elaborated above, you should have a product page after activating the custom link.

Bouton paiement

Modify the “Add to cart” button by a personalized link  from an extension.

One of the advantages of extensions is that it is independent of the WordPress theme. Indeed, you can change themes without redoing the same work with an extension. We provide a theme below that you can download for free to do the same job. The extension uses the codes elaborated above. We have provided some additional information. For example, through the extension, you will be able to:

  • Select the page where you want to send the data
  • Editing texts with Loco Translate
  • Receive an email from the customer with the data and their preferences.

How it works?

Àprès téléchargement de l’extension, vous devez aller à réglage -> Custom product link. Vous allez pouvoir

  • select the page where you want the form to appear,
  • add email addresses where customer data should be sent

Conception

Once you have completed the configuration, you must go to the pages of your products where you would like to have a personalized link and click on Yes.

This should be enough to see the button appear on your product page. Below is a small video demonstration

If you want to save time, click the link below to download the extension.

[the_call_to_action title=”Download the extension for free with full features” action_text=”Download” action_type=”modal” action_link=”exampleModal” data_title=”Get the download link the extension directly in your email “data_action=”telechargement” data_link=”replace-the-button”]

In conclusion

WooCommerce like any other open-source solution is quite flexible in terms of modification. Customizing your page to fit your business realities is relatively easy. If you need our expertise in consulting or software development, you can contact us .

Share :

npgilblas

Agence de création de site web à Montréal

Custom website (WordPress) — Here is how we combined ACF Pro with a plugin to reduce web development time.
11 August 2022
website security — How do you know if a website is trustworthy?
22 March 2022

Do you have a project in mind? Contact our web agency for a free evaluation.

Contact us if you are looking for a Montreal-based web agency capable of supporting you in Backend and Frontend development.