Support

Account

Home Forums Front-end Issues acf_form, Woocommerce and user image field

Solving

acf_form, Woocommerce and user image field

  • 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

  • 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' );
    
  • 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' );
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘acf_form, Woocommerce and user image field’ is closed to new replies.