自定义插件的 Woocommerce 管理工具提示

Question

我构建了我的 Woocommerce 插件，我需要使用工具提示在我的输入旁边放置一些内容。我从 Woocommerce Docs 中找到了这个函数：wc_help_tip() 但我不明白，也不起作用。

这是我的代码：

<?php 
    $tip = "test";
    echo wc_help_tip($tip, false);
?>

当我用F12调试时，我看到了一个span内容：

<span class="woocommerce-help-tip" data-tip="test"></span>

但是前端没有任何显示。

对此有什么想法吗？或者其他东西来放置 WordPress 的原生工具提示？

编辑：我需要在自定义管理后端页面挂钩中使用它，而不是在前端或 woocommerce 管理后端页面

Answer 1

此功能是为后端开发的……

下面的示例将按编辑页面的顺序输出 工具提示：

// Displayed in Order edit pages below order details on top first column
add_action( 'woocommerce_admin_order_data_after_order_details', 'displaying_tooltip_in_order_edit_pages', 10, 1 );
function displaying_tooltip_in_order_edit_pages( $order ){
    ?>
        <p class="form-field form-field-wide wc-customer-custom">Some text with a tooltip <?php echo wc_help_tip("hello world"); ?></p>
    <?php
}

代码进入活动子主题（或活动主题）的 function.php 文件。

已测试并有效。

So if you add some code to display some custom fields or content in woocommerce admin pages through hooks, you can add those tooltips with wc_help_tip() function

Answer 2

确保您已为此将 TipTip JS 入队，这是可能对您有帮助的代码，复制以下代码并粘贴到所有 javascript 文件入队的位置

<?php
wp_register_script( 'woocommerce_admin', WC()->plugin_url() . '/assets/js/admin/woocommerce_admin.js', array( 'jquery', 'jquery-blockui', 'jquery-ui-sortable', 'jquery-ui-widget', 'jquery-ui-core', 'jquery-tiptip' ), WC_VERSION );
$locale = localeconv();
$decimal = isset( $locale['decimal_point'] ) ? $locale['decimal_point'] : '.';

$params = array(
/* translators: %s: decimal */
'i18n_decimal_error' => sprintf( __( 'Please enter in decimal (%s) format without thousand separators.', 'woocommerce' ), $decimal ),
/* translators: %s: price decimal separator */
'i18n_mon_decimal_error' => sprintf( __( 'Please enter in monetary decimal (%s) format without thousand separators and currency symbols.', 'woocommerce' ), wc_get_price_decimal_separator() ),
'i18n_country_iso_error' => __( 'Please enter in country code with two capital letters.', 'woocommerce' ),
'i18_sale_less_than_regular_error' => __( 'Please enter in a value less than the regular price.', 'woocommerce' ),
'decimal_point' => $decimal,
'mon_decimal_point' => wc_get_price_decimal_separator(),
'strings' => array(
'import_products' => __( 'Import', 'woocommerce' ),
'export_products' => __( 'Export', 'woocommerce' ),
),
'urls' => array(
'import_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_importer' ) ),
'export_products' => esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_exporter' ) ),
),
);

wp_localize_script( 'woocommerce_admin', 'woocommerce_admin', $params );
wp_enqueue_script( 'woocommerce_admin' );

Answer 3

您应该将屏幕 ID 添加到 woocommerce。使用 woocommerce_screen_ids 过滤器

示例：

add_filter('woocommerce_screen_ids', [ $this, 'set_wc_screen_ids' ] );

public function set_wc_screen_ids( $screen ){
      $screen[] = 'your_screen_id';
      return $screen;
}

自定义插件的 Woocommerce 管理工具提示

Woocommerce admin tooltip for a custom plugin

php

wordpress

backend

tooltip

woocommerce