Attach WooCommerce product image to Contact Form 7 email

Parse the outgoing email to determine the product ID and then retrieve the product image and attach it to the email.

My post about a Product Enquiry form using WooCommerce and Contact Form 7 has had a number of interesting comments and enhancement requests. A few days ago a visitor asked about attaching a product image to the email. Although I have never used the File Attachments feature I found a filter (‘wpcf7_mail_components‘) in the Contact Form 7 code that looked promising and suggested that the visitor try it out.

Must Solve It

It often happens that such an enhancement request sticks in my head and I have to try to make it work – that’s exactly how the Product Enquiry form for Variable WooCommerce Products post came to be. I did a little testing of the ‘wpcf7_mail_components‘ filter and read up on file attachments with Contact Form 7.

Filter Inputs

The filter function receives three variables: an array of the email components (subject, headers, body etc), the form settings and the form object (before shortcodes expanded).

The email components array contains the email body, subject, headers and an array of attachments (the full path to the files, not their urls).

After a number of error_log() calls to see the data I was ready to change the Contact Form 7 form and email to enable attachments.

Contact Form 7 form and email

As before, I needed the Contact Form 7 Dynamic Text Extension plugin. I used it to include a hidden field in the form. This field has the post ID.

Then in the email message body I put this on a line with ‘Product ID:’. The filter function will search for this line to retrieve the product ID.
While the message body can, of course, contain other text – this line must be somewhere in there.

How the code works

I added a lot of error checking to this code because it is possible that something could go wrong e.g. in the regular expression search or if an invalid product ID is found. I wanted to ensure that the code would exit safely as soon as it encountered an error. I felt it was better for the email to be sent without an attachment than not be sent at all.

The code first checks the form ID to ensure that it’s looking at the correct form. The filter function runs for all forms but it would be pointless processing the wrong form. You will need to change the form ID when you use the code on your site.

Then it searches the email message body for the ‘Product ID:‘ line. It checks that the extracted ID is a number and creates a WooCommerce product object and then retrieves the product image. I chose the ‘large‘ image size because the site I was testing with had very large full size images (2 – 5 MB PNG image files!). You can change it to ‘full‘ if appropriate for your site.

The wp_get_attachment_image_src() function returns the url and Contact Form 7 needs the path so I use the ‘WP_CONTENT_URL‘ and ‘WP_CONTENT_PATH‘ constants to change from a url to a path.

The final check is that the file exists and then it’s appended to the array of attachments.

Full Code

Another use case

While thinking about this enhancement I thought of a useful use case – for when a customer requests a PDF file/catalogue.

The form could have a drop down menu or checkboxes or radio buttons where a customer chooses which catalogue they would like to receive. The answers would be included in the email message body and the filter function would search the body (like it does for ‘Product ID:‘) and add the appropriate PDF to the list of attachments.

I would include all the attachments via the admin area (so that CF7 verifies that they exist). Each would have a filename that is similar to the dropdown/checkbox/radio button name and the code would remove the unwanted files. If the code is written carefully and files named consistently, the code could be generic and work forever.