3 Ways to Customize WooCommerce Store Pages by Using the Elementor

Method 1 : Use Elementor features in a WooCommerce store

• shopping
• Product
• Shopping cart
• Payment or check out
• Account

Method 2 : Customize WooCommerce Store pages using Almentor widgets

And automatically, WooCommerce will generate three pages for you after installing this plugin :

• Shopping Cart
• Payment Methods
• Account

Since the majority of WordPress plugins and themes do the same thing.
When you browse these pages, you will see a short code instead of the content that should be in its place:

Open the preview of this page, and you will find a basic cart page:

There is no error in this design.
However, what if you want to restructure it in your own way? There’s no harm in that (like adding a sidebar to the right side of the page? Or what if you want to add a section with additional elements or a waiting list below the cart? And so on).
The only way to customize these three WooCommerce pages is by removing the short code and editing it in Elementor.
Therefore, you need to follow the following steps:

Step 1: Select the location of the WooCommerce page to edit

Go to “Pages” and find the previously set up WooCommerce page that you want to edit:

Select the page you want to edit, let it be the payment page.

Step 2: Delete the shortcode

In the WordPress editor where you can select the shortcode block, you must click on the “Options” button (three vertical dots).
Then select the “Remove shortcode” option to delete this code from the page.

Update the page. Then click on the blue “Edit with Elementor” button at the top to open the editor.

Step 3: Customize the WooCommerce store page in Elementor

And this step will not help you much with the main pages and code templates. So there are no templates for cart content, payment, or account pages.

However, you can use WooCommerce widgets from Elementor Pro instead. When you make sure you have installed the general settings of your template to facilitate the style editing you should do in that step.

The great thing about using professional Elementor widgets is that there is aesthetics for almost every page you want to customize:

Payment creates a payment page with:

1. Detailed billing form
2. Order notice field
3. Summary box
4. Coupon section
5. Purchase button (with terms of service agreement)

The cart creates a page with :

• Cart details
• Coupon field
• Purchase total with shipping calculations

 “My Account ” creates a user account page with tabbed sections for :

• Dashboard
• Orders
• Downloads
• Addresses
• Account details
• Logout

Through these widgets, we have the ability to customize how each section appears as well as the design of the entire page.
In some cases, you can disable some features (such as the coupon code) when you don’t need them.
By the way, you can also add other user interface widgets to WooCommerce pages.

The Pro Widgets plugin has many features like Breadcrumbs, Upsell, Product Categories, and more.”

Step 4: Set up the new page

When you are finished customizing our layout, you can click on the “Update” button located in the bottom right corner. Then exit to your WordPress dashboard.

And we repeat this process for the rest of the pages that we want to customize .

The third and final method :

Creating custom WooCommerce shop pages using the template builder

We use this method to create WooCommerce Shop and Product pages using Elementor Pro.

Before proceeding, you must have at least one product uploaded to your store. Otherwise, it’s difficult to see real data or images while assembling and customizing your designs by following these steps :

• Go to Templates and Template Builder

From the WordPress dashboard, navigate to the Templates menu. Then select Theme Builder.

Template Builder : It is a feature that enables users to create custom designs for the most important components and pages on the site.

When WooCommerce is installed, users gain the ability to customize product archive pages and single products with the builder.

• Create a New Global Section

To create a Shop page, hover over “Products” and click on the plus button.
To create a page for single products, hover over “Single Product” and click on the plus button.
For example, we will create a global layout for our products.

• Choose a Template

After clicking on the plus sign, the element will take you inside the builder and provide you with block templates that match what you’re trying to create.

Even if the premade layouts are not exactly what you envisioned, choose the layouts that are closest to what you want to accomplish.
You can start from a template to save time, where you can leave the foundation and focus your energy on editing the content. To insert the template into the page, click on the “Insert” button that appears in the top right of the page.

Note :

You can also use external templates here. So if you have a product template or a store page that you want to modify, there is an alternative solution for it.

Save the product or store page as a draft, then go back to the WordPress dashboard. Then navigate to Templates and Saved Templates.
After that, click on “Import Templates” to import it from an external design file :

The Elementor will ask you what type of page it is. It will then take you to the element editor where you can customize it.
You won’t need to go back to the “Template Builder” if this is the path you’re taking.
Just make sure you successfully complete Steps 4 and 5 so that you can program the page template to display it as a general page design.

• Customizing the design :

We start by removing unnecessary widgets and features. These should be elements that you won’t replace with anything else. For example, when customizing my product page, I left the image column intact.

However, I removed the background image that was set to retrieve the main product image. Then, I dragged the “Product Images” UI element into the column. This allows me to create a more complete and interactive experience for the product image.

If you upload multiple product images, the gallery will be displayed in full. This widget comes with a zoom/pan feature, which makes the images more useful for shoppers as they can see close-up details of the products.

Now, after removing unnecessary widgets and sections, proceed and add widgets to the canvas to see any missing features. You may find them within the product and commerce categories. You can also use other UI elements or widgets if needed.

Finally, browse through each section of the page, regardless of the time it takes, to customize the content and style. That’s all it takes