Cómo crear una página personalizada de mi cuenta de WooCommerce

Publicado: 2021-05-11

Página personalizada de mi cuenta de WooCommerce ¿Está buscando una forma de personalizar la página "Mi cuenta" de WooCommerce? Editar la página de la cuenta es una de las páginas más importantes en cualquier tienda WooCommerce. Esta página debe tener un diseño impresionante porque es vital para el buen funcionamiento de toda su tienda en línea.

Debe diseñarse de manera que permita a los usuarios aprovechar al máximo la administración de la cuenta, convertir más ventas o atraer a los clientes para que realicen una compra repetida.

La página 'mi cuenta' y sus subpáginas se pueden mostrar en cualquier parte de su sitio usando un código abreviado. Los códigos cortos son una manera fácil de agregar contenido dinámico a sus publicaciones, páginas y barras laterales de WordPress.

Página personalizada de mi cuenta de WooCommerce

En este breve tutorial, le mostramos cómo personalizar la apariencia, el diseño, el contenido y el diseño de la página 'mi cuenta' utilizando scripts PHP personalizados. Esto significa que debe tener algunos conocimientos de codificación antes de continuar.

Puede lograr casi cualquier cosa en WooCommerce si está familiarizado con la personalización de PHP. Esto significa que puede agregar una pestaña personalizada, cambiar el nombre de una pestaña, eliminar una pestaña o fusionar el contenido de la pestaña.

Veamos cómo puedes lograr esto.

Pasos para editar la página Mi cuenta usando fragmentos de PHP

En esta sección, usaremos ganchos de WooCommerce. Esto se debe a que es una de las mejores prácticas que recomienda WordPress al personalizar su sitio.

Agregaremos una pestaña personalizada, cambiaremos el nombre de una pestaña, eliminaremos una pestaña y fusionaremos el contenido de la pestaña.

Estos son los pasos que debe seguir para editar la página Mi cuenta mediante programación:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos los fragmentos de código PHP.
Si desea cambiar el nombre de la pestaña Dirección a Dirección de entrega, agregue el siguiente código al archivo php . Puede usar el mismo código para cambiar el nombre de cualquier pestaña.

add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );

function njengah_rename_address_my_account( $items ) {

   $items['edit-address'] = 'Delivery Address';

     return $items;

}

Este es el resultado:
Si desea eliminar la pestaña Dirección, agregue el siguiente código al archivo php :

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );

function njengah_remove_address_my_account( $items ) {

unset( $items['edit-address'] );

return $items;

}

Aquí hay una lista completa de las fichas de pestañas en la matriz $items, para que pueda elegir la que desea eliminar:

$items = array(

'dashboard' => __( 'Dashboard', 'woocommerce' ),

'orders' => __( 'Orders', 'woocommerce' ),

'downloads' => __( 'Downloads', 'woocommerce' ),

'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),

'payment-methods' => __( 'Payment methods', 'woocommerce' ),

'edit-account' => __( 'Account details', 'woocommerce' ),

'customer-logout' => __( 'Logout', 'woocommerce' ),

);

También es posible fusionar pestañas y contenido. Por ejemplo, puede eliminar la pestaña Direcciones y mover su contenido a la pestaña Cuenta. Puede lograr esto agregando el siguiente código al archivo php :

// -----------------------------

// 1. Remove the Addresses tab

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );

function njengah_remove_acc_tab( $items ) {

unset($items['edit-address']);

return $items;

}

// -------------------------------

// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)

add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Este es el resultado:
También puede crear una pestaña personalizada en esta página. Por ejemplo, puede agregar una nueva pestaña llamada Soporte donde los usuarios pueden ver fácilmente sus tickets de soporte. Para lograr esto, agregue el siguiente código al archivo php :

/**
* Add New Tab on the My Account page
*/

// ------------------

// 1. Register new endpoint (URL) for My Account page

// Note: Re-save Permalinks or it will give 404 error

function njengah_add_premium_support_endpoint() {

add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );

}

add_action( 'init', 'njengah_add_premium_support_endpoint' );

// ------------------

// 2. Add new query var

function njengah_premium_support_query_vars( $vars ) {

$vars[] = 'premium-support';

return $vars;

}

add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );

// ------------------

// 3. Insert the new endpoint into the My Account menu

function njengah_add_premium_support_link_my_account( $items ) {

$items['premium-support'] = 'Premium Support';

return $items;

}

add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );

// ------------------

// 4. Add content to the new tab

function njengah_premium_support_content() {

echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. &amp;lt;i&amp;gt;Please contact your theme/plugin developer for theme/plugin-related support.&amp;lt;/i&amp;gt;&amp;lt;/p&amp;gt;';

echo do_shortcode( ' /* your shortcode here */ ' );

}

add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Puede usar un complemento de terceros como WPForms para crear la página de soporte. Después de eso, puede pegar el código abreviado en la línea final. Este es el resultado:

Conclusión

A estas alturas, debería poder personalizar la página de la cuenta. Recomendamos crear un tema hijo antes de editar esta página. Esto asegurará que sus cambios no se pierdan durante una actualización. Esperamos que este tutorial le haya proporcionado la mejor solución.

Cómo crear una página personalizada de mi cuenta de WooCommerce

Página personalizada de mi cuenta de WooCommerce

Pasos para editar la página Mi cuenta usando fragmentos de PHP

Conclusión

Artículos similares