ACF Form Integration in Woocommerce Checkout

Hello @tasup!

Thanks for the feedback! Your integration looks nice! The “This page is asking you to confirm that you want to leave” is a native ACF feature.

It can be disabled in the Dyanmic Forms UI, under the “Validation” tab, the setting is called: “Hide confirmation on exit”.

Screenshot: https://i.imgur.com/NYtZ2rp.png

Note: I have plans for more integrations with ACF Extended & Woocommerce in the future. It’s not ready yet tho.

Have a nice day ??

Regards.

Hi!

Thanks for the quick response – I totally missed this setting. Nevertheless it still shows the message (I’m testing with Firefox).

Any ideas on that? I might dig into the ACF JS documentation otherwise, maybe there is something to find.

Your plan for the integrations sounds amazing. I really love your work and I bet the next features will be amazing ??

Regards

EDIT:
This is how I added the form with the WC hook.

add_action( 'woocommerce_after_order_notes', 'checkout_participants_field' );
function checkout_participants_field( $checkout ) {
    echo '<div><h2>' . __('Participants') . '</h2>';
	acfe_form('checkout-participants');
    echo '</div>';
}

• This reply was modified 4 years, 8 months ago by tasup.

Hello!

I just tested your code, and you are right, the setting has no effect on your configuration. You won’t find any documentation about that feature, as it is something kinda advanced ??

After looking a bit deeper, I figured out where it comes from. This setting is tied to the Dynamic Form <form> element tag. As you disable it in order to integrate the form in Woocommerce, well the setting doesn’t work.

I’ve added the bug report to the Trello board: https://trello.com/c/ulQnftMW/179-dynamic-forms-add-no-form-element-compatibility-allowing-validation-settings-to-be-applied-when-form-tag-isnt-printed

It will be fixed in the next patch ??

Meanwhile, you can fix it by yourself, following this instructions:

Create a new JS file called: acfe-form-woocommerce.js. Add the following code:

(function($){

    if(typeof acf === 'undefined')
        return;
    
    acf.addAction('prepare', function(){

        acf.unload.disable();

    });

})(jQuery);

In your functions.php file, add the following code to enqueue the file:

add_action('acf/enqueue_scripts', 'my_acfe_form_woocommerce');
function my_acfe_form_woocommerce(){
    
    // Enqueue in front-end only
    if(is_admin())
        return;
    
    // Make sure to set the correct JS file URL
    wp_enqueue_script('acfe-form-woocommerce', get_stylesheet_directory_uri() . '/acfe-form-woocommerce.js', array('jquery'));
    
}

Have a nice day! ??

Regards.

Hello,

Just to let you know that the latest 0.8.5.5 update fix this issue ??

Have a nice day!

Regards.

Hi guys,

Could one of you please tell me how to get the data to save to the user on checkout. I have the fields, the form and displaying the fields at the end of the checkout form, but I can’t get it to display the fields in the users area in WordPress.

Any help would be greatly appreciated.

Hello @bengriff64,

You’ll have to share more details, the code you’re currently using to display the ACF Form, and some screenshots of what you get and what you expect.

Regards.

Hi,

Thank you for your reply.

I have followed this post exactly.

– I have created a field group with the fields I need.
– I have created the form, turned off the submit button, and stopped the validation.
– I have also added a user action to the form of update user and set it to save to current user and save all the fields.
– I have also done the same for load values.
– I am displaying the form in the frontend with:

add_action( 'woocommerce_after_order_notes', 'checkout_exta_fields' );
function checkout_exta_fields( $checkout ) {
    echo '<div><h2>' . __('Apply Form') . '</h2>';
	acfe_form('woocommerce-checkout-fields');
    echo '</div>';
}

What I want is when clicking buy on the checkout, these fields to save to the user data and to the order data.

I think I may be going wrong at point 3 but I’m not sure.

Thank you so much in advance, you are really helping me out here.

Kind regards.

Hi bengriff64,

is this form of you supposed to be for new users? Are your users created after the checkout?

If this is the case you need to add the fields with the ‘user_register’ hook manually. If there is no existing user during the checkout the form won’t do anything.

add_action('user_register', 'add_user_meta_after_registration', 10, 1 );
function add_user_meta_after_registration( $user_id ) {

	$children_repeater = $_POST['acf']['field_5eb42c8079c7a']; //Get the field from $_POST (note that you need the field key here)
	if (isset($children_repeater)){
		update_field('field_5eb42c8079c7a', $children_repeater, 'user_' . $user_id); //Update the field with the ACF funtion 'update_field'. If you pass in a repeater it will create the right structure for you!
	}
}

I hope this helps!

Kind regards.

Absolutely brilliant, thank you both for your answers. One last thing, how do I update a file or image field?

Hello @bengriff64,

What do you mean with “update a file or image field”? You need to be more precise.

Regards.

Apologies.

So this worked for text fields and repeater fields as @tasup suggested.

add_action('user_register', 'add_user_meta_after_registration', 10, 1 );
function add_user_meta_after_registration( $user_id ) {

	$children_repeater = $_POST['acf']['field_5eb42c8079c7a']; //Get the field from $_POST (note that you need the field key here)
	if (isset($children_repeater)){
		update_field('field_5eb42c8079c7a', $children_repeater, 'user_' . $user_id); //Update the field with the ACF funtion 'update_field'. If you pass in a repeater it will create the right structure for you!
	}
}

But how do I save the value of an image or file field?

Sorry to be an absolute pain but I am really new to all of this. How do you also update a checkbox field in the user area? I am using the form as above with a checkbox and button group field in but this isn’t saving the values either.

Thanks a lot in advance.