如何在 WooCommerce 中为自定义产品数据选项卡定义图标

Question

我使用以下方法在 WooCommere 中创建了一个自定义产品数据选项卡：

function my_custom_panel(){ ?>
  <div class='panel woocommerce_options_panel'>
    <?php
    woocommerce_wp_text_input(array(
      'id'          => '_my_custom_data',
      'label'       => __('Product Support', 'woocommerce'),
    ));

    ?>
  </div>
<?php }

add_action('woocommerce_product_data_panels', 'my_custom_panel');

现在我正在尝试在管理屏幕上更改它的 icon/dashicon：

我尝试更改模板 html-product-data-panel.php 但我在模板中找不到与 dashicons 相关的代码:

<ul class="product_data_tabs wc-tabs">
  <?php foreach (self::get_product_data_tabs() as $key => $tab) : ?>
    <li class="<?php echo esc_attr($key); ?>_options <?php echo esc_attr($key); ?>_tab <?php echo esc_attr(isset($tab['class']) ? implode(' ', (array) $tab['class']) : ''); ?>">
      <a href="#<?php echo esc_attr($tab['target']); ?>"><span><?php echo esc_html($tab['label']); ?></span></a>
    </li>
  <?php endforeach; ?>
  <?php do_action('woocommerce_product_write_panel_tabs'); ?>
</ul>

这个有什么特殊的钩子吗？如何向我的自定义选项卡添加像其他选项卡一样的自定义图标？

如有任何帮助，我们将不胜感激。

Answer 1

html-product-data-panel.php 不是模板文件。所以 永远不要编辑插件文件！ 当 WooCommerce 更新时，它会用版本中包含的任何新更新覆盖安装。如果核心已经被预先切碎和修改，它会消除这些变化。

这意味着安装的大部分将停止工作。修改核心可能会产生各种意想不到的后果，比如阻止更新正常工作，进一步搞砸安装。

更糟糕的是可能引入意外的安全漏洞。弄乱核心文件很容易引入一个漏洞，允许黑客接管网站。

图标是通过CSS分配的：

// Add custom product setting tab
function filter_woocommerce_product_data_tabs( $default_tabs ) {
    $default_tabs['custom_tab'] = array(
        'label'     => __( 'Custom Tab', 'woocommerce' ),
        'target'    => 'my_custom_tab_data',
        'priority'  => 80,
        'class'     => array()
    );

    return $default_tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'filter_woocommerce_product_data_tabs', 10, 1 ); 

// Contents custom product setting tab
function action_woocommerce_product_data_panels() {
    // Note the 'id' attribute needs to match the 'target' parameter set above
    echo '<div id="my_custom_tab_data" class="panel woocommerce_options_panel">';

    // Add field
    woocommerce_wp_text_input(array(
        'id'        => '_my_custom_data',
        'label'     => __( 'Product Support', 'woocommerce' ),
    ));

    echo '</div>';
}
add_action( 'woocommerce_product_data_panels', 'action_woocommerce_product_data_panels', 10, 0 );

// Add CSS - icon
function action_admin_head() {
    echo '<style>
        #woocommerce-product-data ul.wc-tabs li.custom_tab_options a::before {
            content: "\f101";
        } 
    </style>';
}
add_action( 'admin_head', 'action_admin_head' );

注意： 通过调整优先级编号，您可以在其他现有选项卡之前或之后显示新选项卡。

其他图标见：Developer Resources: Dashicons

如何在 WooCommerce 中为自定义产品数据选项卡定义图标

How to define an icon for a custom product data tab in WooCommerce

wordpress

product

backend

woocommerce

dashicons