Reply To: MULTISTEP PRODUCT VARIATION ENQUIRY

I solved it like that (Code is added after add to cart button in product page, but you can change hook or hide and show where you want with CF7 shortcode):

Contact Form 7 setting:
<label>[text* your-name input-bg placeholder “Nome*”]</label>
<label>[text* your-surname input-bg placeholder “Surname*”]</label>
<label>[text* your-tel input-bg placeholder “Tel*”]</label>
<label>[email* your-email input-bg placeholder “E-mail*”]</label>
<label>[text your-subject class:product_name]</label>
<label>[text your-details class:product_details]</label>
[submit class:btn class:btn-color-primary class:btn-shape-rectangle class:btn-size-default “Send”]

Contact Form 7 mail:
— Request for product —
From: [your-name] [your-surname] <[your-email]>
Product: [your-subject]
Product Variation: [your-details]

Custom function:

add_action( ‘woocommerce_after_add_to_cart_form’, ‘product_enquiry_custom_form’ );
function product_enquiry_custom_form() {

global $product, $post;

//Dot forget to set HERE your Contact Form 7 shortcode:
$contact_form_shortcode = ‘[contact-form-7 id="1834" title="Preventivo Rapido"]‘;

// compatibility with WC +3
$product_id = method_exists( $product, ‘get_id’ ) ? $product->get_id() : $product->id;
$product_title = $post->post_title;

// The email subject for the “Subject Field”
$email_subject = __( ‘Enquiry for’, ‘woocommerce’ ) . ‘ ‘ . $product_title;

foreach($product->get_available_variations() as $variation){
$variation_id = $variation[‘variation_id’];
foreach($variation[‘attributes’] as $key => $value){
$key = ucfirst( str_replace( ‘attribute_pa_’, ”, $key ) );
$variations_attributes[$variation_id][$key] = $value;
}
}
// Just for testing the output of $variations_attributes
// echo ‘

'; print_r( $variations_attributes ); echo '

‘;

## CSS INJECTED RULES ## (You can also remve this and add the CSS to the style.css file of your theme
?>
<style>
.wpcf7-form-control-wrap.your-product{ opacity:0;width:0px;height:0px;overflow: hidden;display:block;margin:0;padding:0;}
</style>

<?php

// Displaying the title for the form (optional)
echo ‘<h3 class=”enquiry-form-title”>’.$email_subject.'</h3><br>
<div class=”enquiry-form”>’ . do_shortcode( $contact_form_shortcode ) . ‘</div>’;

## THE JQUERY SCRIPT ##
?>
<script>
(function($){

<?php
// Passing the product variations attributes array to javascript
$js_array = json_encode($variations_attributes);
echo ‘var $variationsAttributes = ‘. $js_array ;
?>

// Displaying the subject in the subject field
$(‘.product_name’).val(‘<?php echo $email_subject; ?>’);

////////// ATTRIBUTES VARIATIONS SECTION ///////////

var $attributes;

$(‘td.value select’).blur(function() {
var $variationId = $(‘input[name=”variation_id”]’).val();
// console.log(‘variationId: ‘+$variationId);
if (typeof $variationId !== ‘undefined’ ){
for(key in $variationsAttributes){
if( key == $variationId ){
$attributes = $variationsAttributes[key];
break;
}
}

}
if ( typeof $attributes !== ‘undefined’ ){
// console.log(‘Attributes: ‘+JSON.stringify($attributes));
var $attributesString = ”;
for(var attrKey in $attributes){
$attributesString += ‘ ‘ + attrKey + ‘: ‘ + $attributes[attrKey] + ‘ — ‘;
}
$(‘.product_details’).val( ‘Product <?php echo $product_title; ?> (ID <?php echo $product_id; ?>): ‘ + $attributesString );
}
});

})(jQuery);
</script>

<?php
}

Now I try to make multistep but I think is not really easy!

Best,
Fabio