display cf7 signature png from woocommerce form...

Hi,
I use a cf7 form in woocommerce order details page. The user fill the form and draw his signature. The signature is stored as a png in a custom folder. I know you haven't yet any integration with cf7. But do you think it could possible to render this png in my templates?
Regards

Hi,

1. Is your E2Pdf Template connected to the "WooCommerce" orders?

2. Does the order created under WooCommerce have any info about the "signature" or cf7 entry relation? Maybe you can attach some screenshots of an example order?

P.S. You can make the message private so only we can see the message.

---

We would really appreciate your feedback at WordPress.org!

If your form submission generates a new status for the order, it seems you can get the URL of the image generated by CF7 and the order. If so, then you need to get the "signature" image URL generated by the CF7 and add it as metadata to the WooCommerce Order,

For example:
$order = wc_get_order($order_id);
$order->update_meta_data('_signature', $path_to_the_signature_image);
$order->save();

Or:
update_post_meta($order_id, '_signature', $path_to_the_signature_image);

In the E2Pdf it must be possible to get that value as:
[e2pdf-wc-order key="_signature" meta="true"]

---

We would really appreciate your feedback at WordPress.org!

You mean adding this to functions.php?

function add_signature_to_order_meta($order_id, $signature_path) {
$order = wc_get_order($order_id);
$order->update_meta_data('_signature', $signature_path);
$order->save();
}

No, it must be added to the function that updates the WooCommerce Order status. It needs to check with the CF7 PHP hooks (addon) how it's integrated.

If you wish, you can submit a support ticket with access details to WP Admin Dashboard and FTP access details here: https://e2pdf.com/support/request so we can check your setup and see if it's possible and how to accomplish.

---

We would really appreciate your feedback at WordPress.org!

It looks like you are using https://wordpress.org/plugins/digital-signature-for-contact-form-7/. It will be a bit more complex. A signature is generated only after form submission. So there are 2 possible ways:

1. Fire hook after entry created with CF7 -> get the Entry ID -> get the URL to the "signature" image from that entry -> update the WooCommerce Order.

or

2. Generate from the $_POST, but we have no idea if your $_POST data contains needed data for the "signature". We checked their demo and it looks like the field that generates data for the image is $_POST['signature-xxx'], where xxx is some number and not $_POST['signature']. Also, it's an image encoded with base64 but it's not saved at this stage, however, it seems possible to save base64 encoded value to the Order to use inside E2Pdf, but maybe you it could be required to fire functions to save "image" directly. It requires debugging.

Unfortunately, we can't provide you a snippet as there are a lot of unknown variables, we need access to your website to see your setup. You can try to create a copy of the website and remove all data that is private and provide us access details to FTP and WP Admin Dashboard. Also, mention please URLs so we can replicate the process...

---

We would really appreciate your feedback at WordPress.org!

Hello,
I finally did it. I replaced extensions for cf7 plugin by cf7db. And this:

Script to save the order id into cf7db, from the order url:

<!-- recuperer donnee form cf7 details commandes order id -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Récupérer l'ID de la commande à partir de l'URL et définir la valeur du champ caché 'order_id'
const orderIdInput = document.getElementById('order_id');
if (orderIdInput) {
const url = window.location.href;
const orderIdMatch = url.match(/view-order\/(\d+)/);
if (orderIdMatch && orderIdMatch[1]) {
orderIdInput.value = orderIdMatch[1];
}
}
});
</script>

Snippet to save the signature url related to the order id:

// Enregistrer l'URL de la signature dans les métadonnées de la commande avant l'envoi du formulaire
add_action('wpcf7_before_send_mail', 'save_signature_url_to_order_metadata');
function save_signature_url_to_order_metadata($contact_form)
{
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();

if (isset($posted_data['order_id'], $posted_data['signature-700'])) {
$order_id = absint($posted_data['order_id']);
$signature_url = $posted_data['signature-700'];

$order = wc_get_order($order_id);
if ($order) {
$order->update_meta_data('_signature', $signature_url);
$order->save();
}
}
}

And I use a image field for e2pdf with [e2pdf-wc-order key="_signature" meta="true"] and display image only.

Now i don't understand why I can't do the same with the attachement from my form. Sometimes the user can import an image (png or jpeg), and I want use this image on the e2pdf file. I can open another ticket for this if you want.

Best regards, and thank you again for your support!

Hi,

It looks like the contact form keeps uploaded files not under $submission->get_posted_data();

Can you check, please it under:
$uploaded_files = $submission->uploaded_files();

---

We would really appreciate your feedback at WordPress.org!

Hi,
Thank you,
$uploaded_files = $submission->uploaded_files();
helped me to adapt the snippet. Here is the full functions.php code to save the signature and the attachments from cf7 forms in the woocommerce details order pages. it only works with cfdb7 plugin (https://fr.wordpress.org/plugins/contact-form-cfdb7/) where cf7 forms files are stored:

add_action('wpcf7_before_send_mail', 'save_signature_url_and_attachment_to_order_metadata');
function save_signature_url_and_attachment_to_order_metadata($contact_form)
{
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();
$uploaded_files = $submission->uploaded_files();

if (isset($posted_data['order_id'], $posted_data['signature-700'])) {
$order_id = absint($posted_data['order_id']);
$signature_url = $posted_data['signature-700'];

$order = wc_get_order($order_id);
if ($order) {
$order->update_meta_data('_signature', $signature_url);

// Récupérer les données enregistrées par CF7DB
global $wpdb;
$cfdb = apply_filters('cfdb7_database', $wpdb);
$table_name = $cfdb->prefix . 'db7_forms';
$form_post_id = $contact_form->id();

$results = $cfdb->get_results(
$cfdb->prepare("SELECT * FROM $table_name WHERE form_post_id = %d ORDER BY form_id DESC LIMIT 1", $form_post_id)
);

if (!empty($results)) {
$result = reset($results);
$form_data = unserialize($result->form_value);

// Trouver l'URL du fichier joint dans les données enregistrées par CF7DB
if (isset($form_data['tampon-420cfdb7_file'])) {
$attachment_file_name = $form_data['tampon-420cfdb7_file'];
$upload_dir = wp_upload_dir();
$cfdb7_uploads_dir = $upload_dir['basedir'] . '/cfdb7_uploads';
$attachment_url = $upload_dir['baseurl'] . '/cfdb7_uploads/' . $attachment_file_name;

// Enregistrer l'URL du fichier joint dans les métadonnées de la commande
$order->update_meta_data('_file', $attachment_url);
}
}

$order->save();
}
}
}

Maybe it will help someone. Best regards!