Home › Forums › WoodMart support forum › Custom my account page tab with HTML Block › Reply To: Custom my account page tab with HTML Block
JanDaDa
Hi Aizaz,
Thanks for your feedback it worked like a charm.
For people searching on how to add an extra account tab within Woocommerce my account page using Elementor or WP Bakery in combination with the Woodmart or Basel theme reference:
Step 1: Create your child theme (all below code needs to be in your child theme!)
Step 2: Add the following code to you functions.php file:
I put some refference comments in there for you. My newly added tab is named “mijn-kortingen” which stand for “My Discounts”. Change this to your own desired name. Keep in mind no spaces! I also disabled both “Downloads” & “Payments Methods” tabs due I dont want my customers to see that.
/** Adding Mijn Korting Endpoint voor my account page
*/
function my_custom_endpoints() {
add_rewrite_endpoint( 'mijn-kortingen', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );
function my_custom_query_vars( $vars ) {
$vars[] = 'mijn-kortingen';
return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
function my_custom_flush_rewrite_rules() {
flush_rewrite_rules();
}
add_action( 'wp_loaded', 'my_custom_flush_rewrite_rules' );
/**
* Edit my account menu order & adding mijn-kortingen to the list. Downloads/Payment methods are removed from the list. I also translated the tabs to my desired language. You will see internal names on the left.
*/
function my_account_menu_order() {
$menuOrder = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'orders' => __( 'Orders', 'woocommerce' ),
//'downloads' => __( 'Downloads', 'woocommerce' ),
//'payment-methods' => __( 'Payment Methods', 'woocommerce' ),
'mijn-kortingen' => __( 'Mijn Kortingen', 'woocommerce' ),
'edit-address' => __( 'Adres Instellingen', 'woocommerce' ),
'edit-account' => __( 'Account Instellingen', 'woocommerce' ),
'customer-logout' => __( 'Uitloggen', 'woocommerce' ),
);
return $menuOrder;
}
add_filter ( 'woocommerce_account_menu_items', 'my_account_menu_order' );
//Adds endpoint when mijn kortingen is selected
function my_custom_endpoint_content() {
include 'woocommerce/myaccount/mijn-kortingen.html';
}
add_action( 'woocommerce_account_mijn-kortingen_endpoint', 'my_custom_endpoint_content' );
/**
* Adds a new column to the "My Orders" table in the account.
*
* @param string[] $columns the columns in the orders table
* @return string[] updated columns
*/
function th_wc_add_my_account_orders_column( $columns ) {
$new_columns = array();
foreach ( $columns as $key => $name ) {
$new_columns[ $key ] = $name;
// add referentienummer after order status column
if ( 'order-status' === $key ) {
$new_columns['referentie_nummer'] = __( 'Referentienummer', 'textdomain' );
}
}
return $new_columns;
}
add_filter( 'woocommerce_my_account_my_orders_columns', 'th_wc_add_my_account_orders_column' );
/**
* Adds data to the custom "new-data" column in "My Account > Orders".
*
* @param \WC_Order $order the order object for the row
*/
function th_wc_my_orders_new_data_column( $order ) {
$new_data = get_post_meta( $order->get_id(), 'referentie_nummer', true ); // Get custom order meta
echo ! empty( $new_data ) ? $new_data : '–';
}
add_action( 'woocommerce_my_account_my_orders_column_referentie_nummer', 'th_wc_my_orders_new_data_column' );
Next its time to modify the Woocommerce Template for your custom tab
Step 3: Add “woocommerce” folder within your child theme
Step 4: Add “myaccount” folder within your child theme
Step 5: Create a file within your child theme and name it mijn-kortingen.html (change to your internal tab name!).
Step 6: Create HTML block within Elementor and paste the shortcode in the html file of step 5.
Step 7: Save permalinks from your settings otherwise you will get 404 page!
Step 8 (optional): Add the following code to your Stylesheet (change font number for different icon):
.woodmart-my-account-links .mijn-kortingen-link a:before {
content: "\f136";
font-family: woodmart-font;
}
Step 8: Modify you html Elementor block as desired. It may also work with WP Bakery but I didnt test.
Step 9: Enjoy!