How to edit WooCommerce Pages with Elementor

Are you looking for a new way to edit WooCommerce Pages with Elementor?

You might know of the method of editing WooCommerce pages with a template, through Elementor. However, this is quite complex, and can lead to all sorts of issues down the road.

The good news is, there is another method that does not involve the complexity of templates.. This method allows you to edit WooCommerce Pages, without a template, while still giving you the full functionality of Elementor.

That is exactly what I will show you how to do in this tutorial.

Step 1: Head to the WooCommerce Settings Page.

For this tutorial, we use the WooCommerce User Account page. This allows perfect example, since it covers all of the applications necessary, to edit WooCommerce pages with endpoints.

First, we want to start out by heading to the WooCommerce settings page. You can locate this in your WordPress Dashboard under WooCommerce.

Step 2: View WooCommerce Endpoints

The next thing that we want to do is click on the “advanced” tab in the tabs located at the top of the settings page. Now scroll down to the area towards the bottom of the page named “Account Endpoints”, as shown below.

This area has the endpoint short codes for the pages that we will edit. Write down these short codes, so we can use them later.

Step 3: Edit the My-Account Page with Elementor

Now that we have the endpoints, we can start editing our pages! Let’s start with the WooCommerce my account page.

We will help you make a welcoming, friendly account page for all your eCommerce customers. Below shows a blank example, before editing:

Side Note: In order to edit this page you will need to make sure that you have the WooCommerce default pages added to your website. Navigate to WooCommerce > Status > Tools > Create default WooCommerce pages.

To edit this page in Elementor, you will need to make some edits to the page inside of the dashboard. Click on “Edit page” and proceed to edit the page.

You will see a reminder of the short code used on the page. When you are ready, click on the “Edit with Elementor” button.

Side Note: Depending on what theme you are using you might have to select full width or content width depending on the style of the website and your preference.

Side Note: If the site is brand new, the button to edit Elementor could be in either place located within the red boxes inside the screenshot above.

Step 4: Edit the My-Account page using the Elementor Interface

Click on the area you see highlighted with the typical Elementor box and you should then see the short code used for the page. Copy this to your clipboard.

Remove this Elementor block from the page.

After removing it, add the Elementor module “shortcode”, by searching for “shortcode”, and then dragging the module onto the page. Now, add the shortcode in, that we just copied and pasted into our clipboard. (Paste the code into the elementor editor on the left-hand side.)

Don’t forget to click the ‘Apply’ button, or the changes will not be saved.

Side Note: If the “My account” header is still on the page, you may need to choose the option to disable or hide the header through the theme that you are using on the Edit Page section of WordPress for the “My Account” page or choose “Elementor Full Width”.

Step 5: Add the custom CSS for the page

I will remind you once again, click ‘Apply’. We’re ready to edit the page! First, we need to add some custom CSS to the page. If you are using Elementor Pro, click on the module to select it again, and find ‘Advanced’ on the top left of your screen. Then click ‘Custom CSS’. Paste the code below into the custom CSS section. We will be adding the following lines of code:

   .woocommerce-MyAccount-navigation{
        display: none;
    }
    
    .woocommerce-account .woocommerce-MyAccount-content{
        width: 100%;
    }

Take a look at the screenshot below to understand where to place this code in Elementor Pro.

Side Note: In this tutorial we are using Elementor Pro with Astra Pro as our theme. If you wish to purchase these you can click on the buttons below.

Step 6: Adding the endpoints to the page

Next, we’ll add the design to the page, with the endpoints that we saw earlier on the WooCommerce settings page. Add a new 4-column row above the shortcode section, using the + button in the Elementor Editor.

If you have to, you can drag it to the top of the shortcode section as laid out in the screenshot below. You will see 4 columns, each with a + button.

Add an Icon Box into each column, by dragging and dropping, to start giving the page a more aesthetic look.

Feel free to change the icons and the text inside the icon boxes to best fit your needs for what endpoints you would like to use on the my account page.

Once you customize your icons, add the links to the icon boxes. These should point to the appropriate endpoints you have chosen for the My Account page.

For our endpoints we chose ‘Edit Account Info’, ‘Recent Orders’, ‘Payment Methods’, and ‘Log Out’.

Final touches

To add custom links, click on the Icon Box module, and find where it says ‘Link’ in the elementor editor on the left. Simply add in the appropriate link. Include the full https://yourdomain.com/ at the beginning!

For instance, the Edit Account Info icon box would

link to https://yourdomain.com/my-account/edit-account. To finish, touch up the page a little bit, click the exact modules you want to edit, and change colors, font size, font-weight, and add anything else you would like!

Below is an example of what ours looked like when we finished.

We hope you enjoyed this helpful! Please feel free to comment if you have any questions or want us to cover something specific. Give us a follow below, and thanks for reading this article, “How to edit WooCommerce Pages with Elementor.