acf_form, Woocommerce and user image field

• jamesryder

• October 23, 2015 at 1:08 am

I’m using ACF (5.3.1) with Woocommerce to add an extra field to a user profile. I’ve added an image field and then am adding it to a frontend form so that the user/account holder can upload an image:

 add_action( 'woocommerce_edit_account_form', 'woocommerce_edit_account', 10 );
 add_action( 'woocommerce_save_account_details', 'my_woocommerce_save_account_details' );

function woocommerce_edit_account() {

	acf_form_head();

	acf_form(array(
		'field_groups' => array(931), 'form' => false
	));

}

function my_woocommerce_save_account_details( $user_id ) {
 
  // $post_id to save against
	$post_id = 'user_' . $user_id;

// update the post
do_action('acf/save_post', $post_id);  
}

Upload is possible and the image is saved to the field (I can see in admin)

But…

There is no preview of the image when reloading the form even if an image is already uploaded the user does not see a preview. Is there a way to show a preview of the image if the field already has a file?

Thanks

• Jonathan

• June 24, 2016 at 5:07 am

Hi @jamesryder

I’m not sure but I think your issue _might_ be due to where you’ve placed acf_form_head.

It should be located before any output and currently you’re placing it smack in the form.

Try this:

<?php
/**
 * Output ACF form functionality on the edit account page in woocommerce
 */
function add_acf_head_to_wc(){
	if( is_wc_endpoint_url() ){
		acf_form_head()
		
	}
	
}
add_action( 'template_redirect', 'add_acf_head_to_wc', 1000 );

/**
 * Output our ACF image field in the WooCommerce edit account form
 */
function woocommerce_edit_account() {
	acf_form(array(
		'field_groups' => array(931), 'form' => false
	));

}
add_action( 'woocommerce_edit_account_form', 'woocommerce_edit_account', 10 );

/**
 * Do an ACF save action on the user. 
 * NOTE: I'm not sure this is even needed..? 
 */
function my_woocommerce_save_account_details( $user_id ) {
	// $post_id to save against
	$post_id = 'user_' . $user_id;
	// update the post
	do_action('acf/save_post', $post_id);  
	
}
add_action( 'woocommerce_save_account_details', 'my_woocommerce_save_account_details' );

• rosie

• December 9, 2016 at 5:15 am

Here’s how I got this to work. Note the ‘post_id’ and ‘return’ values in acf_form():

add_action( 'woocommerce_save_account_details', 'acf_form_head', 20 );

function my_woocommerce_edit_account_form() {
	?>
	<fieldset style="margin: 20px 0">
		<legend>Company</legend>
		<?php
		acf_form( array(
			'post_id' => 'user_' . get_current_user_id(),
			'form'    => false,
			'fields'  => array(
				'field_5846fdde9fe34',
				'field_5846fdf79fe35',
				'field_5846fe349fe36',
			),
			'return' => false,
		) );
		?>
	</fieldset>
	<?php
}

add_action( 'woocommerce_edit_account_form', 'my_woocommerce_edit_account_form' );