If you’re looking to display dynamic products in WordPress without writing code, this guide is for you! In this tutorial, I’ll show you how to create a custom template in PHP without coding, using Elementor, ACF (Advanced Custom Fields), and a custom API. You’ll learn how to fetch product data dynamically, set up ACF fields, and use Elementor to design your template all without manually writing PHP code. Whether you’re a beginner or an experienced WordPress user, this method will help you integrate external data effortlessly

What is an API ?

An API (Application Programming Interface) allows your website to interact with external data sources. Whether you’re fetching products, weather updates, or stock prices, APIs make it easy to display live data without manual updates. In our case we care going to create a custom API to fetch products data in a list. Then fetching their data dynamically and showing it in Elementor’s Custom Template.

How to Fetch Data from API in WordPress

Steps to Pass Data to Custom Elementor Template Dynamically

Step1 : Setting Up the API (Create an API with Endpoint)

• Go to cPanel and access the File Manager.
• Create a new PHP file (products-api.php) inside the root directory.
• Open the file and add JSON-formatted product data.
• Save the file and check if the API is working.

To check the API after your domain add /products-api.php. Copy the Endpoint and Paste in Browser. It will show a valid api data includes all products information as shown below image.

Example : https://webcrowd.co.in/dynamicdatafetch/products-api.php

Copy JSON API Data

<?php
// Set header to serve JSON
header("Content-Type: application/json");

// Updated Product Data with lowercase specification keys
$products = [
    [
        "id" => 1,
        "title" => "Wireless Bluetooth Headphones Pro",
        "price" => 99.99,
        "description" => "Premium wireless headphones with immersive sound, noise cancellation, and extended battery life for audiophiles.",
        "image" => "https://cdn.pixabay.com/photo/2017/08/02/19/09/people-2572971_1280.jpg",
        "specifications" => [
            "sound" => "HD Sound with Deep Bass",
            "noise_cancellation" => "Active",
            "battery" => "40-Hour Battery Life",
            "connectivity" => "Bluetooth 5.0",
            "warranty" => "1 Year"
        ]
    ],
    [
        "id" => 2,
        "title" => "Wireless Over-Ear Headphones Max",
        "price" => 129.99,
        "description" => "Experience studio-quality audio and unmatched comfort with these over-ear wireless headphones featuring deep bass.",
        "image" => "https://cdn.pixabay.com/photo/2016/11/19/16/01/audio-1840073_1280.jpg",
        "specifications" => [
            "sound" => "HD Sound with Good Quality",
            "noise_cancellation" => "Active",
            "battery" => "40-Hour Battery Life",
            "connectivity" => "Bluetooth 5.0",
            "warranty" => "1 Year"
        ]
    ],
    [
        "id" => 3,
        "title" => "Classic Wireless Bluetooth Headphones",
        "price" => 69.99,
        "description" => "Affordable wireless headphones delivering great sound, noise-canceling, and all-day battery performance.",
        "image" => "https://cdn.pixabay.com/photo/2018/09/17/14/27/headphones-3683983_1280.jpg",
        "specifications" => [
            "sound" => "HD Sound with Deep Bass",
            "noise_cancellation" => "Active",
            "battery" => "40-Hour Battery Life",
            "connectivity" => "Bluetooth 5.0",
            "warranty" => "1 Year"
        ]
    ],
    [
        "id" => 4,
        "title" => "Limited Edition Wireless Headphones",
        "price" => 149.99,
        "description" => "Exclusive limited-edition headphones with superior sound, luxurious design, and enhanced noise-canceling technology.",
        "image" => "https://cdn.pixabay.com/photo/2019/08/27/13/35/headphones-4434215_1280.jpg",
        "specifications" => [
            "sound" => "HD Sound with Deep Bass",
            "noise_cancellation" => "Active",
            "battery" => "40-Hour Battery Life",
            "connectivity" => "Bluetooth 5.0",
            "warranty" => "1 Year"
        ]
    ]
];

// Output JSON response
echo json_encode(["products" => $products], JSON_PRETTY_PRINT);
?>

Step2 : Fetch or Collect Data from API Using Endpoint

In this We want data from API to show in Our Product. So there are some line of codes in wordpress depending on structure of API data. But no need to do it separately because everything is handling by a custom plugin. Here is the code to fetch data from API

private function fetch_products_from_api() {
        $api_url = 'https://webcrowd.co.in/dynamicdatafetch/products-api.php';
        $response = wp_remote_get($api_url);
        
        if (is_wp_error($response)) {
            error_log('API Request Error: ' . $response->get_error_message());
            return array();
        }
        
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        
        // Check if the response has the "products" key and it's an array
        if (isset($data['products']) && is_array($data['products'])) {
            return $data['products'];
        }
        
        error_log('API Response missing "products" key or not in expected format');
        return array();
    }
    
    /**
     * Fetch single product from API
     */
    private function fetch_product_from_api($product_id) {
        $products = $this->fetch_products_from_api();
        
        foreach ($products as $product) {
            if ($product['id'] == $product_id) {
                return $product;
            }
        }
        
        return null;
    }

Step3 : Install ACF Plugin and Create Fields

The next step is to create ACF fields of every data from API that we want to show dynamically.

• Install the Advanced Custom Fields (ACF) plugin from the WordPress dashboard.
• Create fields that match the API data structure (e.g., Title, Price, Images, Description).
• Ensure the field names match exactly with the API to avoid errors.

Step4 : Install Custom Plugin (Heart of Process)

Now We will install Our Main Custom Plugin that will responsible for all functioning. You can download it from link given “API to Elementor”

Download Custom Plugin

Plugin Working

This Plugin is Fully Customized by us and handles connections between ACF fields you created and API data. Along with It Provides Some shortcodes to fetch data dynamically for all API fields like Title, price etc. We have to Put them inside Our Elementor Custom Template. Here are the list of shortcodes

To Show List of Products and Data

 Use shortcode [product_grid columns="4"] to display the product grid on any page.

• [api_product_title] – Displays the product title
• [api_product_price] – Displays the product price
• [api_product_description] – Displays the product description
• [api_product_image] – Displays the product image
• [api_product_spec field="sound" label="Sound"] – Displays a specification (available fields: sound, noise_cancellation, battery, connectivity, warranty)

Step5 : Create Elementor Custom Template and Bind All Shortcodes

Finally when finished designing your custom template using Elementor now its time to Utilize all shortcodes in it. To display products from API in List Use shortcode [product_grid columns="4"] and place in home page or anywhere you want to show.

Alos Place Other shortcodes inside every field of Custom template

Watch Tutorial

What are the Benefits Using this Technique ?

Using this technique to fetch and display API data in WordPress offers several advantages, especially for non-developers:

✅ No Coding Required

You don’t need to write PHP or JavaScript code to fetch and display API data, making it beginner-friendly.

✅ Time-Saving

Instead of manually updating content, API data updates automatically, reducing maintenance efforts.

✅ Enhanced Flexibility

With tools like Elementor and ACF, you can design custom layouts for API content without modifying theme files.

✅ Better Security

Since no custom scripts or external requests are manually handled, this method ensures fewer security vulnerabilities.

✅ Seamless Integration

Works with any WordPress theme and allows easy customization using drag-and-drop builders

✅ Improved Performance

Fetching API data dynamically means you don’t have to store excessive content in your database, improving website speed and performance.

Conclusion

Fetching API data in WordPress without coding simplifies the process of integrating dynamic content while keeping your site flexible and secure. With the help of tools like Elementor and ACF, you can display external data without modifying theme files or writing complex code. This technique not only saves time but also enhances performance and ensures seamless updates. Whether you’re fetching product details, blog posts, or any other API-driven content, this method makes WordPress customization more accessible for everyone.