WooCommerce Real-Time Product Viewer Documentation

Overview

The WooCommerce Real-Time Product Viewer plugin displays the number of users currently viewing a specific product in real-time. It provides live updates using AJAX requests and stores view counts in a JSON file.

Features:

• Displays the number of users currently viewing a product on single product pages and product list (shop) pages.
• Supports custom CSS settings for font color, alignment, and font family.
• Provides shortcode support for dynamically displaying the view count.
• Includes an admin settings page for managing the plugin configuration.

Installation Guide

Step 1: Download the Plugin

1. Download or clone the plugin files into your WooCommerce site under the /wp-content/plugins/ directory.

Step 2: Upload the Plugin

1. Upload the product-viewer directory to the /wp-content/plugins/ directory via FTP or by using the WordPress Admin’s plugin upload feature.

Step 3: Activate the Plugin

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins > Installed Plugins.
3. Find WooCommerce Real-Time Product Viewer in the list and click Activate.

Step 4: Configure the Plugin

1. Go to Settings > Product Viewer Settings to adjust the display settings such as enabling/disabling the view count on single product and shop pages, and customizing the CSS properties.

Usage Instructions

Displaying View Counts on Product Pages

• The plugin automatically shows the number of users currently viewing a product on the product details page if enabled in the settings.
• For product loops (e.g., shop pages), the view count can also be displayed below each product in a compact format.

Shortcode:

To display the real-time view count on a custom page or template, use the following shortcode:

[rt_product_viewer id="PRODUCT_ID"]

If no id attribute is provided, the shortcode will attempt to detect the current product ID.

Custom Columns in WooCommerce Admin:

• The plugin adds a custom column labeled “Viewing” in the WooCommerce product list, displaying how many users are currently viewing each product.

Developer Guide

The plugin is designed with both ease of use and customization in mind. It uses standard WordPress hooks, AJAX requests, and JSON data storage. Below are some important aspects for developers to note:

JavaScript (rt-product-viewer.js)

1. The JavaScript file initializes on page load and attempts to detect the product ID.
2. It sends periodic AJAX requests every 5 seconds to update the view count displayed on the product page.
3. It also sends a beforeunload event when the user leaves the page to update the server that the user is no longer viewing the product.

Key Functions:

• updateProductViewCount: Sends AJAX requests to retrieve the current number of viewers for the product.
• beforeunload: Detects when the user is leaving the page and updates the view count accordingly.

PHP (woocommerce-real-time-viewer.php)

1. The plugin registers custom AJAX actions (rt_update_product_view_count and rt_leave_product_view) to update and manage the product view count.
2. The product view counts are stored in a JSON file (view_counts.json) and updated based on user sessions.

Important Functions:

• rt_update_product_view_count: Handles the AJAX request to update the product view count.
• rt_leave_product_view: Handles the AJAX request when a user leaves the product page, decreasing the view count.
• display_product_view_count: Displays the view count for a specific product.
• rt_product_viewer_shortcode: Provides a shortcode for displaying view counts in custom templates.
• rt_get_currently_viewing_count: Helper function to fetch the current view count from the JSON file.

Admin Settings:

• The plugin provides a settings page under Settings > Product Viewer Settings where administrators can enable/disable the view count display for single product pages or product loops, and customize the CSS.

Settings Options:

• Enable on Single Product Page: Enables/disables the view count on individual product pages.
• Enable on Product List (Shop) Pages: Enables/disables the view count on product archive pages.
• CSS Settings: Customize text alignment, font color, and font family for both single product and product loop views.

CSS Customization:

Developers can easily modify the CSS for displaying the view count using the options available in the settings panel or by overriding styles directly in the theme.

JSON File (view_counts.json)

• The JSON file stores real-time view data with each product’s session information.
• Each product’s view count is tied to a session, ensuring that each user is counted only once during their session.

FAQ

1. How often is the view count updated? The view count is updated every 5 seconds via an AJAX request.

2. Where is the view count data stored? The view counts are stored in a view_counts.json file located in the plugin directory.

3. Can I customize the text or appearance of the view count display? Yes, you can customize the text alignment, font color, and font family from the settings page under Product Viewer Settings.

4. Is the plugin compatible with caching plugins? The plugin may not work as expected with aggressive caching. Ensure that your caching plugin excludes the product view count feature or AJAX calls from being cached.

Changelog

• Version 1.0
  • Initial release with real-time view count functionality for WooCommerce products.
  • AJAX-based updates to the view count.
  • Custom columns in WooCommerce product list.
  • Shortcode support for dynamic view count display.