在我的帐户>上添加个人资料图片(文件上传).在WooCommerce中编辑帐户 [英] Add a profile picture (file upload) on My account > edit account in WooCommerce

问题描述

我想添加一个上传个人资料图片字段并将其保存在我的帐户">编辑帐户"中，而在woocommerce中没有任何插件.

I want to add a upload profile image field and save it on My account > edit account without any plugin in woocommerce.

我在 functions.php 中添加了以下代码，以在我的帐户页面上添加个人资料图片.

I added the below code in functions.php to add the profile picture on the my account page.

add_action( 'woocommerce_edit_account_form', 'add_profile_imageto_edit_account_form' );
function add_profile_imageto_edit_account_form() {
    $user = wp_get_current_user();
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="favorite_color"><?php _e( 'Upload Profile Photo', 'woocommerce' ); ?>  </label>
        <input type="file" name="profile_image" id="profile_image" placeholder="Upload Profile Photo" />
    </p>
    <?php
}

建议任何人如何保存此数据并在编辑帐户"页面中显示保存的数据.

Suggest me anybody how to do save this data and display the saved data in edit account page.

推荐答案

您有3个显示新字段的选项

You have 3 options to display a new field

1. 使用 woocommerce_edit_account_form_start 钩子(在我的代码中使用)作为第一个字段
2. 在使用 woocommerce_edit_account_form 钩子的现有字段之后
3. 在特定位置，覆盖 myaccount/form-edit-account.php 模板文件.

1. As the first field using woocommerce_edit_account_form_start hook (used in my code)
2. After existing fields using woocommerce_edit_account_form hook
3. In a specific location, overriding myaccount/form-edit-account.php template file.

---

使用的功能:显示图像.

---

Functions used: to display the image.

• wp_get_attachment_url -检索附件.
• wp_get_attachment_image -获取HTML img元素代表图片附件

可能需要其他CSS布局

// Add field
function action_woocommerce_edit_account_form_start() {
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="image"><?php esc_html_e( 'Image', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="file" class="woocommerce-Input" name="image" accept="image/x-png,image/gif,image/jpeg">
    </p>
    <?php
}
add_action( 'woocommerce_edit_account_form_start', 'action_woocommerce_edit_account_form_start' );

// Validate
function action_woocommerce_save_account_details_errors( $args ){
    if ( isset($_POST['image']) && empty($_POST['image']) ) {
        $args->add( 'image_error', __( 'Please provide a valid image', 'woocommerce' ) );
    }
}
add_action( 'woocommerce_save_account_details_errors','action_woocommerce_save_account_details_errors', 10, 1 );

// Save
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' );

        $attachment_id = media_handle_upload( 'image', 0 );

        if ( is_wp_error( $attachment_id ) ) {
            update_user_meta( $user_id, 'image', $_FILES['image'] . ": " . $attachment_id->get_error_message() );
        } else {
            update_user_meta( $user_id, 'image', $attachment_id );
        }
   }
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );

// Add enctype to form to allow image upload
function action_woocommerce_edit_account_form_tag() {
    echo 'enctype="multipart/form-data"';
} 
add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );

---

要显示图像(可以在任何地方使用，只要您调整所需的钩子即可)

---

To display the image (can be used anywhere, provided you adjust the desired hook)

// Display
function action_woocommerce_edit_account_form() {
    // Get current user id
    $user_id = get_current_user_id();

    // Get attachment id
    $attachment_id = get_user_meta( $user_id, 'image', true );

    // True
    if ( $attachment_id ) {
        $original_image_url = wp_get_attachment_url( $attachment_id );

        // Display Image instead of URL
        echo wp_get_attachment_image( $attachment_id, 'full');
    }
} 
add_action( 'woocommerce_edit_account_form', 'action_woocommerce_edit_account_form' );

这篇关于在我的帐户>上添加个人资料图片(文件上传).在WooCommerce中编辑帐户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！