🆓 Free route (what we'll use)
WooCommerce shortcodes pasted into Elementor's free Shortcode widget. They show product grids and category tiles, and you style the rest.
Stock your shelves and display your products
Part 2 of 3. Create categories and products, then show them on your Elementor pages in a way that makes people want to buy.
What's inside 🛍️
Tap any card to jump straight there.
📦 Stop 1
Product types, explained simply
Before you add anything, pick the right type. It decides which options the product gets.
| Type | Use it when | Example |
|---|---|---|
| Simple | One product, one price, no choices | A single coffee mug |
| Variable | Same product, different sizes or colours with their own price or stock | A T-shirt in S, M, L and 3 colours |
| Grouped | A set of related products shown together | A skincare range |
| External / Affiliate | You display it, but the sale happens on another site | A product sold on Amazon |
🧠 Think of it like...
A simple product is a packet of biscuits: one thing, one price. A variable product is a kurta on a rack: same design, but you must choose size and colour before it goes to the billing counter.
⬇️
Digital products (PDFs, notes, templates) are simple products with the "Downloadable" box ticked. We'll use simple and variable products in this chapter.
🗂️ Stop 2
Creating product categories
Categories are the aisles of your shop. They help visitors find things, and they help Google understand your catalogue.
1
Open Products → Categories
In your dashboard, hover "Products" and click "Categories."
2
Name the category
Use a clear, short name like "Men's T-Shirts." The slug (the web address part) fills in automatically.
3
Choose a parent, if needed
For a sub-category like "Men's T-Shirts" under "Men," pick "Men" in the Parent category box. Otherwise leave it as "None."
4
Add a description and thumbnail
Write one line about the category and upload a clean image. Many layouts show this image on your shop page.
5
Click "Add new category"
Repeat for each aisle in your shop.
✋
Keep it shallow. Two levels at most. Also, remember to set the SEO title and description for category pages with All in One SEO (Phase Five).
➕ Stop 3
Adding your first simple product
Every product page has the same ingredients: name, price, photos, description, category and stock.
1
Open Products → Add New
You'll see a product editor, or the classic editor with a "Product data" box, depending on your WooCommerce version.
2
Name and describe it
Type the product name. Add a full description for the page, and a short description, which appears next to the price.
3
Set the price
Enter the Regular price. To show a discount, also enter a Sale price. WooCommerce displays the old price crossed out.
4
Manage stock
In the Inventory section, add a SKU (your own product code), tick "Manage stock," and enter the quantity. WooCommerce marks it "Out of stock" when it reaches zero.
5
Add shipping details
In the Shipping section, enter weight and dimensions. Your courier rates in Part 3 may depend on these.
6
Upload images
Set the Product image (the main photo), then add more to the Product gallery. Fill in Alt text for each, as you learned in Phase Five.
7
Pick the category and tags
Tick one or two categories. Add a few tags if useful, like "cotton" or "summer."
8
Publish and view
Click "Publish," then "View product" to see it as a customer would.
📸
Photos sell the product. Use the same size and background for every product image, and compress them before uploading so pages load fast.
🎨 Stop 4
Adding a variable product (sizes and colours)
A variable product has attributes (like Size) and variations (each real combination you can sell).
1
Start a new product
Go to Products → Add New, add the name, description, images and category as before.
2
Change the type to Variable
In the Product data box, change "Simple product" to "Variable product."
3
Add attributes
Open the Attributes tab. Create "Size" with values S | M | L separated by a vertical bar. Tick "Used for variations," and save.
4
Generate variations
Open the Variations tab, choose "Create variations from all attributes," and click Go. You get one row per combination.
5
Fill in each variation
Open each row and set its price, stock and optionally its own image. Same price for all? Use "Set regular prices" from the bulk-actions menu.
6
Save and test
Publish, view the product, and pick each size. Check the price and "Add to cart" button respond correctly.
🐛
"Add to cart" greyed out? Usually a variation has no price, or "Enabled" is unticked. Open each variation and check.
🧩 Stop 5
Showing your products on Elementor pages
Your Shop page already works, but you'll want a homepage that shows off your best products and categories.
There are two routes, and it's important to know which one you have.
⭐ Elementor Pro route
Pro adds ready-made WooCommerce widgets (Products, Add to Cart, Menu Cart) and a template builder to design the whole product page. It's a paid upgrade.
🧠 Think of it like...
A shortcode is a magic word you place on a page. When the page loads, WooCommerce replaces that word with a live grid of products, so you never copy product details by hand.
💡
Free is genuinely enough for a good-looking small store. Elementor Pro is worth considering once a client wants a custom-designed product page.
📋 Stop 6
The shortcode cheat sheet
These few shortcodes cover most homepage needs. Copy, paste, then change the words in the quotes.
| You want... | Paste this |
|---|---|
| 8 newest products in 4 columns | [products limit="8" columns="4" orderby="date"] |
| Best sellers | [products limit="4" columns="4" best_selling="true"] |
| Products on sale | [products limit="4" columns="4" on_sale="true"] |
| Only one category | [products limit="4" columns="4" category="mens-t-shirts"] |
| Category tiles with images | [product_categories number="6" columns="3"] |
| Specific products by ID | [products ids="12,15,18" columns="3"] |
🔎
Category uses the slug, not the name. Find a category's slug in Products → Categories. A product's ID shows when you hover over it in Products → All Products.
🏗️ Stop 7
Building a beautiful shop section on your homepage
Let's put a "Shop by category" row and a "Best sellers" row on the homepage.
1
Open the homepage in Elementor
Go to Pages, hover your Home page, and click "Edit with Elementor."
2
Add a heading
Add a new section with a Heading widget: "Shop by category." Set the HTML tag to H2 (Phase Five).
3
Add the category tiles
Drag a Shortcode widget below it and paste [product_categories number="4" columns="4"].
4
Add your best sellers
Add another section with the heading "Best sellers," then a Shortcode widget with [products limit="4" columns="4" best_selling="true"].
5
Add a "View all" button
Add a Button widget linking to your Shop page, so visitors can see everything.
6
Give it room to breathe
In each section's Advanced tab, add generous top and bottom padding (60–80px). Use a soft background colour to separate rows.
7
Tune the shop look in Astra
Go to Appearance → Customize → WooCommerce. Here you can set columns per row, sale badge style, and how product images and prices appear.
8
Check phones
Use the screen icons at the bottom of Elementor to preview tablet and mobile. Then click Update.
✨
Design tip: Stick to one or two colours, keep images the same shape, and show fewer products with more space. A calm, tidy shop feels more trustworthy than a crowded one.