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:
- Product Category
- Fashion
- Food
But then each product has a range of different taxonomies, depending on the product category:
- Country of Origin - Fashion & Food
- Fashion Brand - Fashion
- Food Brand - Food
- Fashion Category - Fashion
- Food Category - Food
- Fashion Season - Fashion
- 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.
