0
  • No products in the cart.

  • How to Customize WooCommerce Pages Using Elementor Templates

    »

    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
    © Shop Maker. Made with passion by SmartWPress