This feature is available in the Pro version starting from v1.2.0.5.
This option is useful if you want to unload CSS/JS on specific post pages of any kind including, but not limited to: posts (their default well-known taxonomies are “Categories” and “Tags”), pages, custom post types such as WooCommerce’s “product” (it has “Product categories” and “Product tags”), Easy Digital Downloads’ “download” (it has “Download categories”), etc. To understand more about custom post types and how to create them (in case you don’t already have them added to your WordPress website), you can click here to read more about this topic.
Case Scenario #1:
You have a website with WooCommerce installed. Some products have a photo, some have multiple photos (a gallery). When you click on the image area, a pop-up will show up (a lightbox) showing you the images with the option to go back and forward and maximize the image. For the lightbox, you’re using a jQuery plugin that loads CSS and JavaScript files. Ideally, the products with one photo that do not require the lightbox should never load the jQuery plugin. You can set a tag such as “multiple photos” to the “Product tags”. When the tag is set for a product, the jQuery plugin will stay loaded, otherwise, the unload rules (explained below) will take effect and the two files will not load on the page, leaving it cleaner and faster to load (combined with other unload rules that might be there).
Case Scenario #2:
You’re a journalist having lots of articles written, each categorized via the “Category” taxonomy. You have a category called “Podcasts” and you know that only articles within this category have specific CSS/JS associated with the media player used for the podcast. You do not need these files loaded anywhere else, except within these articles. In this situation, you can unload those files site-wide (everywhere) and make a load exception only for posts within the “Podcasts” category.
How to reach the area where I would be able to apply this unload rule?
Whether you’re editing the list of CSS/JS, you need to locate a page that belongs to the post type you want to apply the rule for. It could be “Posts”, “Pages” a custom post type such as “Products” from WooCommerce, etc. Let’s assume we want to unload an asset on all WooCommerce product pages.
You can go to “CSS & JS Manager” from the plugin’s menu, then click on “Custom Post Types” (since “product” is not a native WordPress post type and it’s created by the WooCommerce plugin). Then, from the drop-down shown on the page, select “product ⟶ WooCommerce”. Finally, after you’ve chosen the custom post type, use the autocomplete search to find any product and then load the CSS & JS manager. In this instance, it doesn’t matter which product you manage because you are not applying the rule on that product, but on all products that have the specific taxonomy associated with them.
Once the manager is loaded, scroll to the CSS (we’ll use a stylesheet as an example) you want to have unloaded, and click on the following option: ‘Unload CSS on all WooCommerce “Product” pages if these taxonomies (e.g. Category, Tag) are set:‘. Once you do that, a drop-down will load below with all the taxonomies that are created for the “product” post type, like in the print screen below:
Note: If you do not see any option there for unloading taxonomies (e.g. in case you’re dealing with any other custom post type), it means there are no taxonomies created for that post type.
In case the asset is unloaded site-wide or through another bulk rule, how do I apply a load exception?
You will have to go through the same steps as explained above and once you reach the asset that you want to unload site-wide and have it loaded on specific post types based on the taxonomy values, you will have to first select a bulk unloading rule, unless there’s one applied already, (e.g. “Unload site-wide”), then the load exceptions area is shown and you have to click on ‘On all WooCommerce “Product” pages if these taxonomies (e.g. Category, Tag) are set:‘ and make the selections you need, just like in the print screen below:
