Build a WooCommerce Mobile App with Flutter and WordPress

Looking to build a WooCommerce mobile app using Flutter and WordPress? This guide will walk you through everything you need to know. By combining Flutter (Google’s UI toolkit) with WooCommerce, the powerful WordPress plugin, you can create a seamless mobile shopping experience for your customers.

In this tutorial, you’ll learn how to develop a mobile app for WooCommerce that can:

• Authenticate users
• Fetch and display product data
• Handle cart functionality
• Submit orders to your WooCommerce WordPress store

Whether you’re building a Flutter WooCommerce app from scratch or using a WooCommerce mobile app builder, this guide lays the groundwork using official APIs and robust architecture.

Step 1: Enable WooCommerce REST API

To connect your Flutter WooCommerce app to your store, first set up the WooCommerce REST API.

WordPress Configuration Checklist:

To connect your Flutter WooCommerce app to your store, first set up the WooCommerce REST API.

WordPress Configuration Checklist:

1. Enable Permalinks
   • Go to Settings > Permalinks in your WordPress dashboard
   • Select Post name
   • This is essential for the WooCommerce WordPress plugin to expose REST endpoints like /wp-json/
2. Generate WooCommerce API Keys
   • Navigate to WooCommerce > Settings > Advanced > REST API
   • Click Add Key
   • Set permissions to Read/Write
   • Generate your Consumer Key and Consumer Secret
3. Use HTTPS
   • Ensure your WordPress with WooCommerce site has an SSL certificate installed
   • REST API calls should be made over HTTPS for security
4. Enable CORS (Optional for Development)
   • If testing your mobile app WooCommerce integration on localhost or a different domain, configure CORS
   • You can edit .htaccess or use a plugin like “WP CORS” to add headers like:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Authorization, Content-Type"

After this setup, your WooCommerce mobile app plugin or custom Flutter integration can begin making API requests.

Step 2: Authenticate Users via JWT (Optional but Recommended)

To allow users to log in securely to your Flutter WooCommerce app, implement JWT authentication.

1. Install the Plugin
   • Install and activate JWT Authentication for WP REST API from the WordPress plugin directory
2. Configure Authorization Header Support
   In .htaccess:

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

Login Request Format
Make a POST request to:
/wp-json/jwt-auth/v1/token

Body:

{
  "username": "yourusername",
  "password": "yourpassword"
}

Flutter Integration Example:

Future<void> login(String username, String password) async {
  final response = await http.post(
    Uri.parse('https://yourstore.com/wp-json/jwt-auth/v1/token'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({'username': username, 'password': password}),
  );

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    String token = data['token'];
    // Save token for future use
  } else {
    // Handle authentication error
  }
}

Step 3: Fetch Products from WooCommerce

To list products inside your WooCommerce mobile app, use the /products endpoint from the WooCommerce REST API.

Flutter Example Using Dio:

BaseOptions options = BaseOptions(
  baseUrl: 'https://yourstore.com/wp-json/wc/v3',
  headers: {
    'Authorization': 'Basic ' + base64Encode(utf8.encode('ck_xxx:cs_xxx')),
  },
);

Dio dio = Dio(options);

Future<List<dynamic>> fetchProducts() async {
  final response = await dio.get('/products');
  return response.data;
}

Common Query Parameters:

• per_page :Number of products to return
• page : For pagination
• category : Filter by category ID
• search : Keyword search

This makes your Flutter WooCommerce frontend flexible and dynamic.

Step 4: Get a Single Product by ID

To display product details in your mobile app WooCommerce layout:

Future<Map<String, dynamic>> getProduct(int id) async {
  final response = await dio.get('/products/$id');
  return response.data;
}

Step 5: Handle Cart Functionality

The WooCommerce WordPress plugin does not offer a built-in cart API. However, you can manage cart state locally in Flutter or build a custom WooCommerce REST extension.

Local Cart Example in Flutter :

class CartModel extends ChangeNotifier {
  final List<Product> _items = [];

  List<Product> get items => _items;

  void add(Product product) {
    _items.add(product);
    notifyListeners();
  }

  void remove(Product product) {
    _items.remove(product);
    notifyListeners();
  }

  double get total => _items.fold(0, (sum, item) => sum + item.price);
}

This method is lightweight and ideal for MVP versions of your Flutter WooCommerce app.

Step 6: Display Products in Flutter

Use ListView.builder to create a scrollable product catalog:

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    final product = products[index];
    return Card(
      child: ListTile(
        title: Text(product['name']),
        subtitle: Text('\$${product['price']}'),
        leading: Image.network(product['images'][0]['src']),
      ),
    );
  },
);

You can enhance the design using GridView, cached_network_image, or flutter_staggered_grid_view to create a beautiful WooCommerce mobile app UI.

Step 7: Checkout and Create Order

To create orders from the cart in your Flutter WooCommerce app:

Endpoint:

/wp-json/wc/v3/orders

Flutter code:

Future<void> createOrder(String token, List<Map<String, dynamic>> items) async {
  final response = await dio.post(
    '/orders',
    data: {
      "payment_method": "cod",
      "payment_method_title": "Cash on Delivery",
      "set_paid": false,
      "billing": {
        "first_name": "John",
        "last_name": "Doe",
        "address_1": "123 Main St",
        "city": "City",
        "state": "State",
        "postcode": "12345",
        "country": "US",
        "email": "john@example.com",
        "phone": "1234567890"
      },
      "shipping": {
        "first_name": "John",
        "last_name": "Doe",
        "address_1": "123 Main St",
        "city": "City",
        "state": "State",
        "postcode": "12345",
        "country": "US"
      },
      "line_items": items
    },
    options: Options(headers: {
      'Authorization': 'Bearer $token'
    }),
  );

  if (response.statusCode == 201) {
    // Show order success screen
  } else {
    // Handle order failure
  }
}

Each line_item should follow this format:

{
  "product_id": 123,
  "quantity": 2
}

Conclusion

You now have the core structure to build a functional WooCommerce mobile app using Flutter and WordPress. This approach leverages the WooCommerce REST API, JWT authentication, and modern Flutter UI components to provide a seamless experience for mobile shoppers.

Whether you’re building a custom solution or extending a WooCommerce mobile app plugin, this guide can serve as your blueprint. With your knowledge of Flutter WooCommerce integration, you can continue scaling your app with features like payment gateways, customer profiles, reviews, and more.