How to Dynamically Display WooCommerce Products on Your Website Using FeedWind

• Created : Aug, 15, 2024
• Last Updated: Aug, 21, 2024

Step 1: Access Your WooCommerce Product RSS Feed

WooCommerce automatically generates an RSS feed for your products. You can use this feed to display your products dynamically.

1. Locate the WooCommerce Shop Feed:
   • If your WooCommerce shop page is set up at /shop/, you can access the product RSS feed by going to:
     https://yourdomain.com/shop/feed/
   • This URL should generate an RSS feed for the products displayed on your main shop page, similar to how https://yourdomain.com/?post_type=product&feed=rss2 does.
2. Test the Feed:
   • Open the feed URL in a browser to ensure it displays the correct products RSS feeds.

Step 2: Add Product Images to Your RSS Feed

By default, WooCommerce RSS feeds do not include product images. To include them, you need to modify your theme’s functions.php file.

1. Access the functions.php File:
   • Go to Appearance > Theme File Editor in your WordPress admin.
   • Open the functions.php file (preferably in a child theme).
     
2. Add the Code to Include Images:
   • Add the following code to your functions.php file to include product images in your RSS feeds:

// Add product images to WooCommerce RSS feed
function add_product_image_to_rss_feed($content) {
    global $post;

    // Check if the post type is 'product'
    if (get_post_type($post->ID) == 'product') {
        // Get the product thumbnail
        $thumbnail = get_the_post_thumbnail($post->ID, 'medium');
        
        // If thumbnail exists, prepend it to the RSS feed content
        if ($thumbnail) {
            $content = $thumbnail . $content;
        }
    }

    return $content;
}
add_filter('the_excerpt_rss', 'add_product_image_to_rss_feed');
add_filter('the_content_feed', 'add_product_image_to_rss_feed');

3. Save and Test:
   • Save the changes and check your feed to confirm that images are included.
     

Note: This step should be done under developer supervision.

Step 3: Set Up a FeedWind Widget

With your RSS feed ready, you can now create a FeedWind widget to display your products.

1. Sign Up or Log In to FeedWind:
   • Go to FeedWind and sign up or log in.
     
2. Create an RSS Widget:
   • Choose “Create New Widget” and select “RSS Widget.”
     
3. Enter Your RSS Feed URL:
   • Paste your WooCommerce product feed URL (https://yourdomain.com/shop/feed/).
4. Customize the Widget:
   • Adjust the layout, colors, and other settings to match your website.
     
5. Generate and Copy the Widget Code:
   • Once satisfied, generate the widget code and copy it.
     

Step 4: Embed the Widget on Your Website

Finally, add the FeedWind widget to your website.

1. Access the HTML Editor:
   • Go to the page or widget area where you want to display the feed. Following figure shows how to add inside widget.
     
2. Paste the Widget Code:
   • Insert the FeedWind code and save your changes.
3. Preview Your Website:
   • Make sure the widget displays correctly and looks good on all devices.

Conclusion

Following these steps, you can easily integrate WooCommerce with FeedWind to create a dynamic product display on your website. Using the https://yourdomain.com/shop/feed/ or https://yourdomain.com/?post_type=product&feed=rss2 URL provides a simple way to generate an RSS feed for your products, which can then be customized with images and embedded into your site using FeedWind. Remember, if you need to add product images to your RSS feed, it’s best to do so with developer assistance to ensure everything works smoothly.

Related posts

Add Dynamic Widget to Your Webflow Website: Step-by-Step Guide

Contents1 Step 1: Create Your FeedWind Widget2 Step 2: Add the FeedWind Widget to Your Webflow Site3 Conclusion If...

FeedWind and HubSpot CMS Hub Integration

Contents1 Step-by-Step Integration Guide1.1 1. Set Up Your FeedWind Widget1.2 2. Embed FeedWind Widget in HubSpot CMS Hub2 Benefits...

How to Create a Vimeo Video Widget for Your Website – Easy Guide

Contents1 Step 1: Get the Vimeo Video Feed2 Step 2: Create a FeedWind Account3 Step 3: Make Your Vimeo...