在WooCommerce中，要添加自定义字段和前端选项卡，您可以按照以下步骤进行操作：

1. 添加自定义字段：
   首先，在您的WordPress主题的functions.php文件中添加以下代码来创建一个自定义字段：

   add_action('woocommerce_product_options_general_product_data', 'custom_product_field');
   function custom_product_field(){
      woocommerce_wp_text_input(
          array(
              'id' => 'custom_field',
              'class' => 'short',
              'label' => __('Custom Field', 'woocommerce'),
          )
      );
   }
   
   add_action('woocommerce_process_product_meta', 'save_custom_product_field');
   function save_custom_product_field($post_id){
      $custom_field = $_POST['custom_field'];
      if (!empty($custom_field)){
          update_post_meta($post_id, 'custom_field', esc_attr($custom_field));
      }
   }

   这会在产品编辑页面的常规选项中添加一个名为“Custom Field”的文本输入框，您可以在其中输入自定义信息。

2. 创建前端选项卡：
   在您的主题文件中，您可以创建一个自定义模板来显示产品详情页的前端选项卡。创建一个名为woocommercetabs.php的文件并将其保存在您的主题文件夹中。

   <?php
   global $product;
   if ($product>has_attributes()) {
      $attributes = $product>get_attributes();
      foreach ($attributes as $attribute) {
          echo '
   ';
          echo '
   ' . $attribute['name'] . '
   ';
          echo '
   ' . $attribute['value'] . '
   ';
          echo '
   ';
      }
   }
   ?>

3. 在产品页面显示选项卡：
   在您的主题的singleproduct.php文件中，添加以下代码来显示选项卡：

   <?php
   // ...
   // 在商品标题下方添加以下代码
   wc_get_template('singleproduct/tabs/woocommercetabs.php');
   // ...
   ?>

   这将在产品详情页显示自定义选项卡，并将产品的自定义字段内容显示在选项卡中。

4. 自定义样式：
   您可以根据需要自定义CSS样式来美化您的选项卡。

请确保在对WordPress主题进行任何更改之前备份您的文件，并在开发环境中进行测试。此外，根据您的主题和需求，可能需要根据情况进行适当的修改。