如果在结帐时隐藏所有字段 WooCommerce

Question

So I need to hide basically everything on the checkout page, but of course post everything to the backend. I dont want to unset as this removes the field and on the My Acount Billing address we've added alot of custom fields so the address is intact there. But on the checkout process I dont want to show the fields again (theyve already been set to readonly when on checkout), is it possible using jQuery that only if on checkout to hide it from the user but still everything on the backend works as intended?

The CSS Display hidden code works for majority but for three it just wont for some reason:

1 -  Street address 
House number and street name
The label and the field

Town / City 
Just the labels

Postcode / ZIP 
Just the labels 
Codeadd_action( 'wp_footer', 'custom_hide_country_field' ); 
 
function custom_hide_country_field() {
   
   if ( is_checkout()) {
      echo "<script type='text/javascript'>
            jQuery('[id=\"billing_country_field\"]').css('display','none');
            
            jQuery('[id=\"billing_title\"]').css('display','none');
            jQuery('[id=\"billing_title_field\"]').css('display','none');
            
            jQuery('[id=\"billing_condition_field\"]').css('display','none' );
            
            jQuery('[id=\"billing_address_1_field\"]').css('display','none, !important;');
                    jQuery('[id=\"billing_suburb_field\"]').css('display','none');
            jQuery('[id=\"billing_suburb\"]').css('display','none');        
            
            jQuery('[id=\"billing_city\"]').css('display','none');
        
                        jQuery('[id=\"billing_postcode\"]').css('display','none');
            
            jQuery('[id=\"billing_complex_address_inside_field\"]').css('display','none');
            jQuery('[id=\"billing_complex_address_inside\"]').css('display','none');
            
            jQuery('[id=\"billing_complex_name_field\"]').css('display','none');
            jQuery('[id=\"billing_complex_name\"]').css('display','none');
            
            jQuery('[id=\"billing_complex_other_field\"]').css('display','none');
            jQuery('[id=\"billing_complex_other\"]').css('display','none');
                        
     </script>";
   }
} 
If I add it in console it works but from the script only those 3 just won’t work for some reason

Answer 1

Please try something like this:

//hide billing country field in checkout page

add_action( 'wp_footer', 'custom_hide_country_field' ); 
 
function custom_hide_country_field() {
   
   if ( is_checkout()) {
      echo "<script type='text/javascript'>
            $('[id=\"billing_country_field\"]').css('display','none');
     </script>";
   }
}

Answer 2

CSS targeted it using the following:

#customer_details .woocommerce-billing-fields__field-wrapper .form-row, #customer_details .woocommerce-additional-fields__field-wrapper .form-row {
    display: none !important;
    
}