title: Save and display product selected custom data in WooCommerce
body: <p>I use the code, that on the product editing page shows the checkbox "Roast Level". When the manager clicks on this checkbox, a select box appears on the page of a single product, allowing the customer to select "Roast Level".</p>
  
  <p>When selecting and adding a product to the cart, the selected value appears in the cart itself. This value is also shown on the checkout page, on the "Thank You" page, in the order, on the email notification, and on the order editing page in the admin panel.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>// Display Checkbox Field
  add_action('woocommerce_product_options_general_product_data', 'roast_custom_field_add');
  
  function roast_custom_field_add() {
      global $post;
  
      // Checkbox
      woocommerce_wp_checkbox(
              array(
                      'id' =&gt; '_roast_checkbox',
                      'label' =&gt; __('Roast Level', 'woocommerce'),
                      'description' =&gt; __('Enable roast level!', 'woocommerce')
              )
      );
  }
  
  // Save Checkbox Field
  add_action('woocommerce_process_product_meta', 'roast_custom_field_save');
  
  function roast_custom_field_save($post_id) {
      // Custom Product Checkbox Field
      $roast_checkbox = isset($_POST['_roast_checkbox']) ? 'yes' : 'no';
      update_post_meta($post_id, '_roast_checkbox', esc_attr($roast_checkbox));
  }
  
  // Display Select Box
  add_action('woocommerce_before_add_to_cart_button', 'add_roast_custom_field', 0);
  
  function add_roast_custom_field() {
      global $product;
  
      // If is single product page and have the "roast_checkbox" enabled we display the field
      if (is_product() &amp;&amp; $product-&gt;get_meta('_roast_checkbox') === 'yes') {
  
              echo '&lt;div&gt;';
  
              woocommerce_form_field('roast_custom_options', array(
                      'type' =&gt; 'select',
                      'class' =&gt; array('my-field-class form-row-wide'),
                      'label' =&gt; __('Roast Level'),
                      'required' =&gt; false,
                      'options' =&gt; array(
                              '' =&gt; 'Please select',
                              'Blue' =&gt; 'Blue',
                              'Rare' =&gt; 'Rare',
                              'Medium Rare' =&gt; 'Medium Rare',
                              'Medium' =&gt; 'Medium',
                              'Medium Well' =&gt; 'Medium Well',
                              'Well Done' =&gt; 'Well Done'
                      )
              ), '');
  
              echo '&lt;/div&gt;';
      }
  }
  
  // Add as custom cart item data
  add_filter('woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 10, 3);
  
  function add_custom_cart_item_data($cart_item_data, $product_id, $variation_id) {
      if (isset($_POST['roast_custom_options'])) {
              $cart_item_data['roast_option'] = wc_clean($_POST['roast_custom_options']);
      }
      return $cart_item_data;
  }
  
  // Add custom fields values under cart item name in cart
  add_filter('woocommerce_cart_item_name', 'roast_custom_field', 10, 3);
  
  function roast_custom_field($item_name, $cart_item, $cart_item_key) {
      if (!is_cart())
              return $item_name;
  
      if (isset($cart_item['roast_option'])) {
              $item_name. = '&lt;br /&gt;&lt;div class="my-custom-class"&gt;&lt;strong&gt;'.__("Roast Level", "woocommerce").
              ':&lt;/strong&gt; '.$cart_item['roast_option'].
              '&lt;/div&gt;';
      }
      return $item_name;
  }
  
  // Display roast custom fields values under item name in checkout
  add_filter('woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 3);
  
  function roast_custom_checkout_cart_item_name($item_qty, $cart_item, $cart_item_key) {
      if (isset($cart_item['roast_option'])) {
              $item_qty. = '&lt;br /&gt;&lt;div class="my-custom-class"&gt;&lt;strong&gt;'.__("Roast Level", "woocommerce").
              ':&lt;/strong&gt; '.$cart_item['roast_option'].
              '&lt;/div&gt;';
      }
      return $item_qty;
  }
  
  
  // Save chosen slelect field value to each order item as custom meta data and display it everywhere
  add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4);
  
  function save_order_item_product_fitting_color($item, $cart_item_key, $values, $order) {
      if (isset($values['_roast_option'])) {
              $key = __('Roast Level', 'woocommerce');
              $value = $values['_roast_option'];
              $item-&gt;update_meta_data($key, $value);
      }
  }
  </code></pre>
  
  <p>This code works well in the Storefront theme, but for some reason, it does not work in the theme I bought on Themeforest. Developers can not help, they say that I need to contact the person who wrote this code. And that's why...</p>
  
  <p>I also use code that works in the Storefront and in the purchased theme. Here it is - <a href="https://stackoverflow.com/questions/56259910/show-custom-fields-on-the-order-editing-page-in-woocommerce">Show custom fields on the order editing page in WooCommerce
  </a>, those. It works great in these two themes.</p>
  
  <p>As I understand it, this is due to the syntax "echo". In the form of "Roast Level" this syntax is, therefore the form is shown. When displaying selected data in the cart or on the checkout page, this syntax is not.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is the code that doesn't work without "echo":</p>
  
  <pre><code>// Add custom fields values under cart item name in cart
  add_filter('woocommerce_cart_item_name', 'roast_custom_field', 10, 3);
  
  function roast_custom_field($item_name, $cart_item, $cart_item_key) {
      if (!is_cart())
              return $item_name;
  
      if (isset($cart_item['roast_option'])) {
              $item_name. = '&lt;br /&gt;&lt;div class="my-custom-class"&gt;&lt;strong&gt;'.__("Roast Level", "woocommerce").
          ':&lt;/strong&gt; '.$cart_item['roast_option'].
          '&lt;/div&gt;';
      }
      return $item_name;
  }
  
  // Display roast custom fields values under item name in checkout
  add_filter('woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 3);
  
  function roast_custom_checkout_cart_item_name($item_qty, $cart_item, $cart_item_key) {
      if (isset($cart_item['roast_option'])) {
              $item_qty. = '&lt;br /&gt;&lt;div class="my-custom-class"&gt;&lt;strong&gt;'.__("Roast Level", "woocommerce").
          ':&lt;/strong&gt; '.$cart_item['roast_option'].
          '&lt;/div&gt;';
      }
      return $item_qty;
  }
  
  
  // Save chosen slelect field value to each order item as custom meta data and display it everywhere
  add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4);
  
  function save_order_item_product_fitting_color($item, $cart_item_key, $values, $order) {
      if (isset($values['_roast_option'])) {
              $key = __('Roast Level', 'woocommerce');
              $value = $values['_roast_option'];
              $item-&gt;update_meta_data($key, $value);
      }
  }
  </code></pre>
  
  <p>I ask to change my code so that it has the syntax "echo", so that the selected data is output using "echo". I will be glad for your help!</p>