WooCommerce is one of the best eCommerce plugins, and Contact Form 7 (CF7) is a popular contact form builder for WordPress. But what if you want users to select a WooCommerce product directly from a dropdown within a Contact Form 7 form?
In this guide, we’ll show you how to easily add a WooCommerce product dropdown selector in Contact Form 7 using the Product Dropdown Selector for Contact Form 7 plugin—a beginner-friendly solution that requires no coding at all!
This method is beginner-friendly and doesn’t require any coding!
What is the WooCommerce Product Dropdown in Contact Form 7?
A WooCommerce Product Dropdown in Contact Form 7 is a useful feature that allows users to select a product directly from a dropdown menu within a contact or inquiry form. This makes it easier for customers to specify the product they are interested in without manually typing its name.
This feature is especially beneficial for businesses that receive product inquiries, custom order requests, or quotation requests via Contact Form 7. Instead of making customers scroll through multiple product pages, a dropdown provides a quick and efficient selection process.
Understand by example :
Imagine you run an online store selling t-shirts in different sizes and colors. Instead of asking customers to manually enter the product details, a WooCommerce Product Dropdown in Contact Form 7 allows them to select their preferred size and color directly from the Contact Form 7, ensuring accurate and hassle-free submissions.
This improves user experience and streamlines communication between customers and store owners.
Why Use a WooCommerce Product Dropdown in CF7?
- Streamlines Order Processing: Captures relevant product information directly within the form, simplifying the process for your team
- Perfect for Forms: It’s commonly used in forms like Contact Form 7 to let users select a product while submitting inquiries or requests.
- Customizable: You can customize the dropdown to match your store’s design and functionality needs.
- Increasing Sales Opportunities: Adding a product dropdown to your forms makes it easy for customers to select a specific product when sending inquiries. This can help boost sales, especially for custom orders or special product requests.
- Integrates Seamlessly: Easily integrates with your WooCommerce setup and Contact Form 7 plugin, ensuring smooth functionality across your website.
How to Add WooCommerce Product Dropdown Selector in Contact Form 7?
Here’s a step-by-step guide to adding a contact form 7 woocommerce product dropdown field to your site
Step 1: Install and Activate Required Plugin
- Go to your WordPress dashboard
- Install Contact Form 7
- Install WooCommerce (if not already installed) – Follow the same steps to install and activate WooCommerce.
2. Install Product Dropdown Selector for Contact Form 7
- Now Download Product dropdown selector for contact form 7 free
- Then Install & Activate it.
Step 2: Create/Edit a Contact Form in Contact Form 7
Now, let’s add the WooCommerce product dropdown inside a contact form
- Go to Contact > Contact Forms
- Click Add New or edit an existing form
- Give your form a name (e.g., Product Inquiry Form)
Step 3: Add WooCommerce Product Dropdown in Contact Form 7
- In the form editor, place your cursor where you want the dropdown.
- Click the Product Dropdown button (added by the plugin).
- Configure the settings:
- Field Name: This is the tag that will be used to capture the selected product in emails and form submissions. You can leave it as default or customize it (e.g., “selected_product”).
- Show Products By: Choose how to display products—by category, tag, color, size , featured product and best selling product.
- Layout: Choose between a Dropdown or Select.
- Show product detail in dropdown mode.
- Display price in product dropdown.
- Custom Class: Add a custom CSS class if necessary.
- Once you’re done, click Insert Tag to add it to your form. Then, Save Changes to apply your settings
Step 4: Configure Email to Capture Selected Product in Contact Form 7
After adding the WooCommerce product dropdown to your form, you need to make sure that the selected product appears in the email you receive when a user submits the form. Follow these steps carefully:
- Go to the Mail tab inside Contact Form 7.
- In the Message Body section, add this line:
Selected Product: [tag_name]
- (Optional) Customize the email format, for example:
New Product Inquiry Received!
Name: [your-name]
Email: [your-email]
Phone: [your-phone]
Selected Product: [tag_name]
Message: [your-message]
Thank you!
- Scroll down and Click Save.
- Now, when someone selects a product from the dropdown and submits the form, you’ll receive the selected product name in your email.
Step 5: Embed the Shortcode
Copy the shortcode and paste it into any page or post to show the WooCommerce product dropdown in your form.
- Go to Pages > Add New
- Paste the shortcode inside the page
- Click Publish
Step 6: Test Your Form
- Open the page and check if the product dropdown appears correctly.
- Select a product and submit the form.
Final Thoughts
Adding a WooCommerce product dropdown in Contact Form 7 is a powerful way to streamline the inquiry process for your customers. With the Product Dropdown Selector for Contact Form 7 plugin, you can easily integrate product selection without writing a single line of code.
Ready to get started? Download the Product Dropdown Selector for Contact Form 7 plugin now and simplify the way your customers submit inquiries! 😊
If you have any questions or need further assistance, feel free to check out our detailed documentation for step-by-step guidance. If you still need help, don’t hesitate to contact us — we’ll be happy to assist you!