Digitally Thrive

How to edit WooCommerce Pages with Elementor

By / July 1, 2020 October 14, 2020
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

You might know the method of editing most of the WooCommerce pages with a template through Elementor but there is another method to edit these pages while also having the full functionality from Elementor without having to add a template. 

For this tutorial, we will be using the WooCommerce user account page as an example since it covers all of the applications nessesary to be able to edit most WooCommerce pages that include endpoints. 

Step 1: Head to the WooCommerce Settings Page.

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 and then scroll down to the area towards the bottom of the page named “Account Endpoints” that has the endpoint short codes for the pages that we will edit. We need to write down these short codes to 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 can make this page look friendly for all of your eCommerce customers. Just to take a note, here is how it typically looks before editing:

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. Here is where you will see a reminder of the short code used on the page. 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. When you are ready, click on the “Edit with Elementor” button.

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

Now that we are inside the Elementor interface, let’s work some magic. 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.

We are going to remove this Elementor block from the page. 

Now since we deleted that block we need to add the Elementor module for “shortcode” so that we can add the shortcode in that we just copied and pasted into our clipboard. Copy and paste the shortcode into elementor on the left-hand side.

Make sure that after you add the shortcode for the page that you click the apply button so that the changes can take effect. 

Step 5: Add the custom CSS for the page

Now that we have added the short code, click apply and we are 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 then click advanced and 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. 

Purchase Elementor Pro
Purchase Astra Pro

Step 6: Adding the endpoints to the page

The next step is adding the design to the page using the endpoints that we saw earlier on the WooCommerce settings page. So now we want to add a 4 section layout through Elementor and drag it to the top of the shortcode section as laid out in the screenshot below.

Now lets add some Icon Boxes to start giving the page a more aesthetic look.

Add 4 Icon Boxes to the elementor section that was just added to the top of the shortcode section. 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.

So now that the icon boxes are added, we can add the links to
the icon boxes to point to the appropriate
endpoints you have choosen for the My Account page. 

For our endpoints we chose Edit Account Info, Recent Orders, Payment
Methods, and Log Out. To add the links, click on the Icon Boxes and under link
add in the appropriate link. For instance, the Edit Account Info icon box would
link to yoursite.com/my-account/edit-account. 

You can then edit the icons, font, colors, and other elements to match the theme or brand of your website. 

When you are done, the page might look something like this:

About The Author

Scroll to Top