WooCommerce: PlainOverlay Products Filter with JS

If you're working on a WooCommerce store and need to customize the product filtering experience, you might have come across the plainoverlay.jquery.json file. In this blog post, we'll walk through how to implement the PlainOverlay products filter using plain JavaScript.

Prerequisites

Before diving into the code, make sure you have the following:

1. A basic understanding of HTML, CSS, and JavaScript.
2. Access to your WooCommerce store's theme files (preferably a child theme).

Installing the Plugin

The plainoverlay.jquery.json file is not an actual plugin but a configuration file for a specific implementation of WooCommerce product filtering called "PlainOverlay." Since it doesn't include any images or UI, it can be considered a lightweight alternative to other visual-heavy filtering plugins.

However, since the file itself doesn't do anything on its own, you need to include its logic in your theme using custom JavaScript.

Implementing PlainOverlay Products Filter

First, let's create a new file plainoverlay-products-filter.js inside the js folder of your child theme. Copy and paste the following code into this file:

jQuery(document).ready(function ($) {
    // Load PlainOverlay settings from json
    var settings = $.parseJSON($('#plainoverlay-settings').val());

    // Initialize product filtering
    $(window).load(function () {
        $('.woocommerce-product-filter').each(function () {
            $(this).wc_plugins_frontend_product_filter({
                namespace: settings.namespace,
                plugin_id: settings.plugin_id,
                options: settings.options
            });
        });
    });
});

Now, let's add a script tag to include our custom JavaScript file in the functions.php file of your child theme:

function mytheme_custom_scripts() {
    wp_enqueue_script('plainoverlay-products-filter', get_stylesheet_directory_uri() . '/js/plainoverlay-products-filter.js', array('jquery'), '1.0.0');
}
add_action('wp_enqueue_scripts', 'mytheme_custom_scripts');

Conclusion

By following the steps above, you have successfully implemented the PlainOverlay products filter in your WooCommerce store using plain JavaScript. This lightweight solution provides a customizable and efficient filtering experience for your customers without adding unnecessary bloat to your site.

Feel free to modify and expand upon this implementation as needed to fit your specific use case. Happy coding!

Published April, 2024