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

Hide all fields if on checkout WooCommerce

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
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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>";
   }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search