🛒 MODULE: Product Listing – Variable Product in WooCommerce

✅ Step 1: Log in to WordPress Admin

• URL: yourdomain.com/wp-admin

• Go to Dashboard.

✅ Step 2: Install & Activate WooCommerce (if not done)

• Go to Plugins > Add New.

• Search for WooCommerce.

• Click Install Now → Activate.

✅ Step 3: Add New Product

• Go to Products > Add New

Fill in:

• Product Name

• Description (Long product description)

• Product Image

• Product Gallery (optional)

📷 [Image Idea: Screenshot of “Add New Product” screen with fields labeled]

✅ Step 4: Set Product Type to “Variable Product”

Scroll down to the Product Data section:

• Select Variable Product from the dropdown.

📷 [Image Idea: Dropdown showing “Simple product” changed to “Variable product”]

✅ Step 5: Create Product Attributes

Go to the Attributes tab under Product Data:

1. Click Add (for example: Size or Color)

2. Enter name (e.g., “Size”)

3. Enter values separated by a | symbol (e.g., Small | Medium | Large)

4. Check both:

   • Visible on the product page

   • Used for variations

5. Click Save attributes

📷 [Image Idea: Adding attributes screen with Size values entered]

✅ Step 6: Configure Variations

Now go to the Variations tab:

1. Click Add variation → choose “Create variations from all attributes” → Click Go

2. WooCommerce will auto-generate all combinations (e.g., Small, Medium, Large)

For each variation:

• Set Price (required)

• Optionally set:

  • SKU

  • Stock status

  • Image for that variation

📷 [Image Idea: List of generated variations with price and stock fields]

✅ Step 7: Add Short Description

Scroll down and enter a Short Description (shows near the price on product page).

✅ Step 8: Set Product Categories

On the right panel:

• Choose or create a category for the product.

✅ Step 9: Publish

Click Publish to make the product live.

✅ Step 10: View Product

• Click View Product to see how the product and its variations appear to customers.

📷 [Image Idea: Live product page showing dropdown to select variation]

📌 Final Output Example (What the customer sees)

• Product with dropdowns like:

  • Size: Small | Medium | Large

• Price changes as variation is selected.

• Variation image updates.