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.

Here The Full Plugin

For download this plugin - visite this site - https://download-directory.github.io/
and paste here this link - https://github.com/sknetking/wp-plugins/tree/2019b0f08d1b199db04b9c8a7465a10222ce5994/wc-price-breakup
And download the plugin.

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.