1

I would like to use jQuery to conditionally hide some taxonomies from the quick edit box, based upon the checkbox status of another taxonomy.

I have a WooCommerce import store. The products fall into two basic groupings based on the Product Category Taxonomy:

  1. Product Category
    • Fashion
    • Food

But then each product has a range of different taxonomies, depending on the product category:

  1. Country of Origin - Fashion & Food
  2. Fashion Brand - Fashion
  3. Food Brand - Food
  4. Fashion Category - Fashion
  5. Food Category - Food
  6. Fashion Season - Fashion
  7. Gender - Fashion

Given that this is quite a lot of taxonomies, I decided to hide the taxonomies and only show them based upon whether Food or Fashion is clicked in the Product Category taxonomy.

This worked great for the product editing admin screen.

I set the css of the Taxonomy meta boxes I wished to hide to display none, and also created an altered css class for them to display block, as follows:

#fashion-categorydiv,
#fashion-branddiv,
#fashion-seasondiv,
#genderdiv,
#food-drink-categorydiv,
#food-drink-brandsdiv,
#country-of-origindiv {
    display: none;
}

#fashion-categorydiv.show,
#fashion-branddiv.show,
#fashion-seasondiv.show,
#genderdiv.show,
#food-drink-categorydiv.show,
#food-drink-brandsdiv.show,
#country-of-origindiv.show {
    display: block;
}

I loaded in the following javascript to add the .show class if the product category checkbox is already ticked, or is ticked while the edit screen is open:

(function(){

  var fashionCheckBox = jQuery('#product_catchecklist li label input#in-product_cat-46:checkbox');
  var fashionCategory = jQuery('#fashion-categorydiv');
  var fashionBrand = jQuery('#fashion-branddiv');
  var fashionSeason = jQuery('#fashion-seasondiv');
  var fashionGender = jQuery('#genderdiv');

  var foodDrinkCheckBox = jQuery('#product_catchecklist li label input#in-product_cat-45:checkbox');
  var foodDrinkCategory = jQuery('#food-drink-categorydiv');
  var foodDrinkBrands = jQuery('#food-drink-brandsdiv');
  var foodDrinkCountry = jQuery('#country-of-origindiv');

  if (fashionCheckBox.is(':checked')) {
    fashionCategory.addClass('show');
    fashionBrand.addClass('show');
    fashionSeason.addClass('show');
    fashionGender.addClass('show');
  }

  fashionCheckBox.change(function(){
    if (this.checked) {
      fashionCategory.addClass('show');
      fashionBrand.addClass('show');
      fashionSeason.addClass('show');
      fashionGender.addClass('show');

    } else {
      fashionCategory.removeClass('show');
      fashionBrand.removeClass('show');
      fashionSeason.removeClass('show');
      fashionGender.removeClass('show');

    }
  });

  if (foodDrinkCheckBox.is(':checked')) {
    foodDrinkCategory.addClass('show');
    foodDrinkBrands.addClass('show');
    foodDrinkCountry.addClass('show');
  }

  foodDrinkCheckBox.change(function(){
    if (this.checked) {
      foodDrinkCategory.addClass('show');
      foodDrinkBrands.addClass('show');
      foodDrinkCountry.addClass('show');
    } else {
      foodDrinkCategory.removeClass('show');
      foodDrinkBrands.removeClass('show');
      foodDrinkCountry.removeClass('show');
    }
  });


})();

This works great. It is purely cosmetic and just to declutter the edit product screen.

I decided to have a go at doing the same with the quick edit if possible, but I can't get it to work.

When the quick edit is open, and I load the code into the console, it all works fine, but as soon as I either refresh or go to another post to quickedit it stops working.

I understand the quick edit boxes are populated dynamically when the quick edit button is clicked, and that is the crux of the problem.

I have read innumerable tutorials now on adding custom fields and meta data to the quick edit box, but nothing on getting something like this to work.

I really hope someone can help. I know I can turn the taxonomies off from the quick edit, which is my only other option, at the moment, there are just too many for comfortable usability.

Thanks for any assistance.

0

So I worked out how to do this, with a little help from Tonya Mork @ KnowTheCode and a tutorial on adapting the quick edit by Rachel Carden.

I need to refactor the code down, there's still a lot of repetition but I'm pretty much a Javascript/jQuery novice, so please bear with me.

Anyway the solution is as follows:

My custom admin css, saved in my child theme as product-admin-quick-edit.css:

ul.fashion-category-checklist,
ul.fashion-brand-checklist,
ul.fashion-season-checklist,
ul.gender-checklist,
ul.food-drink-category-checklist,
ul.food-drink-brands-checklist,
ul.country-of-origin-checklist {
    display: none;
}

body.wp-admin span.inline-edit-categories-label {
    display: none;
}

Then I have my jQuery, saved in my child theme /js folder as product-admin-quick-edit-jquery.js:

(function($) {

  // we create a copy of the WP inline edit post function
  var $wp_inline_edit = inlineEditPost.edit;
  // and then we overwrite the function with our own code
  inlineEditPost.edit = function( id ) {

    // "call" the original WP edit function
    // we don't want to leave WordPress hanging
    $wp_inline_edit.apply( this, arguments );

    // now we take care of our business

    // get the post ID
    var $post_id = 0;
    if ( typeof( id ) == 'object' )
      $post_id = parseInt( this.getId( id ) );

    if ( $post_id > 0 ) {

      var productCategoryQuickEdit = jQuery('ul.product_cat-checklist');

      var fashionQuickEditCheckBox = jQuery('ul.product_cat-checklist li label input#in-product_cat-46:checkbox');
      var fashionCategoryQuickEdit = jQuery('ul.fashion-category-checklist');
      var fashionBrandQuickEdit = jQuery('ul.fashion-brand-checklist');
      var fashionSeasonQuickEdit = jQuery('ul.fashion-season-checklist');
      var fashionGenderQuickEdit = jQuery('ul.gender-checklist');

      var foodDrinkQuickEditCheckBox = jQuery('ul.product_cat-checklist li label input#in-product_cat-45:checkbox');
      var foodDrinkCategoryQuickEdit = jQuery('ul.food-drink-category-checklist');
      var foodDrinkBrandsQuickEdit = jQuery('ul.food-drink-brands-checklist');
      var foodDrinkCountryQuickEdit = jQuery('ul.country-of-origin-checklist');

      productCategoryQuickEdit.prev().prev().css("display", "block");

      if (fashionQuickEditCheckBox.is(':checked')) {
        fashionCategoryQuickEdit.css("display", "block");
        fashionBrandQuickEdit.css("display", "block");
        fashionSeasonQuickEdit.css("display", "block");
        fashionGenderQuickEdit.css("display", "block");
        fashionCategoryQuickEdit.prev().prev().css("display", "block");
        fashionBrandQuickEdit.prev().prev().css("display", "block");
        fashionSeasonQuickEdit.prev().prev().css("display", "block");
        fashionGenderQuickEdit.prev().prev().css("display", "block");
      }

      fashionQuickEditCheckBox.change(function(){
        if (this.checked) {
          fashionCategoryQuickEdit.css("display", "block");
          fashionBrandQuickEdit.css("display", "block");
          fashionSeasonQuickEdit.css("display", "block");
          fashionGenderQuickEdit.css("display", "block");
          fashionCategoryQuickEdit.prev().prev().css("display", "block");
          fashionBrandQuickEdit.prev().prev().css("display", "block");
          fashionSeasonQuickEdit.prev().prev().css("display", "block");
          fashionGenderQuickEdit.prev().prev().css("display", "block");
        } else {
          fashionCategoryQuickEdit.css("display", "none");
          fashionBrandQuickEdit.css("display", "none");
          fashionSeasonQuickEdit.css("display", "none");
          fashionGenderQuickEdit.css("display", "none");
          fashionCategoryQuickEdit.prev().prev().css("display", "none");
          fashionBrandQuickEdit.prev().prev().css("display", "none");
          fashionSeasonQuickEdit.prev().prev().css("display", "none");
          fashionGenderQuickEdit.prev().prev().css("display", "none");
        }
      });

      if (foodDrinkQuickEditCheckBox.is(':checked')) {
        foodDrinkCategoryQuickEdit.css("display", "block");
        foodDrinkBrandsQuickEdit.css("display", "block");
        foodDrinkCountryQuickEdit.css("display", "block");
        foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
        foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
        foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
      }

      foodDrinkQuickEditCheckBox.change(function(){
        if (this.checked) {
          foodDrinkCategoryQuickEdit.css("display", "block");
          foodDrinkBrandsQuickEdit.css("display", "block");
          foodDrinkCountryQuickEdit.css("display", "block");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "block");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "block");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "block");
        } else {
          foodDrinkCategoryQuickEdit.css("display", "none");
          foodDrinkBrandsQuickEdit.css("display", "none");
          foodDrinkCountryQuickEdit.css("display", "none");
          foodDrinkCategoryQuickEdit.prev().prev().css("display", "none");
          foodDrinkBrandsQuickEdit.prev().prev().css("display", "none");
          foodDrinkCountryQuickEdit.prev().prev().css("display", "none");
        }
      });

    }

  };

})(jQuery);

Then I enqueue these files in my functions.php:

add_action( 'admin_enqueue_scripts', 'load_my_custom_wp_admin_style' );
function load_my_custom_wp_admin_style() {
    wp_register_style( 'product_admin_quick_edit_css', get_stylesheet_directory_uri() . '/product-admin-quick-edit.css', false, '1.0.0' );
    wp_enqueue_style( 'product_admin_quick_edit_css' );
}

add_action( 'admin_print_scripts-edit.php', 'load_custom_quick_edit_scripts', 9999, 2 );
function load_custom_quick_edit_scripts(){
    wp_enqueue_script( 'product-admin-quick-edit-jquery', get_stylesheet_directory_uri() . "/js/product-admin-quick-edit-jquery.js", array( 'jquery', 'inline-edit-post' ), CHILD_THEME_VERSION, true );
}

Making sure to enqueue the scripts late at 9999, and making them dependent on inline-edit-post javascript from WP Core.

I'll refactor the jQuery into some sort of loop for adding and removing the css classes, it should reduce it down quite a bit.

Hope it helps someone else, I couldn't find any other material on dynamically displaying taxonomies in quick edit dependent on other taxonomies settings, so guess there isn't much need for it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.