Adding a "Request a Quote" Modal to WooCommerce
Connect Contact Form 7 to your product pages with a professional popup modal.
Overview
Sometimes, customers need more information before they are ready to buy—especially for high-ticket items or custom services. Instead of forcing them to use a standard contact page, you can add a "Request a Quote" button directly next to the "Add to Cart" button.
This snippet creates a professional popup modal that automatically pulls the Product Name and SKU into your contact form, saving the customer time and ensuring you know exactly which product they are interested in.
Key Features
- Seamless Placement: Hooks directly after the standard WooCommerce Add to Cart button.
- Smart Modal: The popup is triggered via JavaScript and positioned at the footer to avoid breaking any HTML form structures.
- Auto-Population: Automatically fills in the Product Name and SKU into Contact Form 7 hidden fields (or standard inputs).
- Clean UX: Includes a close button and "click-outside-to-close" functionality.
The Implementation Code
Note: Ensure you have Contact Form 7 installed. Update the shortcode ID in the code below with your actual form ID.
<?php
/**
* Add "Request a Quote" Button and Modal to WooCommerce Single Product Pages
*/
// 1. Hook the button next to Add to Cart
add_action( 'woocommerce_after_add_to_cart_button', 'display_quote_button' );
function display_quote_button() {
echo '<button type="button" id="trigger-quote-form" class="button alt" style="margin-left:10px;">Request a Quote</button>';
}
// 2. Hook the modal to the footer to avoid nested form issues
add_action( 'wp_footer', 'add_quote_modal_footer' );
function add_quote_modal_footer() {
// Only load on single product pages
if ( ! is_product() ) return;
global $product;
$name = $product->get_name();
$sku = $product->get_sku() ? $product->get_sku() : 'N/A';
?>
<div id="quote-modal" style="display:none; position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; overflow-y: scroll; background:rgba(0,0,0,0.8);">
<div style="background: #fff; margin: 5% auto; padding: 25px; width: 90%; max-width: 600px; border-radius: 8px; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); max-height: 90vh; overflow-y: auto;">
<span id="close-quote" style="position:absolute; right:15px; top:10px; cursor:pointer; font-size:28px; line-height:1; color:#333;">×</span>
<h3 style="margin-top:0; color:#2c3e50;">Request a Quote</h3>
<p style="background:#f8f9fa; padding:10px; border-radius:4px;">Inquiring about: <strong><?php echo esc_html($name); ?></strong></p>
<?php // Change the ID below to match your Contact Form 7 ID ?>
<?php echo do_shortcode('[contact-form-7 id="2b09072" title="Request A Quote"]'); ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById("quote-modal");
var btn = document.getElementById("trigger-quote-form");
var span = document.getElementById("close-quote");
if (btn) {
btn.onclick = function() {
modal.style.display = "block";
// Inject values into CF7 inputs (Assumes fields are named 'product-name' and 'product-sku')
var nameField = document.querySelector('input[name="product-name"]');
var skuField = document.querySelector('input[name="product-sku"]');
if (nameField) nameField.value = "<?php echo esc_js($name); ?>";
if (skuField) skuField.value = "<?php echo esc_js($sku); ?>";
}
}
if (span) {
span.onclick = function() {
modal.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
</script>
<?php
}
Final Step: CF7 Configuration
To ensure the data is captured correctly, add two fields to your Contact Form 7 template:
[text product-name readonly]
[text product-sku readonly]
The JavaScript in the code above will automatically populate these fields when the "Request a Quote" button is clicked.
This method is highly compatible with most WooCommerce themes as it uses the standard action hooks. If the modal doesn't appear, check if your theme uses a custom single product template.
0 Comments