How to Add a Custom Fast Order Button with Integrated Contact Form 7 to WooCommerce (Woodmart or Any WordPress Theme)

Are you looking to add a custom Fast Order button or a “Buy Now” button to your WooCommerce product pages that allows customers to easily make inquiries or orders? In this article, we’ll show you how to create a custom button that opens a Contact Form 7 form for personalized inquiries. This setup is perfect for shop owners using the Woodmart theme (or any WordPress theme) who want to improve user interaction and streamline their sales process.

Why Add a custom Fast Order Button?

The “Fast Order” or “Buy Now” button is a great feature for any eCommerce site because it allows potential buyers to quickly get in touch for a particular product without having to go through the full checkout process. This can be especially useful for customers who prefer personalized support before making a purchase, making it a great addition for stores selling high-value items or products that require customization.

Step-by-Step Guide to Adding a custom Fast Order Button

1. Create a Custom Plugin

The first step is to create a custom plugin. This plugin will be responsible for adding the button and handling the display of the Contact Form 7 form. You can add the code below directly to your theme’s functions.php file, but it’s best to create a custom plugin to keep the modifications modular and organized.

To create a custom plugin, go to the wp-content/plugins/ folder of your WordPress installation and create a new file called fast-order-button.php or any other name as per your preference ending in .php. Add the following code:

<?php
/*
Plugin Name: Fast Order
Description: Put your description here
Version: 1.0 (Choose your own version based on changes)
Author: DRTSWebWorks
Author URI: https://drtswebworks.com
*/

if (!defined('ABSPATH')) {
    exit; /* This will block the script on direct access */
}

Explanation:

• Plugin Name and Header: The plugin header details give your plugin a name, description, version, and author information. This information will be visible in the WordPress plugin dashboard, making it easy to identify and manage.

2. Add the custom fast order Button and Form Container

Next, we’ll add a function to display the custom Fast Order button and form container on the product page. This button will allow customers to make quick inquiries without going through the full checkout process.

add_action('woocommerce_after_add_to_cart_form', 'drtswebworks_add_modal_button_wrapper', 20);

function drtswebworks_add_modal_button_wrapper() {
    $html_block_id = '';
    $html_block_content = do_shortcode('[html_block id="' . $html_block_id . '"]');

    echo '<div class="fast-order-button-wrapper">';
    echo '<button id="fast-order-button" class="button alt fast-order-btn" style="background-color: #D71018; color: #fff; padding: 10px 20px; margin-top: 15px; margin-bottom: 15px; margin-right: 15px; border: none; cursor: pointer; font-weight: bold; border-radius: 5px;">Button Name</button>';
    echo '<div id="fast-order-form-container" class="fast-order-form-container" style="display: none;">' . $html_block_content . '</div>';
    echo '</div>';
}

Explanation:

• Adding the custom fast order Button: The drtswebworks_add_modal_button_wrapper() function adds the “Button Name” button (Or any other name, choose your own, as per own preference). This custom fast order button allows the user to open the form for quick inquiries.
• Form Container: The form container (fast-order-form-container) is initially hidden and will be displayed when the button is clicked. The form content is pulled in via an HTML block ([html_block id="***"]) using the Contact Form 7 shortcode.

3. Enqueue Scripts and Styles

We need to enqueue the necessary scripts and styles to ensure that the button and form behave as intended. This includes adding custom CSS and jQuery for the form’s toggle behavior.

add_action('wp_enqueue_scripts', 'drtswebworks_enqueue_modal_scripts');

function drtswebworks_enqueue_modal_scripts() {
    wp_add_inline_style('theme-style', drtswebworks_get_modal_css());
    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', drtswebworks_get_modal_js());
}

Explanation:

• Enqueuing Styles and Scripts: The drtswebworks_enqueue_modal_scripts() function enqueues the necessary CSS and JavaScript. The custom CSS is added inline to ensure it gets applied correctly, and jQuery is enqueued for handling the button click event.

4. JavaScript for Form Toggle and Prefill Product Data

Now we’ll add the JavaScript needed to toggle the visibility of the form when the “Fast Order” button is clicked and prefill the product name in a text field.

function drtswebworks_get_modal_js() {
    return "
    jQuery(document).ready(function($) {
        $('#fast-order-button').on('click', function() {
            var formContainer = $('#fast-order-form-container');
            var productName = $(this).closest('.product').find('.product_title').text();
            if (formContainer.is(':visible')) {
                formContainer.slideUp();
            } else {
                formContainer.slideDown();
                formContainer.find('input[name=\"product\"]').val(productName);
            }
        });
    });
    ";
}

Explanation:

• JavaScript for Toggle and Prefill: The JavaScript code is responsible for showing or hiding the form container when the “Fast Order” button is clicked. Additionally, it sets the value of the text field named product with the product name, making it easier for the customer.
• Dynamic Product Name: The product name is retrieved using $(this).closest('.product').find('.product_title').text(), which ensures the correct product name is automatically filled in.

5. Add Custom CSS for Styling your custom fast order button

To ensure that the button and form are styled properly, we add some custom CSS. This CSS will make the button look appealing and position the form correctly on the product page.

function drtswebworks_get_modal_css() {
    return "
    .fast-order-form-container {
        margin-top: 15px;
        padding: 15px;
        border: 1px solid #ccc;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    }

    .fast-order-button-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .fast-order-button-wrapper .button {
        margin-right: 15px;
    }

    .fast-order-button-wrapper .button:last-child {
        margin-right: 0;
    }
    ";
}

Explanation:

• Form Container Styling: The .fast-order-form-container class is styled to provide padding, a border, and a slight shadow, making it look more visually appealing.
• Button Wrapper Styling: The .fast-order-button-wrapper class uses flexbox to center the buttons horizontally and align them properly. Each button is given some margin to ensure they are spaced evenly.
• You can choose your own styling. For the website I have created the custom plugin, I had these colors as main for the theme, so wanted to match them.

Update the Contact Form 7 Form

To use a text field for the product name that is automatically filled in, update your Contact Form 7 form as follows:

<label> Name:
    [text* name]
</label>

<label> Phone number:
    [tel* phone]
</label>

<label> Product:
    [text product]
</label>

[submit "Send"]

Explanation:

• Product Text Field: The [text product] field will be filled automatically when the customer clicks the “Fast Order” button. This makes it visible to both you and the customer, which can help avoid confusion regarding which product they are inquiring about.
• Don’t forget to add these specific requirements – name, phone, product to the settings of the contact form, otherwise it will highlight an error.

6. Adding the Plugin to Your Site

• Upload the Plugin: Once the file is saved, you can upload it to the wp-content/plugins/ directory via FTP or use your hosting file manager.
• Upload the Plugin: You can directly put the whole code together, save it in a single .php file – for example: fast-order.php, then compress into ZIP and go to your WordPress Dashboard > Plugins > Add new > Upload.
• Activate the Plugin: Go to the WordPress dashboard, navigate to Plugins, and activate the “Fast Order” plugin, and the custom fast order button will appear in your products page.

Benefits of Using a Custom fast order Button for WooCommerce

• Easy Product Inquiries: Customers can easily fill in their details for quick orders or inquiries, which is especially useful for businesses that deal with custom products or need to interact with the customer before an order.
• Enhanced User Experience: The button is positioned and styled to match the rest of your theme, making it intuitive for customers to click and use.
• Flexibility with Contact Form 7: Using Contact Form 7 allows you to create custom fields and collect all the information you need from your customers in an organized manner.

Tips for Using the custom Fast Order Button

1. Positioning: Make sure the button is placed in a logical position, close to the product details, to make it easily accessible for customers.
2. Customization: You can customize the Contact Form 7 form to add specific fields, such as size, color, or other preferences, depending on your product type.
3. Responsiveness: Use responsive styles to ensure that the custom fast order button and form look great on both desktop and mobile devices.

Adding a custom Fast Order button or a “Buy Now” button to your WooCommerce store can significantly enhance customer interaction and improve conversions. By following the steps above, you can integrate a customized, easy-to-use button that works perfectly with Contact Form 7 to gather inquiries. This setup is highly flexible and can be adapted to almost any WordPress theme, including Woodmart.

If you’re looking to improve your eCommerce store’s user experience, this type of custom feature is a great place to start. With just a few lines of code, you can transform the way your customers interact with your products.

Plugins by DRTSWebWorks