In WordPress WooCommerce, you can use the WooCommerce REST API to get product data like product name, product image, product price, and short description. WooCommerce provides a built-in REST API to access and manage products and other WooCommerce data.

Requirements:

• Flutter Installed in your computer
• Xampp Installed
• Composer Installed (For PHP)
• WordPress Woocommerce Website Set with some products
• VS Code or Android Studio Installed

Here’s how you can set up and retrieve product information using the WooCommerce REST API.

Steps:

1. Enable WooCommerce REST API:
   • Go to your WordPress Dashboard.
   • Navigate to WooCommerce > Settings > Advanced > REST API.
   • Click on Add Key to generate new API keys.
   • Set Permissions to Read (if you only want to fetch data) or Read/Write (if you want to also update data).
   • Generate the Consumer Key and Consumer Secret

Make an API Request:

WooCommerce products can be retrieved using the /wp-json/wc/v3/products endpoint.

Here’s a basic request to retrieve products:

GET /wp-json/wc/v3/products

You can use your Consumer Key and Secret for authentication in your API request. You can pass them as query parameters or use Basic Auth.

curl https://yourwebsite.com/wp-json/wc/v3/products \
-u consumer_key:consumer_secret

Using Postman or other REST Clients:
URL: https://yourwebsite.com/wp-json/wc/v3/products
Method: GET
Authentication: Basic Auth (with your consumer_key and consumer_secret).

Response Format:
The API will return a JSON array of products, each containing information like the product name, images, price, and short description. Here’s an example of the relevant fields:

——————–‘

[
{
“id”: 123,
“name”: “Sample Product”,
“price”: “19.99”,
“short_description”: “<p>This is a short description of the product.</p>”,
“images”: [
{
“src”: “https://yourwebsite.com/wp-content/uploads/2023/04/sample-product.jpg”
}
]
},
{
“id”: 124,
“name”: “Another Product”,
“price”: “29.99”,
“short_description”: “<p>This is another product.</p>”,
“images”: [
{
“src”: “https://yourwebsite.com/wp-content/uploads/2023/04/another-product.jpg”
}
]
}
]
————–

Extracting the Product Data:
You can extract the following fields from each product object:

Product Name: Found in the “name” field.
Product Price: Found in the “price” field.
Short Description: Found in the “short_description” field (contains HTML markup).
Product Image: Found in the “images” array. Use the “src” field for the image URL.

First install :

composer require automattic/woocommerce

Sample PHP Code to do this:

<?php
require __DIR__ . ‘/path-to-your-vendor/autoload.php’;

use Automattic\WooCommerce\Client;

$woocommerce = new Client(
‘https://yourwebsite.com’, // Your store URL
‘consumer_key’, // Consumer Key
‘consumer_secret’, // Consumer Secret
[
‘version’ => ‘wc/v3’,
] );

$products = $woocommerce->get(‘products’);

// Loop through the products and get desired data
foreach ($products as $product) {
echo “Product Name: ” . $product->name . “<br>”;
echo “Price: ” . $product->price . “<br>”;
echo “Short Description: ” . $product->short_description . “<br>”;

// Get the product image
if (!empty($product->images)) {
echo “Image: ” . $product->images[0]->src . “<br>”;
}

echo “<hr>”;
}
?>

—-

// Fetch all products
$products = $woocommerce->get(‘products’);
header(‘Content-Type: application/json’);
header(‘Access-Control-Allow-Origin: *’);
// Initialize an array to store the formatted data
$formattedProducts = [];

foreach ($products as $product) {
// Add each product to the formatted array with custom keys
$formattedProducts[] = [
‘product_name’ => $product->name, // Product Name
‘product_price’ => $product->price, // Product Price
‘product_image’ => !empty($product->images) ? $product->images[0]->src : null, // First Product Image (if available)
‘product_sd’ => strip_tags($product->short_description) // Short Description (without HTML tags)
];
}

// Output the formatted data as JSON

echo json_encode($formattedProducts);
?>

Explanation:

1. Fetch Data:
   • fetchProducts() function uses the http package to fetch data from your API endpoint. It then parses the JSON response and updates the products list.
2. GridView Builder:
   • GridView.builder is used to create a grid layout with two products per row (crossAxisCount: 2).
   • The spacing between columns and rows is controlled by crossAxisSpacing and mainAxisSpacing.
   • Each product is displayed using the ProductTile widget, which is built with a Card widget to show the product image, name, price, and short description.
3. ProductTile Widget:
   • This widget is responsible for displaying the individual product’s details:
     • Product Image: Loaded using Image.network(productImage).
     • Product Name: Displayed in bold.
     • Product Price: Displayed in green.
     • Short Description: Limited to two lines, and the overflow is handled using TextOverflow.ellipsis.
4. API Endpoint:
   • Replace 'http://localhost/your-api-endpoint' with the actual URL of your API endpoint where the product data is served in JSON format.