Why WooCommerce powers ecommerce in Wordpress - See It in Action

Why WooCommerce powers ecommerce

📖 Scenario: You want to create a simple WooCommerce-powered online store page on your WordPress site. WooCommerce is a popular plugin that helps you sell products easily.

🎯 Goal: Build a basic WooCommerce product list page by setting up product data, configuring a display setting, looping through products, and completing the WooCommerce shortcode to show products on a page.

📋 What You'll Learn

Create an array of products with exact names and prices

Add a variable to set the number of products to display

Use a loop to prepare product display HTML for each product

Add the WooCommerce shortcode with the correct attributes to show products

💡 Why This Matters

🌍 Real World

WooCommerce is widely used to create online stores on WordPress sites, making it easy to sell products without coding complex ecommerce systems.

💼 Career

Understanding WooCommerce setup and shortcode usage is valuable for WordPress developers and site managers building ecommerce websites.

1

Set up product data array

Create a PHP array called $products with these exact entries: [['name' => 'T-shirt', 'price' => 20], ['name' => 'Mug', 'price' => 10], ['name' => 'Hat', 'price' => 15]].

Wordpress

<?php
// Create the products array with name and price
// Your code here

Need a hint?

Use a PHP array with associative arrays inside for each product.

2

Add product display count variable

Add a PHP variable called $display_count and set it to 3 to control how many products to show.

Wordpress

 'T-shirt', 'price' => 20],
    ['name' => 'Mug', 'price' => 10],
    ['name' => 'Hat', 'price' => 15]
];
// Set how many products to display
// Your code here

Need a hint?

Just create a variable and assign the number 3.

3

Loop through products to prepare display

Use a for loop with variable $i from 0 to less than $display_count to create a string $product_list that adds each product's name and price in a list item format like <li>T-shirt - $20</li>.

Wordpress

 'T-shirt', 'price' => 20],
    ['name' => 'Mug', 'price' => 10],
    ['name' => 'Hat', 'price' => 15]
];
$display_count = 3;
// Create product list HTML using a for loop
// Your code here

Need a hint?

Start with $product_list = "

"; then add list items inside the loop, and close with "

".

4

Add WooCommerce shortcode to display products

Add a PHP echo statement with the WooCommerce shortcode [products limit="$display_count"] to display the products on the page.

Wordpress

 'T-shirt', 'price' => 20],
    ['name' => 'Mug', 'price' => 10],
    ['name' => 'Hat', 'price' => 15]
];
$display_count = 3;
$product_list = "";
for ($i = 0; $i " . $products[$i]['name'] . " - $" . $products[$i]['price'] . "";
}
$product_list .= "";
// Echo WooCommerce shortcode with limit attribute
// Your code here

Need a hint?

Use echo do_shortcode() with the WooCommerce shortcode string.