Watch the variation dropdowns and copy the values to a CF7DTE hidden field.
Update: Based on Jerry’s request I updated the code to retrieve the variation price and sale price and add them to the hidden field. This new code is commented out so you can easily enable it if you need it. I also changed how the variation dropdown change is detected – from watching the dropdown to listening for a WooCommerce trigger. This is a better method as it waits for WooCommerce to update the displayed price.
Update: Carl asked if the variation name could be included as his store has multiple Yes/No variation values. I have updated the code (version 0.4) to do allow for this. To not change sites using older versions you will need to set the variationValuesOnly variable to false to see the variation names.
Update: I got an email reporting that the [dynamic_text selected_variations] field was empty in the email. After a few emails the person gave me a link to the site and I saw that they were using WooCommerce Quote or Enquiry Contact Form 7 plugin. This creates a popup so my JavaScript code was not working. I have updated the code below to wait for that plugin’s Enquiry button to be pressed before copying the variations data to the form field.
27 August 2023: I have changed dynamichidden to dynamic_hidden as version 4.0.0 of CF7 DTX as deprecated the former.
I also added the WC tested up to: 8.0.2 line.
This post completes the various combinations of product enquiry forms for Contact Form 7 and Ninja Forms for simple and variable products. My first post was a Product Enquiry form using WooCommerce and Contact Form 7. That post continues to be the most popular on this site and I frequently revisit it to answer questions in the comments.
When someone asked about using the code for a variable product I was unable to figure out a way to handle the selected options for variable products. This led me to investigate Ninja Forms. It’s a huge plugin (19MB vs 530KB for CF7!!) but I have found it easier to use from a developer and user perspective. I was able to use it for a product enquiry for variable products.
Last week Daniella asked me about using a CF7 form for variable products. I made a quick suggestion – use JavaScript to watch for changes to the variations dropdowns and copy the selected options into a hidden CF7DTE field in the form.
The idea stewed in my head over the next few days and then I had block of time to experiment. It turned out to be easier than I expected. I did have to look up a few jQuery functions (.each, .change, .text and .val) and some JavaScript array functions (.push and .join) but it worked. I decided to copy the dropdown text instead of the value as the text (e.g. Long Sleeved) is easier to read than the value (e.g. long-sleeved).
The code depends on the .variations_form CSS class name in the WooCommerce form. This is in the WooCommerce single-product/add-to-cart/variable.php template file. If this file is overridden in your theme then my code may not work. I looked at a few themes and they don’t override the template file. The class name is also referenced in the assets/js/frontend/add-to-cart-variation.js file so it would have to be changed to match a template file change. Based on this, I’m confident that my code will work in most WooCommerce setups without the need for modification.
Easier to use than the Ninja Forms version
The Ninja Forms version inserts all possible variation combinations into a select field. This can make for a long list. Furthermore it requires the user to select the combination that they are interested in. Not particularly user friendly.
With the Contact Form 7 version the variations the user selects are copied into the hidden field. This is much easier for the user.
Maybe I should investigate porting this CF7 code to Ninja Forms…
The Code
You will also need to add the following to the Contact Form 7 form:
And then add this line to the CF7 Mail tab:
The frontend
There is no change to the frontend. As an example, a product with 2 variations it may look like this (screenshot from Storefront theme):
The JavaScript will set the value of the hidden field as shown below:
Is there any solution to pass on selected variants by default? It would be nice if it also included SKU variants.
@Arek – I have updated my code. It now copies the variation value when the page loads *and* when the drop downs change.
Thank you for telling me about this error.
Thank you for your work on this. How would you go about also sending the selected variation’s data like Price, Sales Price, etc. to the contact form?
@Jerry: This question turned out to be a little more difficult than I expected. I had to change when my code runs – I changed from watching the dropdown changing to listening for a WooCommerce trigger. This is better. Thanks for the prompt!!
Then I get the price and sale price. If there is a sale price then the price will have both regular and sale price so I remove the sale price. Then I add both to the hidden field.
I have updated the code and added a section to copy the price and sale price into the hidden field. It is commented out on lines 33 to 43.
Hi, Thanks for the tutorials! I have a question about Variable Product images. How can i sent Variable product image in to the Email? Can you please give me the code?
Regards Sabbir
@Sabbir – I did write about using CF7 to attach a product image to the email (not a variable product image).
Maybe the two bits of code could be combined. I think that the variation ID could be added as a hidden field to your form and the JS code updated to copy the variation ID when the drop downs change. This would be in the email like: Variation ID: 1234
Then the code in the second post would look for ‘Variation ID:‘ and the number. It could then query for that product and get the image.
Thank you very much for this script!
Is there a way to display the variable product label name? The reason for asking is that we have a few “Yes” and “No” attribute options.
@Carl – Absolutely. I’ve reworked the code (version 0.4) to retrieve the variation name and value. For those that don’t want both I’ve added a true/false variable (
variationValuesOnly). You can set it tofalseto get both name and value.Hey
This is what i want but how do i “install” this? where do i put the .php code?
Best regards
Gerrald
@Gerrald: The code is a standalone plugin. Please see my post about installing my plugins.