Customizing the WooCommerce My Account page involves modifying the layout, adding custom fields, and adding custom functionality. Here are some ways to customize the WooCommerce My Account page, along with code samples:
Modifying the layout:
To modify the layout of the WooCommerce My Account page, you can override the default templates by creating a new template file in your theme. Here’s an example of how to modify the “My Account” navigation links:
<?php
/**
* Override the My Account navigation links
*/add_filter( ‘woocommerce_account_menu_items’, ‘custom_account_menu_items’ );
function custom_account_menu_items( $items ) {
// Remove the “Dashboard” link
unset( $items[‘dashboard’] );// Add a new link
$items[‘my-custom-link’] = __( ‘My Custom Link’, ‘textdomain’ );// Return the modified items
return $items;
}
Adding custom fields:
To add custom fields to the WooCommerce My Account page, you can use the woocommerce_edit_account_form action hook. Here’s an example of how to add a custom field for the user’s date of birth:
<?php
/**
* Add a custom “Date of Birth” field to the “My Account” page
*/add_action( ‘woocommerce_edit_account_form’, ‘custom_edit_account_form’ );
function custom_edit_account_form() {
$user_id = get_current_user_id();
$dob = get_user_meta( $user_id, ‘date_of_birth’, true );
?>
<p class=”woocommerce-form-row woocommerce-form-row–wide form-row form-row-wide”>
<label for=”date_of_birth”><?php _e( ‘Date of Birth’, ‘textdomain’ ); ?> <span class=”required”>*</span></label>
<input type=”date” class=”woocommerce-Input woocommerce-Input–text input-text” name=”date_of_birth” id=”date_of_birth” value=”<?php echo esc_attr( $dob ); ?>” required>
</p>
<?php
}add_action( ‘woocommerce_save_account_details’, ‘custom_save_account_details’ );
function custom_save_account_details( $user_id ) {
if ( isset( $_POST[‘date_of_birth’] ) ) {
update_user_meta( $user_id, ‘date_of_birth’, sanitize_text_field( $_POST[‘date_of_birth’] ) );
}
}
Adding custom functionality:
To add custom functionality to the WooCommerce My Account page, you can use the woocommerce_account_{endpoint}_endpoint action hook. Here’s an example of how to display the user’s order history on the “Orders” endpoint:
<?php
/**
* Display the user’s order history on the “Orders” endpoint
*/add_action( ‘woocommerce_account_orders_endpoint’, ‘custom_account_orders’ );
function custom_account_orders() {
$customer_orders = wc_get_orders( array(
‘customer_id’ => get_current_user_id(),
‘status’ => array( ‘wc-completed’ )
) );
?>
<h2><?php _e( ‘Order History’, ‘textdomain’ ); ?></h2>
<table class=”woocommerce-orders-table woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table”>
<thead>
<tr>
<th class=”woocommerce-orders-table__header woocommerce-orders-table__header-order-number”><?php _e( ‘Order’, ‘textdomain’ ); ?></th>
<th class=”woocommerce-orders-table__header woocommerce-orders-table__header-order-date”><?php _e( ‘Date’, ‘textdomain’ ); ?></th>
<th class=”woocommerce
Useful Links:
