John Davidson

Message:

This question is an addition to my already existing question:

WooCommerce custom product type option not hiding custom product tab

With the help of 7uc1f3r I've managed to show/hide my custom tab and checkbox in case my checkbox gets checked/unchecked and the product types are correct.

Also, I've changed my specs a bit. So the checkbox should now be visible when:

• It's not an external product


• It's not downloadable


• It's not virtual


• It's not a service (comes from WooCommerce Germanzied = Dienstleistung)

I've tried now multiple approaches to accomplish this without any/just partly success:

1) Use hiding classes from WooCommerce for my checkbox and tab:

For this approach I've changed my wrapper classes of the checkbox:

'wrapper_class' => 'hide_if_external hide_if_downloadable hide_if_virtual hide_if_service'

Also, the tab classes getting changed:

'class' => [ 'hide_if_external', 'hide_if_downloadable', 'hide_if_virtual', 'hide_if_service', 'show_if_batches' ]

Two problems appeared now:

1. When I save the product with downloadable and batches checked, reload the page, uncheck downloadable, uncheck batches, check downloadable and uncheck it without checking batches, the batches tab appears again.


2. hide_if_service is not working since it doesn't implement any hiding logic, and I'm unable to add this because everything else is buggy.

I'm really lost now since it's not working. This is my JS stuff for this approach:

$( '#woocommerce-product-data .type_box input, #woocommerce-product-data select#product-type' ).change( function () {

    showHideBatches();

} ).trigger( 'change' );



function showHideBatches() {

    let showIfBatches = $( '.show_if_batches' );

    if ($( '#woocommerce-product-data input#_batches' ).is( ':checked' )) {

        showIfBatches.show();

    } else {

        showIfBatches.hide();

        $( '.general_options.general_tab > a' ).trigger( 'click' );

    }

}

2) Use hiding classes from WooCommerce for my checkbox only (most liked):

I've come up with this idea since the other one totally failed. The idea behind this is to only give the checkbox the hiding classes:

'wrapper_class' => 'hide_if_external hide_if_downloadable hide_if_virtual hide_if_service'

The tab will only have the batches show class:

'class' => [ 'show_if_batches' ]

Now I've switches to JS and developed this little function to enable/disable my batches checkbox in case it's hidden:

$( '#woocommerce-product-data .type_box input, #woocommerce-product-data select#product-type' ).change( function () {

    showHideBatches();

    uncheckBatches();

} ).trigger( 'change' );



function uncheckBatches() {

    if (!$( '#woocommerce-product-data label[for=_batches]' ).is( ':visible' )) {

        $( '#woocommerce-product-data input#_batches' ).prop( 'checked', false );

    }

}

But when triggering now the downloadable checkbox, the logic seems to work but not how it should. I need to enable/disable this checkbox multiple times to get this working. Also, the services checkbox is not covered here.

I've tried multiple things to detect if my checkbox appears or not like MutationObserver or custom event types - none of them are working.

Any idea how to make this working?

---

My Answer:
'hide_if_external hide_if_downloadable hide_if_virtual hide_if_service'_And for my custom tab:_'class' = 'show_if_simple show_if_variable show_if_grouped show_if_external show_if_downloadable show_if_virtual show_if_service'_This approach did not work at all. The checkbox and tab were always visible regardless of the product type.2) Use jQuery to hide/show the checkbox and tab based on product type:_I've tried to use jQuery to hide/show the checkbox and tab based on the product type selected. Here is the code I've used:jQuery(document).ready(function($) { $('#product-type').change(function() { var productType = $(this).val(); if (productType == 'simple' || productType == 'variable' || productType == 'grouped') { $('.hide_if_external').show(); $('.hide_if_downloadable').show(); $('.hide_if_virtual').show(); $('.hide_if_service').show(); } else { $('.hide_if_external').hide(); $('.hide_if_downloadable').hide(); $('.hide_if_virtual').hide(); $('.hide_if_service').hide(); } });});This approach partially worked. The checkbox was hidden when the product type was external, downloadable, virtual, or service. However, the custom tab was still visible regardless of the product type selected.3) Use a combination of both approaches:_I've also tried to combine both approaches by using the hiding classes from WooCommerce and jQuery to hide/show the checkbox and tab. Unfortunately, this did not work either._I'm not sure what I'm missing or doing wrong. Any help or guidance would be greatly appreciated. Thank you.