Website Building » WooCommerce » How Do I Change My WooCommerce Account Page Design?

How Do I Change My WooCommerce Account Page Design?

Last updated on January 18, 2023 @ 6:51 am

WooCommerce is a great eCommerce platform that allows you to sell online. One of the great things about WooCommerce is that it allows you to customize your account page. In this article, we will show you how to change your WooCommerce account page design.

Your WooCommerce account page is the page where your customers can view their order history, track their orders, update their shipping and billing information, and more. By default, WooCommerce comes with a very basic account page design. However, if you want to change the design of your account page, you can do so by modifying the code or by using a plugin.

If you want to change the design of your WooCommerce account page, there are two ways you can do it: by modifying the code or by using a plugin. We will show you both methods in this article.

To change the design of your WooCommerce account page using a plugin, we recommend that you use the WooCommerce Custom Account Page Plugin. This plugin allows you to easily customize the look and feel of your account page without having to modify any code. Once you install and activate the plugin, you will need to visit the Settings » Account Page tab to configure the plugin settings.

On the settings page, you will see two tabs: General and Design. The General tab allows you to select the pages that are included in your account page.

By default, all WooCommerce pages are included in the account page. However, if you want to exclude any pages, you can do so by unchecking the box next to them.

The Design tab allows you to select a custom template for your account page or choose from a selection of pre-designed templates. If you want to use a custom template, simply upload it to your theme’s folder or child theme’s folder. Alternatively, you can also select it from the WordPress media library.

Once you have selected a template for your account page, click on the Save Changes button to save your changes. That’s all there is to it! You have successfully customized your WooCommerce account page without having to modify any code.

If you don’t want to use a plugin to customize your WooCommerce account page design, then you will need to edit your WordPress theme’s code. First, you will need to create a file called myaccount . php and upload it to your theme’s folder or child theme’s folder (if using a child theme).

Next, copy and paste the following code into myaccount.php file:

<?php 

    /** 

     * My Account Dashboard 

     * 

     * @package WooCommerce 

     */ 

     

    wc_print_notices(); 

     * My Account navigation 

     * @since 2 . 6 . 0 

    do_action( 'woocommerce_account_navigation' ); ?> 

    <div class="woocommerce-MyAccount-content"> 

        <?php 

        /** 

         * My Account content 

         * @since 2 . 0 

         */ 

        do_action( 'woocommerce_account_content' ); ?> 

    </div>  
?>  

This code will display all of the default pages that are included in your WooCommerce customer account area. If there are any other pages that you want to include in your customer’saccount area , simply add them in between the WooCommerce_account_navigation() and WooCommerce_account_content() functions as follows:

<?php do_action( 'woocommerce_account_navigation' ); ?> // Add new pages here.. <?php do_action( 'woocommerce_account_content' ); ?>   

Once you have added all of the pages that you want to include in your customer’saccount area, save myaccount.php file and upload it back into your theme’s folder or child theme’s folder (if using a child theme). That’s all there is to it! You have successfully customized the design of your WooCommerce customer account area without having to modify any code.

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.