How to remove job packages from the shop page?

Job or List­ings pack­ages are just like the reg­u­lar prod­ucts from WooCom­merce but only tar­get­ing the list­ings.

First­ly, remem­ber that we’re talk­ing about a prod­uct. This means it will be dis­played in your Shop page, along with oth­er sim­i­lar items (such as con­cert tick­ets or book­ings).

On the oth­er hand, maybe you want to hide those pack­ages for one rea­son or anoth­er. To achieve that you just need to use a CSS snip­pet to make it hap­pen.

Step 1  Identify the Job package ID

Access the Job pack­age from the back­end 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

Sim­ply add the JavaScript code below in your Apper­ance→ Cus­tomize→ Theme Options → Cus­tom JavaScript → Foot­er 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 pre­vi­ous­ly found ID num­ber and you’re off to the races.

Step 3 — Optional — Remove multiple packages

If you have mul­ti­ple pack­ages you want to remove, just cre­ate a group of posts sep­a­rat­ed by a com­ma.
Your code will look some­thing 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 noth­ing seems to be chang­ing, please make sure that you’re using the invert­ed com­ma (and not apos­tro­phe) in your code.

Additional Reading:

Updated on July 24, 2017

Was this article helpful?

Related Articles