为 "Simple Product" 类型选项隐藏 "Attributes" 选项卡

Question

我在“简单产品”选项卡中添加了第三个复选标记选项，如下所示：

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);

选中此自定义“个性化”复选框后，我需要隐藏“属性”选项卡。即，如果您单击“虚拟”选项复选框，“运输”选项卡将隐藏。同样，我需要“个性化”选项复选框以在选择时隐藏“属性”选项卡。

我试过：

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

但它不起作用。你能帮忙吗？查看截图：https://snipboard.io/vhqMyA.jpg

Answer 1

首先，您必须在复选框更改时更新元值。然后你可以添加 class hide_if_personalize 如果元值是 yes 使用这个 woocommerce_product_data_tabs 过滤器挂钩。检查下面的代码。

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 );

已测试并有效。

Answer 2

您可以通过 jQuery 脚本隐藏“属性”选项卡。

showHideAttributeTab() 脚本将在加载页面和单击“个性化”复选框时激活。

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.

事实上，用户可以为产品添加一个或多个属性，选中“个性化”复选框，最后保存产品。

如果只是简单的隐藏元素，确实用户是看不到的，但是还是会被Ajax函数捕捉到保存属性

为防止这种情况有必要禁用“属性”选项卡的任何字段。然后，保存后，如果选中“个性化”复选框，所有属性将被删除。

加法

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

此外，如果“属性”选项卡处于活动状态并且用户选择“个性化”，它会自动激活“常规”选项卡以避免出现白色内容。

// 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
}

代码已经过测试并且可以工作。将其添加到您的活动主题 functions.php.

为 "Simple Product" 类型选项隐藏 "Attributes" 选项卡

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

wordpress

woocommerce

hook-woocommerce

woocommerce-rest-api

woocommerce-theming