How-to › Design your store › Elementor
Elementor: Build Your Store and Category Pages
Build your store page, product rows, carousels, category tiles and search with the WP EasyCart shop widgets in Elementor. 8 parts.
Quick links
Where to find it:WP Admin › EasyCart › Settings › Elementor
Before you start
What each widget does
The five shop widgets and which page each one builds.
Which widget builds which page
Five shop widgets, one job each
no stored settingsWhat you need. WP EasyCart and Elementor. The free version of Elementor is enough, and so is the free WP EasyCart. All five widgets sit in the WP EasyCart · Shop group of the panel. New to this? Start with the connect and widgets overview in this series.
Products is a product grid. Use it for a featured row on the home page, a category landing page or a related products strip.
Product Carousel is the same list as a sliding row.
Product Categories shows category tiles.
Shop is the full store page: search, sorting, filters, page numbers and the product grid in one widget.
Product Search is a search box you can put in a header or a banner.
Every product card is the same card, so buttons, prices, badges and quick view look and behave alike wherever they appear. The steps: build a product list, add a carousel or category tiles, build the store page, add search, then make a category layout.
Build it
Five steps
A product list, a carousel and category tiles, the store page, search and category layouts.
Step 1. The Products widget
A grid of the products you choose
no stored settingsDrag Products onto a page. In the Products section of the panel, the Show choice decides which products the grid holds:
All products, Featured products, Products on sale, Newest products and Best sellers. Best sellers are the products sold most in paid orders with refunds taken off, worked out again every few hours.
Products I choose: pick products by name. They show in the order you add them.
Products in categories I choose and Products by manufacturers I choose: pick from the list.
Products in the category of the page it is on and Products by the manufacturer of the page it is on: see step 5.
Products related to the product of the page it is on: the product’s own featured products first, then other products from its categories. Use it on product pages and product templates.
Then tune the list. Only products in stock hides sold-out products. Order offers Default, Store order, Name A to Z or Z to A, Price low to high or high to low, Newest first, Oldest first, Best rated, Most viewed and Random. Default keeps your chosen products in your order, best sellers by sales and newest by date, and follows the store’s sort order for everything else. Number of products starts at 8.
The Layout section sets columns and the gaps between products and rows. More products can be None, Page numbers or a Load more button (with its own text). Message when there are no products is what shows if nothing matches; leave it empty and visitors see nothing at all. A random order shows one page only.
The Product card section switches each part of a card on or off: Image, Second image on hover, Quick view, Badges (sale, sold out, product tag), Category, Name, Rating, Price, Colour swatches, Short description and Add to cart button. Products with options link to their page so the shopper can choose; other products are added without leaving the page.
💡 Note: Use Products for a fixed strip, such as three featured products on the home page. Use Shop when shoppers need search, sorting and filters.
Step 2. Carousel and category tiles
Product Carousel and Product Categories
no stored settingsProduct Carousel has the same Products section as the Products widget, so the same Show, Order and Number of products choices apply. Its own Carousel section sets Products in view, Arrows and Dots (show or hide), Move by itself with Seconds on each move, and Start again after the last product. A carousel that moves by itself stops while a shopper points at it or uses the keyboard in it, has a Pause button and stays still for shoppers who ask their device for less motion.
Product Categories shows tiles instead of products. Show offers Top categories, Featured categories, Subcategories of the page’s category and Categories I choose. On a category page it shows that category’s subcategories, and anywhere else the top categories. Order is Store order or Name, and Most categories caps the list. Leave out categories without products keeps empty tiles off the page. In the Layout section choose whether the image shows, whether the name sits under or on the image, and whether the tile shows a product count and a short description.
Step 3. The Shop widget
The whole store page in one widget
no stored settingsPut Shop on your store page. It draws the product grid with a toolbar and a filter column, and it updates as shoppers search, sort and filter.
In the Products section, Show starts on What the page is (store, category or manufacturer): on the store page it lists every product, on a category page or category template that category, on a manufacturer page that manufacturer. Change it to A category I choose, A manufacturer I choose or All products to pin it. Products shown can narrow it to Featured products (until the shopper searches or filters), Only products on sale or Only products in stock. Products per page follows Settings › Per page when left empty.
The Toolbar and filters section has a switch for each piece: Number of results, Sorting, Page numbers and Active filters as removable chips. Sort order to start with picks the first sort. The sort choices shoppers get are set in Settings › Products › Product lists.
Filters beside the products turns the filter column on, on the left or right. On phones and narrow columns it folds behind a Filters button. Choose which groups show: Search box, Categories (with Categories to list, which by default lists the subcategories of the page’s category or the top categories elsewhere), Manufacturers, Price ranges (the ranges you set in Settings › Price points) and Filter by options. Pick option sets such as colour or size and each becomes a filter group.
Step 4. Add Product Search
A search box for a header or a banner
no stored settingsDrag Product Search where shoppers should find it. Set the Placeholder and the Button (Icon, Text, Icon and text, or No button where Enter searches).
Results show on decides where a search lands: The store page, This page (which needs a Shop widget on it) or Another address. Suggestions while typing can be As set for the store, Show or Hide. When suggestions are on you set Letters typed before suggesting, Most suggestions, whether they show Product images and Prices and whether a View all results link closes the list.
What a search matches, and whether the store suggests products while shoppers type, are store-wide settings in Settings › Products, in the Search card.
Step 5. Give categories their own layout
Settings › Elementor › Category pages
no stored settingsCategories can share one Elementor layout. Go to EasyCart › Settings › Elementor and find Category pages, which says One Elementor layout for every category page. Press Create a category template.
Elementor opens with a draft called Category page. It starts with Category Title, Category Description, Subcategories and a Products widget already set to Products in the category of the page it is on. That last setting is what makes one layout work for every category: the widget shows the products of whichever category the shopper opened. On a product page the same setting shows the product’s first category and leaves that product out, and while you edit a page that is not a category, a sample category is shown.
Publish it in Elementor, then check Layout for category pages in Settings › Elementor. A draft is labelled so and category pages keep the standard layout until you publish. When it is live the page says In use on every category page and offers View a category page. The next guide in this series builds the whole template, including the category and manufacturer widgets.
⚠️ Careful: If you use Elementor Pro’s Theme Builder for category pages, that template wins over the one chosen here. Settings › Elementor warns you when both target the same pages.
Good to know
Store rules and fixes
The store-wide rules the lists follow and the usual problems.
Store-wide rules the lists follow
Set once in the store, not per widget
no stored settingsSettings › Elementor has a card called Product lists and search. It lists the rules every shop widget follows, each with a Change link to the setting:
Search: what a search matches and whether the box suggests products while typing.
Sorting: the sort choices in the Shop widget, and the store order other lists use.
Add to cart: whether a card adds in the background or takes the shopper to the cart, and the View cart link.
Who can view the store: visitors the store keeps out see no product lists.
Products per page: the Shop widget’s page size unless the widget sets its own.
Price ranges: the ranges the Shop widget’s price filter offers.
If it does not work
Empty grids and missing pieces
no stored settingsA list is empty on the live page. The store may be limited to certain customer roles (Who can view the store), or no product matches: inactive products and products for another customer role never show. Add a message in Message when there are no products to see why.
The editor shows sample products but the page shows none. Settings that read the page (the category or manufacturer of the page it is on, related products) show samples while you edit and real data only on a matching page.
A Shop widget shows the wrong category. Check Show. On What the page is it follows the page it sits on.
Search ignores the Shop widget. Results show on must be This page, and the page must have a Shop widget on it.
Best sellers or prices look out of date. Best sellers refresh every few hours. Keep each widget’s Advanced › Cache Settings on Default.
Keep going
Related panels
The store-wide list, search and add to cart settings.
Products per page for the Shop widget.
The price ranges the Shop widget offers as a filter.
Manage the categories the widgets list.
Ready to run your store on WP EasyCart?
Everything in this guide works with the free plugin. PRO and Premium add subscriptions, memberships, wholesale pricing and more. Try every PRO feature free for 14 days.
