questions

How to hide “Attributes” tab for a “Simple Product” type option

Rate this post

I have added a third checkmark option to the “Simple Product” tab, like this:

add_filter("product_type_options", function ($product_type_options) {

    $product_type_options["personalize"] = [
        "id"            => "_personalize",
        "wrapper_class" => "show_if_simple", 
        "label"         => "Personalize",
        "description"   => "personalize Products",
        "default"       => "no",
    ];

    return $product_type_options;

});

add_action("save_post_product", function ($post_ID, $product, $update) {

    update_post_meta(
          $product->ID
        , "_personalize"
        , isset($_POST["_personalize"]) ? "yes" : "no"
    );

}, 10, 3);

I need to hide the “Attributes” tab when this custom “Personalize” checkbox is selected. ie., if you click on the “Virtual” option checkbox, the “Shipping” tab hides. Likewise, I need the “Personalize” option checkbox to hide the “Attributes” tab upon selection.

I have tried:

add_filter('woocommerce_product_data_tabs', 'misha_product_data_tabs' );
function misha_product_data_tabs( $tabs ){
 
    $tabs['attribute']['class'][] = 'hide_if_personalize';
    return $tabs;
 
}

But it is not working. Can you please help?

 

✔️Solution:

First, you have to update the meta value on the checkbox change. then you can add class hide_if_personalize if meta value is yes using this woocommerce_product_data_tabs filter hook. check below code.

add_filter("product_type_options", function ( $product_type_options ) {
    $product_type_options["personalize"] = [
        "id"            => "_personalize",
        "wrapper_class" => "show_if_simple", 
        "label"         => "Personalize",
        "description"   => "personalize Products",
        "default"       => "no",
    ];
    return $product_type_options;
});

add_filter('woocommerce_product_data_tabs', 'misha_product_data_tabs' );
function misha_product_data_tabs( $tabs ){
    $personalize = get_post_meta( get_the_ID() , "_personalize" , true );
    if( $personalize == 'yes' ){
        $tabs['attribute']['class'] = 'hide_if_personalize';
    }
    return $tabs;
 }

add_action( 'wp_ajax_hide_attribute_if_personalize', 'hide_attribute_if_personalize' );
add_action( 'wp_ajax_nopriv_hide_attribute_if_personalize', 'hide_attribute_if_personalize' );
function hide_attribute_if_personalize(){
    $personalize = $_POST['personalize'];
    $product_id  = $_POST['product_id'];
    update_post_meta( $product_id, '_personalize', $personalize );
}

function add_custom_admin_js_css(){ 
?>
    <style type="text/css">
        li.attribute_options.attribute_tab.hide_if_personalize {
             display: none !important;
        }
    </style>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){

                $( document ).on('change','#_personalize',function(){
                    var personalize = 'no';
                    if( $(this).is(":checked") ){
                        $('li.attribute_options.attribute_tab').addClass('hide_if_personalize');
                        personalize = 'yes';
                    }else{
                        $('li.attribute_options.attribute_tab').removeClass('hide_if_personalize');
                    }

                    $.ajax({
                        url: '<?php echo admin_url('admin-ajax.php'); ?>',
                        type: "post",
                        data: {personalize:personalize,product_id:$('#post_ID').val(),action:'hide_attribute_if_personalize'},
                        success: function( response ) {
                            
                        },error: function (jqXHR, exception) {
                            var msg = '';
                            if (jqXHR.status === 0) {
                                msg = 'Not connect.\n Verify Network.';
                            } else if (jqXHR.status == 404) {
                                msg = 'Requested page not found. [404]';
                            } else if (jqXHR.status == 500) {
                                msg = 'Internal Server Error [500].';
                            } else if (exception === 'parsererror') {
                                msg = 'Requested JSON parse failed.';
                            } else if (exception === 'timeout') {
                                msg = 'Time out error.';
                            } else if (exception === 'abort') {
                                msg = 'Ajax request aborted.';
                            } else {
                                msg = 'Uncaught Error.\n' + jqXHR.responseText;
                            }
                            console.log(msg);
                        },
                    });


                });

            });
        })(jQuery);
    </script>
<?php }
add_action( 'admin_footer', 'add_custom_admin_js_css', 10, 1 );

Tested and works.

Leave a Reply

Your email address will not be published.

Back to top button