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 in your Shop page, along with 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 just 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

Simply add the JavaScript code below in your Apperance→ 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, just 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:

Updated on July 24, 2017

Was this article helpful?