Una de las limitaciones más comunes de WordPress y WooCommerce es el sistema de avatar por defecto: Gravatar. Aunque es útil en muchos casos, no todos los usuarios saben cómo funciona ni están dispuestos a crear una cuenta externa solo para subir su imagen de perfil.

Por eso, en este tutorial te explico cómo añadir una funcionalidad completa para que tus clientes puedan subir su propia foto de perfil directamente desde su cuenta en tu tienda online, sin depender de Gravatar.

Índice

¿Cuáles son las ventajas de permitir al cliente subir su foto?

Mejora la experiencia del usuario: Evitas confusiones con Gravatar y le das al usuario un entorno más controlado, accesible e integrado con tu tienda online.
Aumenta la personalización de la cuenta: Tu cliente se siente identificado con su cuenta, lo que refuerza la fidelización y el vínculo con tu marca.
Mejora visualmente las valoraciones: Si tu tienda permite que los usuarios valoren productos, ver su foto real (en vez del icono gris genérico) da más confianza y profesionalidad a tu tienda.
Ideal para tiendas con comunidad, quieran trabajar las valoraciones de producto, para cursos online, membresias o simplemente proyectos que fomenten la interacción entre usuarios.

¿Cuándo es recomendable implementar esta función?

Esta mejora es útil especialmente cuando:

Tu tienda WooCommerce tiene una comunidad activa (membresía, formación, marketplace, etc.).
Usas reseñas para captar más ventas.
Quieres una estética más cuidada en comentarios o valoraciones.
Quieres independizarte del ecosistema de Gravatar por privacidad, control o simplicidad para el usuario.

¿En qué consiste técnicamente esta funcionalidad?

Añadir una nueva pestaña personalizada en “Mi cuenta”.
Mostrar un formulario para que el usuario suba su foto.
Guardar esa imagen en la biblioteca de medios de WordPress.
Asociar esa imagen al perfil del usuario mediante user_meta.
Reemplazar el avatar de WordPress por esa imagen cuando se solicita con get_avatar().

Por lo tanto, tendremos que añadir el siguiente código al fichero functions.php de nuestro child theme o bien a nuestro plugin de funcionalidades como explico aquí.

// 1. Añadir una pestaña personalizada en "Mi cuenta"
add_filter('woocommerce_account_menu_items', 'ordenar_pestana_foto_perfil');
function ordenar_pestana_foto_perfil($items) {
    $nuevos_items = [];

    foreach ($items as $key => $label) {
        $nuevos_items[$key] = $label;

        // Insertar la pestaña justo después del escritorio
        if ($key === 'dashboard') {
            $nuevos_items['foto-perfil'] = 'Foto de perfil';
        }
    }

    return $nuevos_items;
}


// 2. Crear el endpoint personalizado
add_action('init', 'añadir_endpoint_foto_perfil');
function añadir_endpoint_foto_perfil() {
    add_rewrite_endpoint('foto-perfil', EP_ROOT | EP_PAGES);
}

// 3. Contenido de la pestaña
add_action('woocommerce_account_foto-perfil_endpoint', 'contenido_pestana_foto_perfil');
function contenido_pestana_foto_perfil() {
    $user_id = get_current_user_id();
    $user_pic_id = get_user_meta($user_id, 'custom_profile_picture_id', true);
    $image_url = $user_pic_id ? wp_get_attachment_url($user_pic_id) : '';

    echo '<h2>Tu foto de perfil</h2>';
    echo '<p>Desde aquí puedes subir una imagen que usaremos como foto de perfil en tu cuenta, pedidos y valoraciones. Esta imagen reemplazará la que normalmente se carga desde Gravatar.</p>';

    if ($image_url) {
        echo '<p><strong>Imagen actual:</strong><br>';
        echo '<img src="' . esc_url($image_url) . '" width="100" style="margin: 10px 0;"></p>';
        echo '<p><a href="' . esc_url(add_query_arg('eliminar_foto_perfil', '1')) . '" style="color:red;">Eliminar foto de perfil</a></p>';
    }

    echo '<form method="post" enctype="multipart/form-data">
        <p><label for="profile_picture">Sube tu nueva imagen (formato JPG, PNG o GIF):</label><br>
        <input type="file" name="profile_picture" accept="image/*" /></p>
        <p><button type="submit" name="save_profile_picture" class="button">Guardar imagen</button></p>
    </form>';

    if (isset($_GET['eliminar_foto_perfil'])) {
        delete_user_meta($user_id, 'custom_profile_picture_id');
        wc_add_notice('Imagen eliminada correctamente.', 'success');
        wp_redirect(wc_get_account_endpoint_url('foto-perfil'));
        exit;
    }

    if (isset($_POST['save_profile_picture']) && !empty($_FILES['profile_picture']['name'])) {
        manejar_subida_imagen_usuario($user_id, $_FILES['profile_picture']);
        wc_add_notice('¡Imagen actualizada correctamente!', 'success');
        wp_redirect(wc_get_account_endpoint_url('foto-perfil'));
        exit;
    }
}

// 4. Sustituir Gravatar por la imagen subida
add_filter('get_avatar', 'reemplazar_gravatar_con_foto_personalizada', 10, 5);
function reemplazar_gravatar_con_foto_personalizada($avatar, $id_or_email, $size, $default, $alt) {
    $user = false;

    if (is_numeric($id_or_email)) {
        $user = get_user_by('id', $id_or_email);
    } elseif (is_object($id_or_email) && isset($id_or_email->user_id)) {
        $user = get_user_by('id', $id_or_email->user_id);
    } elseif (is_string($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
    }

    if ($user) {
        $user_pic_id = get_user_meta($user->ID, 'custom_profile_picture_id', true);
        if ($user_pic_id) {
            $image_url = wp_get_attachment_image_url($user_pic_id, [$size, $size]);
            if ($image_url) {
                $avatar = "<img src='" . esc_url($image_url) . "' alt='" . esc_attr($alt) . "' width='" . esc_attr($size) . "' height='" . esc_attr($size) . "' class='custom-user-avatar avatar avatar-{$size}' />";
            }
        }
    }

    return $avatar;
}

// 5. Asegurar el reconocimiento del nuevo endpoint
add_filter('query_vars', function($vars) {
    $vars[] = 'foto-perfil';
    return $vars;
});

// 6. Subida y guardado de imagen reutilizable
function manejar_subida_imagen_usuario($user_id, $file_array) {
    if (!function_exists('wp_handle_upload')) {
        require_once(ABSPATH . 'wp-admin/includes/file.php');
    }

    $upload = wp_handle_upload($file_array, ['test_form' => false]);

    if (!isset($upload['error']) && isset($upload['file'])) {
        $file_type = wp_check_filetype($upload['file'], null);
        $attachment = [
            'post_mime_type' => $file_type['type'],
            'post_title' => sanitize_file_name($file_array['name']),
            'post_content' => '',
            'post_status' => 'inherit',
        ];

        $attach_id = wp_insert_attachment($attachment, $upload['file']);
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attach_data = wp_generate_attachment_metadata($attach_id, $upload['file']);
        wp_update_attachment_metadata($attach_id, $attach_data);

        update_user_meta($user_id, 'custom_profile_picture_id', $attach_id);
    }
}

// 7. Añadir el campo en el admin de WordPress
add_action('show_user_profile', 'mostrar_campo_foto_admin');
add_action('edit_user_profile', 'mostrar_campo_foto_admin');
function mostrar_campo_foto_admin($user) {
    $user_pic_id = get_user_meta($user->ID, 'custom_profile_picture_id', true);
    $image_url = $user_pic_id ? wp_get_attachment_url($user_pic_id) : '';
    echo '<h2>Foto de perfil personalizada</h2>';
    echo '<table class="form-table">';
    echo '<tr><th><label for="profile_picture">Imagen personalizada</label></th><td>';
    if ($image_url) {
        echo '<img src="' . esc_url($image_url) . '" width="100" style="display:block; margin-bottom:10px;">';
        echo '<a href="?user_id=' . $user->ID . '&eliminar_foto_perfil=1" style="color:red;">Eliminar foto de perfil</a><br><br>';
    }
    echo '<input type="file" name="profile_picture" accept="image/*" /></td></tr>';
    echo '</table>';
}

add_action('personal_options_update', 'guardar_imagen_admin');
add_action('edit_user_profile_update', 'guardar_imagen_admin');
function guardar_imagen_admin($user_id) {
    if (!current_user_can('edit_user', $user_id)) return;
    if (isset($_GET['eliminar_foto_perfil'])) {
        delete_user_meta($user_id, 'custom_profile_picture_id');
    }
    if (!empty($_FILES['profile_picture']['name'])) {
        manejar_subida_imagen_usuario($user_id, $_FILES['profile_picture']);
    }
}

Una vez añadido, tendremos que ir al menú del admin de WordPress a Ajustes > Enlaces permanentes y sin hacer nada guardar cambios como indico en el vídeo.

anadir campo subir foto perfil woocommerce

Una vez hecho esto ya podremos ver la pestaña de cambiar la foto en la zona de mi cuenta en WooCommerce:

Por supuesto esta imagen queda vinculada en el perfil de WordPress y es modificable por nosotros si hay cualquier problema:

Conclusiones

Permitir que tus usuarios suban una foto de perfil personalizada en WooCommerce es una forma sencilla pero potente de mejorar la experiencia de usuario, profesionalizar la tienda y fomentar la participación en tu comunidad. Recordad que esta funcionalidad NO es imprescindible, es solo si cumplimos los objetivos anteriores.

¡Haz clic para puntuar esta entrada!

(Votos: 1 Promedio: 1)