Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Hide "Attributes" tab for a "Simple Product" type option – Woocommerce

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?
Check screenshot: https://snipboard.io/vhqMyA.jpg

Tags:

2

Answers


  1. 0

    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.

    enter image description here

    Login or Signup to reply.
  2. 0

    You can hide the "Attributes" tab via a jQuery script.

    The showHideAttributeTab() script it will be activated when the page is loaded and when the "Personalize" checkbox is clicked.

    It is also important to disable the <input> and <select> fields of the
    add attributes form to ensure that they are not sent when saving the
    product.

    In fact, a user could add one or more attributes to the product, check the "Personalize" checkbox and finally save the product.

    If you simply hide the elements, it is true that they will not be visible to the user, but they will still be captured by the Ajax function for saving attributes.

    To prevent this it is necessary to disable any field of the Attributes tab. Then, after saving, all attributes will be removed if the "Personalize" checkbox is checked.

    ADDITION

    When the "Personalize" checkbox is unchecked, the "General" tab is
    automatically activated.

    Also, if the "Attributes" tab is active and the user selects "Personalize", it automatically activates the "General" tab to avoid white content.

    // adds script in WordPress backend to show or hide attribute tab based on custom field
add_action( 'admin_footer', 'show_hide_attribute_tab' );
function show_hide_attribute_tab() {
    ?>
    <script type="text/javascript">
        function showHideAttributeTab() {
            if ( jQuery('#_personalize').is(':checked') ) {
                jQuery('li.attribute_options.attribute_tab').hide();
                jQuery('#product_attributes').hide();
                // disable all fields of the "Attributes" tab
                jQuery("#product_attributes input, #product_attributes select").each(function() {
                    jQuery(this).prop("disabled", true);
                });
                // if user enables "Attributes" tab, switch to general tab.
                if ( jQuery( '.attribute_options.attribute_tab' ).hasClass( 'active' ) ) {
                    jQuery( '.general_options.general_tab > a' ).trigger( 'click' );
                }
            } else {
                jQuery('li.attribute_options.attribute_tab').show();
                jQuery('#product_attributes').show();
                // enables all fields of the "Attributes" tab
                jQuery("#product_attributes input, #product_attributes select").each(function() {
                    jQuery(this).prop("disabled", false);
                });
                // switch to general tab
                jQuery("li.general_options.general_tab > a").trigger("click");
            }            
        }
        // runs the script when the page loads
        showHideAttributeTab();
        // runs the script when the "Personalize" checkbox is clicked
        jQuery("#_personalize").click(function() {
            showHideAttributeTab();          
        });
    </script>
    <?php
}

    The code has been tested and works. Add it to your active theme’s functions.php.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search