Show or Hide Checkout Fields in WooCommerce with Code Snippets

To show or hide Checkout Fields in WooCommerce can greatly enhance the user experience on your e-commerce site. Sometimes, less is more, especially when it comes to the checkout process. In this tutorial, we’ll explore how to hide checkout fields in WooCommerce using a simple code snippet, making your checkout cleaner and more user-friendly.

Prerequisites

Please make sure you have the following installed and activated:

• WooCommerce
• Code Snippets

Benefits of Hiding WooCommerce Checkout Fields

Hiding unnecessary checkout fields in WooCommerce can streamline the purchasing process, offering numerous benefits for both the store owner and customers:

• Faster Checkout
  Removing irrelevant fields reduces the time customers spend filling out forms, leading to a quicker checkout experience.
• Increased Conversion Rates
  A simplified checkout process can lower cart abandonment rates. Customers are more likely to complete a purchase when they encounter fewer obstacles.
• Enhanced User Experience
  A clean, uncluttered checkout page improves user experience. This can boost customer satisfaction and encourage repeat business.
• Reduced Customer Confusion
  Eliminating unnecessary fields helps to prevent confusion, particularly for digital or service-based products where shipping information might be irrelevant.
• Customization to Suit Business Needs
  By hiding certain fields, you can tailor the checkout process to fit the specific needs of your business and your customers. For example, if you’re selling digital products, you might not need shipping details.
• Data Efficiency
  Collecting only essential information makes data management more straightforward and efficient. It can also aid in compliance with data protection regulations by not storing unnecessary customer data.

Instructions to Show or Hide Checkout Fields in WooCommerce

1. Navigate to Code Snippets > Add New to create a new snippet.
2. Enter a title for your snippet, like “Deactivate Woo Checkout Fields”.
   
3. Paste the code snippet provided below into the code box:

   /**
    * Plugin Name: Checkout Fields Customizer
    * Author: Mark Harris & His AI Friends
    * Author URI: https://www.christchurchwebsolutions.co.uk/
    * Description: This plugin allows customization of WooCommerce checkout fields directly from the WordPress admin area. It introduces a submenu under the WooCommerce menu for managing the visibility of checkout fields. The plugin offers the following functionalities:
    *
    * 1. Admin Menu Integration: Adds a new submenu under 'WooCommerce' for 'Checkout Fields'. This submenu provides an interface to manage the checkout fields.
    *
    * 2. Settings Registration: Registers settings for the 'Checkout Fields' options, allowing administrators to configure which fields to display at checkout.
    *
    * 3. Settings Sanitization: Ensures all input data is sanitized before being saved, maintaining the security and integrity of the data.
    *
    * 4. Dynamic Settings Page: Generates a dynamic settings page in the WordPress admin, listing all available checkout fields with checkboxes to enable or disable them.
    *
    * 5. Checkout Fields Customization: Based on the saved settings, modifies the checkout fields on the front-end, hiding or showing them as configured.
    *
    * 6. Admin-Area Exclusion: Ensures that the checkout fields remain unchanged in the admin area, applying changes only on the front-end.
    *
    * Note: This plugin requires WooCommerce to be installed and activated as it directly interacts with WooCommerce's checkout fields.
    */
   
   // Register the sub-menu under WooCommerce menu
   add_action("admin_menu", "wpturbo_register_submenu_page");
   function wpturbo_register_submenu_page()
   {
       add_submenu_page(
           "woocommerce",
           "Checkout Fields",
           "Checkout Fields",
           "manage_options",
           "wpturbo-checkout-fields",
           "wpturbo_checkout_fields_options_page"
       );
   }
   
   // Register settings
   add_action("admin_init", "wpturbo_register_settings");
   function wpturbo_register_settings()
   {
       register_setting(
           "wpturbo_checkout_fields",
           "wpturbo_checkout_fields_options",
           "wpturbo_checkout_fields_sanitize"
       );
   }
   
   // Sanitize the input before saving
   function wpturbo_checkout_fields_sanitize($input)
   {
       // Ensure all expected options are present in the array by checking against the default fields
       $fields = WC()
           ->checkout()
           ->get_checkout_fields();
       $new_input = [];
       foreach ($fields as $section => $field_group) {
           foreach ($field_group as $key => $field) {
               // If the key exists in our submitted input, use that value, otherwise, this field is not hidden
               $new_input[$key] = isset($input[$key]) ? "1" : "0";
           }
       }
       return $new_input;
   }
   
   // The settings page content
   function wpturbo_checkout_fields_options_page()
   {
       if (!current_user_can("manage_options")) {
           return;
       }
   
       if (isset($_GET["settings-updated"])) {
           add_settings_error(
               "wpturbo_messages",
               "wpturbo_message",
               __("Settings Saved", "wpturbo"),
               "updated"
           );
       }
   
       settings_errors("wpturbo_messages");
       $options = get_option("wpturbo_checkout_fields_options", []);
       ?>
       <div class="wrap">
           <h1><?php esc_html_e("Checkout Fields", "wpturbo"); ?></h1>
           <form action="options.php" method="post">
               <?php
               settings_fields("wpturbo_checkout_fields");
               do_settings_sections("wpturbo_checkout_fields");
               $fields = WC()
                   ->checkout()
                   ->get_checkout_fields();
   
               // Inline CSS for styling the settings page
               echo '<style>
                   .wpturbo-checkout-fields-wrapper {
                       background-color: #f7f7f7;
                       padding: 20px;
                       border-radius: 5px;
                       box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                   }
                   .wpturbo-checkout-fields-wrapper h2 {
                       color: #333;
                       border-bottom: 1px solid #ddd;
                       padding-bottom: 5px;
                   }
                   .wpturbo-checkout-fields-wrapper label {
                       display: block;
                       margin: 10px 0;
                       line-height: 1.6;
                   }
                   .wpturbo-checkout-fields-wrapper input[type="checkbox"] {
                       margin-right: 10px;
                   }
                   .form-table th {
                       width: auto;
                       padding-right: 20px;
                   }
               </style>';
   
               echo '<div class="wpturbo-checkout-fields-wrapper">';
               foreach ($fields as $section => $field_group) {
                   // Skip the account fields section
                   if ($section === "account") {
                       continue;
                   }
                   echo "<h2>" . ucfirst($section) . " Fields</h2>";
                   foreach ($field_group as $key => $field) {
                       // The checkbox is checked if the option is set to "1", meaning the field is disabled.
                       $is_disabled =
                           isset($options[$key]) && $options[$key] === "1";
                       $checked = checked($is_disabled, true, false);
                       echo "<label>";
                       echo '<input type="checkbox" name="wpturbo_checkout_fields_options[' .
                           esc_attr($key) .
                           ']" ' .
                           $checked .
                           ">";
                       echo esc_html($field["label"]);
                       echo "</label>";
                   }
               }
               echo "</div>";
   
               submit_button();?>
           </form>
       </div>
       <?php
   }
   
   // Override checkout fields based on saved options
   add_filter(
       "woocommerce_checkout_fields",
       "wpturbo_custom_override_checkout_fields"
   );
   function wpturbo_custom_override_checkout_fields($fields)
   {
       if (is_admin()) {
           // If we are in the admin area, do not modify the fields
           return $fields;
       }
   
       $options = get_option("wpturbo_checkout_fields_options", []);
   
       foreach ($fields as $section => $field_group) {
           foreach ($field_group as $key => $field) {
               // If the option is set to "1", the field should be unset (hidden) on the front-end.
               if (!empty($options[$key])) {
                   unset($fields[$section][$key]);
               }
           }
       }
       return $fields;
   }

   Source: Code Snippets Cloud

4. Save changes and activate the snippet.
5. Navigate to WooCommerce > Checkout Fields to include or exclude fields as per your requirement. (For instance, removing billing or shipping fields).
   

   Note: Checking them means you exclude the fields from the front-end.

6. Test the checkout page to ensure the desired fields are hidden or shown.
   

Official Documentation

• WooCommerce Documentation
• Code Snippets Documentation

Show or Hide Checkout Fields in WooCommerce – Conclusion

Customizing WooCommerce checkout fields can streamline the shopping process, enhancing customer satisfaction and potentially boosting sales. By using the Code Snippets plugin, even non-technical users can make these changes easily. Remember, a simplified checkout can lead to a better shopping experience for your customers.