Reply To: Custom my account page tab with HTML Block

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!