Elementor offers a powerful way to visually design and customize your WooCommerce pages. Whether you're looking to edit the shop layout, style the cart, or personalize the checkout, Elementor's drag-and-drop interface makes it all possible without touching code.
How to Create WooCommerce Shop Page with Elementor
WooCommerce automatically generates a default shop page, but it lacks flexibility in layout and styling. By using Elementor, especially Elementor Pro, you can create a visually compelling and branded shopping experience tailored to your needs.
Follow these steps to build a custom WooCommerce shop page from scratch:
- Go to Pages > Add New in your WordPress dashboard.
- Name your page—something like "Shop" or "Store"—then click Edit with Elementor.
- Once in the Elementor editor, search for the Products widget in the panel. If you're using Elementor Pro, you’ll have access to a variety of WooCommerce widgets and templates.
- Add and customize your product listings, apply filters, and organize your layout using Elementor’s drag-and-drop interface.
- To style the product grid, you can adjust column settings, spacing, typography, and colors to match your brand identity.
- Publish the page once satisfied with the design.
- Head to WooCommerce > Settings > Products tab, and under "Shop page", assign the page you just created.
This method allows you to design WooCommerce pages visually, giving you the ability to customize WooCommerce product archive layouts beyond what the standard options allow.
Elementor Pro is recommended for full WooCommerce integration and templates.
How to Edit WooCommerce Shop Page Layout
To customize the WooCommerce product archive with Elementor, you'll need to work with the Theme Builder feature. This approach provides full control over how your shop page looks and behaves.
Here’s how to edit the shop page layout:
- Navigate to Templates > Theme Builder in Elementor.
- Click Add New and choose Product Archive as the template type.
- Choose from Elementor's pre-designed layouts or build your own using sections and widgets.
- Insert product-related widgets like Archive Products, Archive Title, and Archive Description.
- Customize the product display using layout settings—adjust the number of columns, enable pagination, and add sorting options.
- Design each element with Elementor controls—modify spacing, typography, hover styles, and buttons to match your branding.
- Once your design is ready, click Publish and define the display condition as "Shop Page" to override the default layout.
This method is perfect if you want to update your WooCommerce shop page layout without affecting other product category or tag archives.
How to Edit WooCommerce Cart Page with Elementor
Customizing the cart page enhances the shopping experience and helps with conversions. Here's the process:
- Go to Templates > Theme Builder.
- Create a new template and select Cart as the type.
- Insert the Cart widget provided by Elementor Pro.
- Customize colors, buttons, and layout to match your brand.
How to Edit WooCommerce Checkout Page with Elementor
To modify WooCommerce checkout page, follow a similar approach using Theme Builder:
- Create a new Checkout template in Templates > Theme Builder.
- Insert the Checkout widget to get started.
- Customize the form fields, layout, and typography for clarity and style.
- Set display conditions so this template replaces the default checkout page.
Responsive WooCommerce Page Design
Always check your customized pages on tablet and mobile views:
- Use Elementor’s responsive toggle in the bottom toolbar.
- Adjust font sizes, padding, and element order per device.
- Hide or show specific elements for better mobile UX.
Elementor WooCommerce Templates and Widgets
Elementor Pro includes many widgets specifically for WooCommerce:
| Widget | Function |
|---|---|
| Products | Display grid of products |
| Product Categories | Show category blocks |
| Cart | Edit the shopping cart |
| Checkout | Design the checkout form |
| My Account | Customize customer account dashboard |
These tools are essential when using Elementor as your WooCommerce shop page builder.
Useful Links
How to Customize the WooCommerce Checkout Page With Elementor – Elementor’s official guide walks you through replacing the default checkout shortcode with the dedicated Checkout widget, enabling full visual customization.
How to Use the WooCommerce Cart Widget – A detailed overview of Elementor Pro 3.5’s Cart widget, showcasing how to drag, drop and style your cart page visually.
Elementor Connector for WooCommerce Documentation – WooCommerce’s official documentation on using the Elementor Connector extension to access enhanced WooCommerce widgets and styling controls.
WooCommerce Official Documentation – The main WooCommerce documentation hub, covering setup, page assignment, and general store configuration.
90+ Top widgets to Achieve Your Goals with Elementor!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no‑code solutions for free on Elementor!
Conclusion
Learning how to edit WooCommerce shop page with Elementor opens up unlimited possibilities for customizing your online store. From the product archive to the cart and checkout pages, Elementor makes it easy to design WooCommerce pages visually with full control. Use templates, widgets, and responsive settings to ensure your website delivers a seamless shopping experience on any device.
