How to Replace WooCommerce Add to Cart Button with Form Link (Without Extension)

If you're using WooCommerce, there may be times when you want to send customers to a form that doesn't require payment. In this case, by default, it is impossible. In this case, you must make adjustments to your website. Or alternatively, you need to install an extension that accomplishes this task. In this article, we propose to explain the process to you. What we'll describe below is more for web developers who don't want to install an extension. If you want to install an extension, we recommend the one we developed . It's free on GitLab. You can also contact us for customization.

How to use the recommendations below

If you have some knowledge of PHP development, you can simply copy the code and paste it into your current theme's functions.php file. Another option could be to create a php file, put the code and use the include or require function to add it to the functions.php file.

What you will be able to achieve with the extension

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

• Give 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 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 are going to make all the changes in the functions.php file of the installed theme. We are going to present you an extension built on the same code which allows you to do the same job.

Make adjustments to your WordPress theme

You can make the changes either in the current theme (installed on your website or via an extension). In the following, we will see how to do it in your theme.

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

The tutorial is divided 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   which will allow to control the activation or deactivation of the button

The snippet below will allow us to create a meta post to enable or disable add to cart from the product page. In the code above, you are creating a field that will be below creating and editing 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 which helps to add the extra form fields
• product – matches the post type (WooCommerce uses product as the post type key). If you want the meta box to appear in other post types, you can use a PHP array with the list of post keys. Visit this link to learn more about metaboxes.

Show_your_cart_box is a callback function that displays our form fields from the meta box. 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. With these three functions, you will have additional information at the bottom of each product modification or addition. You will have, for example, something similar to this image. Eventually the combined codes will look like this:

Step 2 – Add additional information to the product page.

We will now create a filter that will help add text and a button on the product page. (Client side). With this code, you should be able to see a button appear on your product page with the message you see in the code.

Step 3 – Disable the "add to cart" field

Now, we will be able to create a conditional field to hide or show the fields, modify the "add to cart" button as well as add additional information to the product page. Next, we will create a code to disable the "add to cart" fields. The code below will help us achieve this. If you follow the product elaborated above, you should have a product page after activating the custom link similar to this.

Changed the "Add to Cart" button to a custom link from an extension.

One of the advantages of extensions is that it is independent of the WordPress theme. Indeed, with an extension, you can change themes without having to redo the same work. 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?

After downloading the extension, you need to go to setting ⇒ Custom product link. You will be able

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

Once you have completed the configuration, you must go to the pages of your products on which you would like to have a personalized link and click on Yes. This will be enough to see the button appear on your product page. Below is a small video demonstration If you want to save time, click on the link below to download the extension.