0

  • No products in the cart.

    • 0

  • No products in the cart.

    • How to override the WooCommerce Shop (Product Archive) page

    DOCS

    »

    How to override the Shop (Product Archive) page

    Overview

    WooCommerce uses a default archive layout to display your products on the Shop page. With Shop Maker, you can replace this layout with your own custom Elementor template, giving you full control over product listings, filters, and page structure.
    SHOP PRODUCTS - CREATIVE LAYOUT - ELEMENTOR WIDGET

    Product Layout Options: Default vs Creative

    ShopMaker offers two layout options for how products are visually displayed inside the Shop Products widget. These can be selected under: Shop Products → Style Tab → General Section → Product Style
    • Default: This layout mimics the classic WooCommerce grid, with clean lines and minimal design. Ideal for a wide range of stores that prefer a straightforward, functional look. It ensures consistency across various devices and is optimized for simplicity.
    • Creative (PRO): This layout brings modern interactions such as hover effects and Quick Actions (e.g., Wishlist and Quick View icons). It enhances user engagement and is perfect for visually appealing products like fashion items, accessories, and tech gear. The visual style is more dynamic and makes product images stand out.
    We recommend using the Creative layout when your product images are high-quality and benefit from a more interactive presentation. For a clean, minimal experience, stick with Default.

    Use a Pre-Styled Template (Recommended)

    For a quick setup, you can import a professionally designed Shop layout:
    • Go to ShopMaker → Import Templates.
    • Browse the available Shop templates and click “Import” on the one you like.
    • Assign the imported template to the Shop page as shown above.
    This is the fastest way to get a polished Shop layout without designing from scratch.

    Tips for Optimization

    • Make sure your Shop template is mobile-friendly.
    • Use filters and sorting options to improve product discovery.
    • Combine the Shop Products widget with the Shop Filters widget to improve user navigation.

    Step-by-step instructions

    1. Create or import a Shop page template You have two options:
      • Create a new template: Go to Elementor > Templates > Add New, choose Page as the type, and build your custom Shop layout using Shop Maker widgets such as Shop Products, Filters, Sort, Pagination, etc. Save and publish.
      • Import a pre-styled template: Go to Shop Maker > Import Templates and choose one of the available Shop templates. This is the fastest way to get started with a modern design.
    2. Assign the template to the Shop page
      • Navigate to Shop Maker > WooCommerce Templates.
      • Find the dropdown labeled Shop Template.
      • Select your custom template from the list.
      • Click Save Changes.

    Notes

    • This template will be applied to the WooCommerce Shop page and other product archive pages (like categories and tags), depending on your WooCommerce settings.
    • Use the Shop Products widget to control how products are displayed in the archive.
    • Make sure your template includes filters, sorting, and pagination if you want customers to easily browse your catalog.

    Related Articles

    © Shop Maker. Made with passion by SmartWPress