How to remove job packages from the shop page?

Job or Listings packages are just like the regular products from WooCommerce but only targeting the listings.

Firstly, remember that we’re talking about a product. This means it will be displayed on your Shop page and other similar items (such as concert tickets or bookings).

On the other hand, maybe you want to hide those packages for one reason or another. To achieve that, you need to use a CSS snippet to make it happen.

Step 1 — Identify the Job package ID

Access the Job package from the backend and focus on the URL: www.link-to-website.com/wp-admin/post.php?post=215&action=edit

You have guessed it: the 215 is the ID.

Step 2 — Hide the Job package via CSS

Add the JavaScript code below in your Appearance→ Customize→ Theme Options → Custom JavaScript → Footer field:

(function ($) {
    $(document).ready(function ($){
        var products_to_hide = document.querySelectorAll('.post-XXX');
        for (item of products_to_hide) {
            item.parentElement.style.display = 'none';
        } 
    });
})(jQuery);

Just replace the XXX part with the previously found ID number, and you’re off to the races.

Step 3 — Optional – Remove multiple packages

If you have multiple packages you want to remove, create a group of posts separated by a comma.

Your code will look something like this:

(function ($) {
    $(document).ready(function ($){
        var products_to_hide = document.querySelectorAll('.post-XXX, .post-XXX, .post-XXX');
        for (item of products_to_hide) {
            item.parentElement.style.display = 'none';
        } 
    });
})(jQuery);

Tips

If nothing seems to be changing, please make sure that you’re using the inverted comma (and not apostrophe) in your code.

Additional Reading:

• Creating the Plans & Pricing Page