In woocommerce form-edit-account.php I have an additional form that allows users to change their profile picture. Everything works fine but there is a small problem. When the user clicks Upload Avatar a function should be executed that updates the user's image meta_key through update_user_meta. This is ok.
However the function is not executed because the save_account_details hook is looking for the fields (name, surname, email etc.) that are present in the original form but not in the second form I added. So how can I save the fields of the new form without having the save_account_details hook check the required fields ? I've seen a lot of questions with the solution of turning off required fields, but I don't want to turn them off.
Is there a way to save woocommerce form fields with a different hook?
I appreciate any help thanks.
This is the form I added to the original template form-edit-account.php (I have not replaced but only added).
<!-- START FORM CHANGE SETTINGS -->
<form name="Form-Avatar" action="" method="post" enctype="multipart/form-data" <?php do_action( 'woocommerce_edit_account_form_tag' );?> >
<!-- Avatar Section -->
<div >
<div ><?php
// Visualizza Avatar
if ($attachment_id) {
$original_image_url = wp_get_attachment_url($attachment_id);
// Display Image instead of URL
echo wp_get_attachment_image($attachment_id, $size = array('150', '150')); // Invece dell'array size, stava 'full' come parametro.
} else {
?><img style="" src="<?php echo get_avatar_url($user_id, array ('size' => 150)); ?>" alt=""><?php
}
?></div>
<div >
<div >
<p >
<div >
<label for="file" >Scegli immagine</label>
<label id="file-name" for="file" >Nessuna immagine selezionata</label>
</div>
<input id="file" type="file" style="display:none;" name="image" accept="image/x-png,image/gif,image/jpeg">
<span ><?php esc_html_e( "File consentiti: png/gif/jpeg, dimensione massima 1MB. L'immagine del tuo profilo verrà visualizzata nelle recensioni dei prodotti e nei commenti.", 'woocommerce' ); ?></span>
</p>
</div>
<!-- Show file name inside label avatar -->
<script>
$("#file").change(function(){
$("#file-name").text(this.files[0].name);
});
</script>
<div >
<!-- Upload Avatar -->
<p style="margin-bottom: 0px!important;">
<?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce-avatar' ); ?>
<button type="submit" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Upload Avatar', 'woocommerce' ); ?></button>
<input type="hidden" name="action" value="save_account_details" />
</p>
<?php
// Rimuovi immagine Button
if (isset($_GET['rm_profile_image_id'])) {
if ($attachment_id == $_GET['rm_profile_image_id']) {
wp_delete_attachment($attachment_id);
if (delete_user_meta($user_id, 'image')) {
wp_delete_attachment($attachment_id);
}
?><script>window.location='<?php echo wc_get_account_endpoint_url('impostazioni') ?>';</script><?php
exit();
}
} else {
echo '<a href=' . wc_get_account_endpoint_url('impostazioni') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
}
?>
</div>
</div>
</div>
</form>
This instead is the function of saving the meta_key 'image'
// Save Avatar Action
function action_woocommerce_save_account_details( $user_id ) {
if ( isset( $_FILES['image'] ) ) {
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
// Imposta la cartella in cui salvare gli avatar degli utenti
function wp_set_custom_upload_folder($uploads) {
$uploads['path'] = $uploads['basedir'] . '/avatar-upload';
$uploads['url'] = $uploads['baseurl'] . '/avatar-upload';
if (!file_exists($uploads['path'])) {
mkdir($uploads['path'], 0755, true);
}
return $uploads;
} add_filter('upload_dir', 'wp_set_custom_upload_folder');
$attachment_id = media_handle_upload( 'image', 0 );
if ( is_wp_error( $attachment_id ) ) {
update_user_meta( $user_id, 'image', $_FILES['image']['error'] . ": " . $attachment_id->get_error_message() );
} else {
$old_attachment_id = get_user_meta( $user_id, 'image', true );
wp_delete_attachment($old_attachment_id);
update_user_meta( $user_id, 'image', $attachment_id );
}
remove_filter('upload_dir', 'wp_set_custom_upload_folder');
}
} add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );
CodePudding user response：
Can you try adding the form using hooks instead of overriding the template? I understand that you want a separate form altogether but this could be an alternate solution to it.
1. Add your avatar field:
add_action( 'woocommerce_edit_account_form', 'add_avatar_to_edit_account_form' );
function add_avatar_to_edit_account_form() {
$user = wp_get_current_user();
$user_id = $user->ID;
//Add all other relevant variables you need here to prefill the fields like $attachment_id etc.
?>
<!-- Avatar Section -->
<div >
<div ><?php
// Visualizza Avatar
if ($attachment_id) {
$original_image_url = wp_get_attachment_url($attachment_id);
// Display Image instead of URL
echo wp_get_attachment_image($attachment_id, $size = array('150', '150')); // Invece dell'array size, stava 'full' come parametro.
} else {
?><img style="" src="<?php echo get_avatar_url($user_id, array ('size' => 150)); ?>" alt=""><?php
}
?></div>
<div >
<div >
<p >
<div >
<label for="file" >Scegli immagine</label>
<label id="file-name" for="file" >Nessuna immagine selezionata</label>
</div>
<input id="file" type="file" style="display:none;" name="image" accept="image/x-png,image/gif,image/jpeg">
<input id="current_image" type="text" style="display:none;" name="current_image" value="<?php if($attachment_id){echo $attachment_id;} ?>">
<span ><?php esc_html_e( "File consentiti: png/gif/jpeg, dimensione massima 1MB. L'immagine del tuo profilo verrà visualizzata nelle recensioni dei prodotti e nei commenti.", 'woocommerce' ); ?></span>
</p>
</div>
<!-- Show file name inside label avatar -->
<script>
$("#file").change(function(){
$("#file-name").text(this.files[0].name);
});
</script>
<div >
<!-- Upload Avatar -->
<p style="margin-bottom: 0px!important;">
<?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce-avatar' ); ?>
<button type="submit" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Upload Avatar', 'woocommerce' ); ?></button>
<input type="hidden" name="action" value="save_account_details" />
</p>
<?php
// Rimuovi immagine Button
if (isset($_GET['rm_profile_image_id'])) {
if ($attachment_id == $_GET['rm_profile_image_id']) {
wp_delete_attachment($attachment_id);
if (delete_user_meta($user_id, 'image')) {
wp_delete_attachment($attachment_id);
}
?><script>window.location='<?php echo wc_get_account_endpoint_url('impostazioni') ?>';</script><?php
exit();
}
} else {
echo '<a href=' . wc_get_account_endpoint_url('impostazioni') . '?rm_profile_image_id=' . $attachment_id . '> ' . __('Remove') . ' </a>';
}
?>
</div>
</div>
</div>
<?php
}
2. Save your avatar field:
add_action( 'woocommerce_save_account_details', 'save_avatar_account_details', 12, 1 );
function save_avatar_account_details( $user_id ) {
if (isset( $_POST['current_image'] ) && !isset($_FILES['image'])) {
update_user_meta( $user_id, 'image', sanitize_text_field( $_POST['current_image']) );
} else if ( isset( $_FILES['image'] ) ) {
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
// Imposta la cartella in cui salvare gli avatar degli utenti
function wp_set_custom_upload_folder($uploads) {
$uploads['path'] = $uploads['basedir'] . '/avatar-upload';
$uploads['url'] = $uploads['baseurl'] . '/avatar-upload';
if (!file_exists($uploads['path'])) {
mkdir($uploads['path'], 0755, true);
}
return $uploads;
} add_filter('upload_dir', 'wp_set_custom_upload_folder');
$attachment_id = media_handle_upload( 'image', 0 );
if ( is_wp_error( $attachment_id ) ) {
update_user_meta( $user_id, 'image', $_FILES['image']['error'] . ": " . $attachment_id->get_error_message() );
} else {
$old_attachment_id = get_user_meta( $user_id, 'image', true );
wp_delete_attachment($old_attachment_id);
update_user_meta( $user_id, 'image', $attachment_id );
}
remove_filter('upload_dir', 'wp_set_custom_upload_folder');
}
}
3. Add multipart/form-data to the form:
// Add enctype to form to allow image upload
function add_multipart_to_woocommerce_edit_account_form_tag() {
echo 'enctype="multipart/form-data"';
}
add_action( 'woocommerce_edit_account_form_tag', 'add_multipart_to_woocommerce_edit_account_form_tag' );