You don't need a page builder or a developer to build a good-looking WooCommerce store.
WordPress's built-in block editor, called Gutenberg, plus WooCommerce's own blocks, give you everything you need.
In this guide, you'll build your store step by step: homepage, shop page, product pages, cart and checkout.
No custom code. No heavy plugins. Let's get started.
- Why Gutenberg and WooCommerce work so well together
- How to set up WordPress, WooCommerce and the right theme
- Which WooCommerce blocks to use, and where
- How to design every key store page with blocks
- How to make your store faster and easier to buy from
Why Use Gutenberg With WooCommerce?
WooCommerce is a free plugin that turns WordPress into an online store.
It handles products, payments, shipping and orders. Gutenberg handles how your pages look.
Together, they let you design your whole store visually. Here's why that matters:
- No code needed: build layouts by adding and arranging blocks.
- Faster pages: the block editor is built into WordPress, so you skip heavy page-builder plugins.
- Ready-made store blocks: WooCommerce adds blocks for products, filters, reviews, cart and checkout.
- Save time with patterns: save a design once as a synced pattern, then reuse it on any page.
- Built to work together: both are part of the WordPress ecosystem, so updates stay compatible.
1. Set Up WordPress
First, you need hosting and a domain.
- Choose a host that offers WordPress or WooCommerce hosting, with one-click install and free SSL.
- Install WordPress from your hosting dashboard.
- Log in at yourdomain.com/wp-admin.
Don't pick the cheapest plan. Online stores need more speed than blogs. A slow host costs you sales.
New to WordPress? Start with our guide on creating a store with WordPress and WooCommerce.
2. Install WooCommerce
- Go to Plugins → Add New.
- Search for WooCommerce.
- Click Install Now, then Activate.
- Follow the setup wizard: store address, currency, payments and shipping.
Selling in Bangladesh? Set your currency to BDT, turn on cash on delivery, and add a gateway plugin like SSLCommerz for bKash, Nagad and cards.
3. Choose the Right Theme
Your theme decides how much you can design with blocks.
| Theme type | Examples | What you can edit with blocks |
|---|---|---|
| Block theme | Twenty Twenty-Five and other block themes | Everything: pages, header, footer, shop and product templates |
| Block-friendly classic theme | Astra, GeneratePress, Kadence | Page content, with the header and footer set in the Customizer |
| Classic WooCommerce theme | Storefront | Page content only |
Want full visual control? Choose a block theme. You can then design every part of your store in Appearance → Editor.
Prefer a proven, lightweight option with lots of tutorials? Astra or GeneratePress are solid choices.
4. Get to Know the WooCommerce Blocks
WooCommerce adds its own blocks to the editor. Click the + button and search "product" to see them.
These are the ones you'll use most:
Product Blocks
- Product Collection: shows a grid of products, such as new arrivals, on-sale items or a category.
- Featured Product: puts one product in the spotlight with a big image.
- Featured Category: promotes a whole category, like "Caps" or "Kids."
- Best Selling Products: shows your top sellers.
Shopping Blocks
- Cart: a full, editable cart page.
- Checkout: a clean, editable checkout page.
- Mini-Cart: a cart icon for your header.
- Add to Cart with Options: lets shoppers pick a size or color and buy.
Filter and Trust Blocks
- Product Filters: let shoppers filter by price, category or attributes like size.
- Reviews blocks: show customer reviews for social proof.
Block names change slightly between WooCommerce versions. If you can't find one, search a keyword like "filter" or "review."
5. Build Your Store Pages
Every store needs five key pages. Here's how to build each one.
Homepage
Go to Pages → Add New, name it "Home," and add:
- Cover block: a hero image, a clear headline and one "Shop now" button.
- Featured Category blocks: help visitors jump to the right section.
- Product Collection block: show new arrivals or best sellers.
- Columns block: list 3 benefits, like fast delivery, easy returns and cash on delivery.
- Reviews block: show what customers say.
Then go to Settings → Reading and set this page as your homepage.
Shop Page
WooCommerce creates your Shop page automatically.
- Block theme: go to Appearance → Editor → Templates → Product Catalog to change the layout.
- Classic theme: adjust the layout in your theme's settings.
Add Product Filters so shoppers can narrow results by price, size or category.
Product Pages
Add each product under Products → Add New:
- A clear title and a benefit-led description.
- A main image plus a gallery.
- Price, sale price, SKU and stock.
- Categories and tags.
- Variations for sizes or colors.
To change how every product page looks, edit one template: Appearance → Editor → Templates → Single Product (block themes only).
Add delivery and return information near the Add to Cart button. It answers the questions that stop people from buying.
Cart and Checkout Pages
New WooCommerce stores use the Cart and Checkout blocks by default.
Open each page and click inside the block to:
- Show or hide fields, like company name or phone number.
- Add a note about delivery times or cash on delivery.
- Match colors and buttons to your brand.
Keep checkout short. Every extra field loses buyers. For Bangladeshi stores, a phone number matters more than a company name.
Policy and Contact Pages
Add About, Contact, FAQ, shipping and returns, and privacy pages. Link them in your footer.
6. Speed Up Your Store and Boost Sales
A fast, simple store sells more. Do these next:
- Test your speed with Google PageSpeed Insights, and fix the biggest issues first.
- Compress images before uploading.
- Use a caching plugin, or your host's built-in caching.
- Install only the plugins you need.
- Test the full buying journey on a real phone.
- Set up automatic order emails and low-stock alerts.
Want more sales from the visitors you already have? Read our conversion rate optimization guide.
Why Gutenberg Beats Heavy Page Builders for Most Stores
- Visual editing: see your design as you build it.
- Store blocks built in: products, filters, cart and checkout, ready to use.
- Synced patterns: design once, reuse everywhere, update in one place.
- Lighter pages: less code than most page builders, which helps speed.
- Full design control: with a block theme, you can design every template without extra plugins.
Frequently Asked Questions
Do I need a page builder like Elementor for WooCommerce?
No. Gutenberg and WooCommerce's blocks are enough for most stores. A page builder only helps if you need very specific layouts or already know one well.
Is Storefront a block theme?
No. Storefront is a classic theme. You can use blocks inside pages, but to edit shop and product templates visually, choose a block theme.
Can I accept bKash and cash on delivery?
Yes. Cash on delivery is built into WooCommerce, and gateway plugins like SSLCommerz add bKash, Nagad, Rocket and cards.
WooCommerce or Shopify?
WooCommerce gives you more control and no platform fee, but you manage hosting and updates. Shopify handles all of that for you. See our Shopify store guide to compare.
Final Thoughts
Gutenberg and WooCommerce give you a complete store builder, for free.
Start with a fast host and the right theme. Use WooCommerce's blocks to build your homepage, shop, product, cart and checkout pages.
Then keep it fast, keep checkout short, and improve one page at a time.
Your store is ready to sell.