Here's a step-by-step guide on how to utilize Ecommerce components:
What are the Ecommerce Components?
Ecommerce components in Skelementor are pre-built templates designed specifically for online stores. These components include product archives, product sections, checkout page, cart page, and more.
What are the requirements for E-commerce components?
To successfully use Skelementor's Ecommerce components, the following requirements must be met:
WooCommerce - The core plugin that enables e-commerce functionality on your WordPress site.
Elementor Pro - Required for accessing advanced widgets and design flexibility, especially for dynamic e-commerce elements.
How to copy Ecommerce components properly?
Follow these steps to ensure a smooth experience:
1. Access the Component Library
Visit: https://app.skelementor.com
Navigate to any Ecommerce categories on the sidebar.
2. Browse and Select
Hover over the component card you wish to use.
Click the Copy button that appears on the component item
3. Select the component template type
E-commerce components in Skelementor come in two formats:
Loop template: This template is used for repeating elements like product grids or listings. It defines how each individual product item within the grid appears, such as the layout of a single product card.
Page template: This is a full-page template that contains the entire product grid along with key page elements such as filters, headers, footers, and call-to-action sections.
Important: For the Ecommerce component to work properly, you must use both the Loop Template and the Page Template. The Loop Template designs the individual product item, while the Page Template structures the full product grid along with page elements like filters, headers, and call-to-actions. Skipping one will lead to issues or an incomplete display.
Where to paste the Ecommerce components inside WordPress?
Understanding where to place each template is essential to ensure your Ecommerce layout works as intended. Skelementor’s Ecommerce components are structured in two parts: the Loop Template and the Page Template. Each has a specific purpose and must be placed in the correct location within Elementor to render properly.
Where to paste the Loop Template?
1. First, create a template inside:
Elementor > Templates > Add New Template > Loop Items.
Choose the following configuration for the template:
⚙️ Select the type of template you want to work on: Loop Item
⚙️ Choose source type: Products
2. Paste the Loop Template component
3. Click the publish button once you have pasted the template
Where to paste the Page Template?
1. First, create a template inside:
Elementor > Templates > Add New Template > Product Archives
Choose the following configuration for the template:
⚙️ Select the type of template you want to work on: Products Archive
2. Paste the Page Template component
3. Select the Loop Template that you have created from the dropdown and publish
4. Now, click on the Add Condition button
5. Select Shop Page from the condition dropdown
6. Now go to your WooCommerce Settings > Products and select your desired page as a shop page
By following this guide, you can confidently implement Skelementor’s Ecommerce components into your workflow, allowing for faster development, consistent styling, and improved website performance.