How to Customize WooCommerce Pages Using Elementor Templates
Overview
Out of the box, WooCommerce pages (like Shop, Product, Cart, Checkout, and more) are functional but often limited in design flexibility. ShopMaker allows you to override these pages using Elementor templates, giving you full creative control without writing code.
This means you can:
Add or remove elements visually
Reorganize layouts to match your brand
Use pre-designed templates to speed up your workflow
Create more engaging and professional shopping experiences
What Pages Can Be Customized?
ShopMaker allows you to override the layout of the following WooCommerce pages:
Shop Page
Single Product Page (globally or per product)
Cart Page (including empty cart state)
Checkout Page (Before Checkout and main Checkout content)
Thank You Page
My Account Page (with support for custom tabs)
Quick View Popup (PRO feature)
How to Apply a Custom Template
1. Use a Pre-Built Template
Go to ShopMaker → Import Templates
Choose a pre-styled layout (e.g., for Shop, Product, Cart, Checkout, etc.)
Click Import
Edit the template in Elementor to fit your brand
Go to ShopMaker → WooCommerce Templates
Assign the imported template to the desired WooCommerce page
2. Create Your Own Template
Go to Elementor → Templates and click Add New
Choose the type Section or Page (depending on your layout goals)
Design the template using the wide range of ShopMaker widgets available for each type of WooCommerce page. For example, you can use:
Shop Products – to display product listings
Shop Filters – for product filtering options
Single Product Image – to showcase the product gallery
Single Product Summary – to include price, title, add to cart button, etc.
Cart Contents – to render the cart interface
Checkout Form – to handle the checkout steps
Thank You Order – to show order confirmation details
These are just examples — ShopMaker includes many other widgets tailored for building fully custom WooCommerce experiences.
Save the template
Go to ShopMaker → WooCommerce Templates
Assign your new template to the desired page
Note: For Single Product pages, you can also override the layout individually by editing the product and selecting a specific Elementor template under the ShopMaker Template metabox.
Tips for Building Effective Templates
Always use ShopMaker-specific widgets to ensure compatibility
Structure your layout using containers or sections
Preview the layout on mobile and tablet views
Use pre-built templates as a starting point if you’re not sure how to begin
Keep each page focused on your product and user actions (add to cart, checkout, etc.)
Test templates using real products and cart behavior