WooCommerce Add Offer Button

WooCommerce Make an Offer Button

This article in intended to show you how to create a “Make an Offer” button next to the “Add to Cart” button in the WooCommerce eCommerce plugin for WordPress. When users click on the button, a AJAX-styled pop up created by the Easy FancyBox will be presented with a contact form inside it created by the Contact Form 7 plugin. The form will allow users to enter their name, email address and their telephone number, then send the offer.

All in all— this is a fairly elegant solution, especially if you are already running most of these WordPress plugins. It also puts the form right in the center of the screen and darkens the background (if you like) allowing your potential customer to concentrate fully on making you an offer!

Plugins you Need

WooCommerce, Easy FancyBox, Contact Form 7 & Add Offer Button

The only setting that needs to be modified on any of these plugins is one located inside the settings for Easy FancyBox. In the settings page for that plugin, there is a check box that needs to be ticked. It’s labeled, “Inline Content”. Make sure that’s selected and enabled. From experience I know that the Easy FancyBox plugin doesn’t always play nice with other lightbox plugins, and often you may end up with a duplicate lightbox if your theme already has one or you are already using a light box plugin.

Needless to say, I’m not trying to troubleshoot all these potential scenarios, but it’s possible to configure Easy FancyBox to only show only for inline content, so that’s what I recommend in the case you experience trouble like that.

Getting Started

Here are the action hooks that need to be added to your WordPress theme’s functions file. The first function creates the button that will sit next to the standard WooCommerce Add to Cart button. The class needs to have the “fancybox-inline” directive to be able to launch the contact form that actually sends the offer. The rest of that class is simply the theme’s default for the Add to Cart Button. The margin is included to make the button sit a little to the right and create space between the two buttons. I recommend keeping that unless your theme’s default class already take care of spacing issues.

The first action adds the code to the page using WooCommerce Actions.

function show_offer_button() {
    echo '&lt;a style="margin-left:4px;" class="fancybox-inline single_add_to_cart_button button alt" href="#make_offer"&gt;Make Offer&lt;/a&gt;';
}
 
add_action('woocommerce_after_add_to_cart_button', 'show_offer_button');

Finishing the Project

Obviously, you need to have created a specific form to show when users click the “Make an Offer” button. The one I’m using is called Make_Offer. We’ll use the WordPress specific “do_shortcode” command to run the Contact Form 7 short-code within this function. Some of this code is superfluous, but is kept just to show how we are using it in certain instances. The first function created the HTML for the hidden div and the contact form. The first action inserts the code into the Woo product page.

We are using the “woocommerce_before_single_product_summary” area, because that’s where it seemed to work best for our application. There are other spots (actions) that could be used. Plenty in fact, just review them here.

function show_make_offer() {
    $final_html = do_shortcode('[contact-form-7 id="5236" title="Make_Offer"]');
    echo '&lt;div style="display:none;" class="fancybox-hidden"&gt;&lt;div id="make_offer" style="padding:30px;"&gt;&lt;h1&gt;Submit Your Offer&lt;/h1&gt;&lt;p style="margin-left:-12px;padding:12px;font-size:15px!important;"&gt;Enter your offer details and click &lt;strong&gt;send&lt;/strong&gt;.&lt;/p&gt;'.$final_html.'&lt;/div&gt;&lt;/div&gt;';
}
 
add_action('woocommerce_before_single_product_summary', 'show_make_offer');

Contact Form 7 Mail Configuration

Take a look at this code and you will see that Contact Form 7 easily allows you to include the post title and post URL so that you don’t have to come up with some fancy solution to know what they are actually making an offer on. With this article, all your bases are covered and you actually should be able to implement this solution within a few minutes.

This code below is configured under the “Mail” tab inside where you create contact forms.

From: [your-name] &lt;[your-email]&gt;
Subject: 
 
Message:
[your-name] is offering: [offer-amount] for: [_post_title], as described on: [_post_url]
 
Their telephone number is: [telephone-no]

Conclusion

I had been using Easy Fancy Box on some client sites to popup a nice Bootstrap-styled contact form with Contact Form 7 when I thought up this use for it. If you have troubles, take a look at this thread at wordpress.org. While this support thread doesn’t explicitly cover this tutorial, the concept includes using Contact Form 7 inside Easy FancyBox. This post is intended for people who already know a bit about WordPress, WooCommerce and using actions. If you need help, you could always drop me an email, or use the comments.

Thanks!