如何使用 Hooks 将图标添加到结帐标签？

Question

我如何在 WooCommerce 结账页面

Input

标签旁边添加一个图标，当点击该图标时会显示带有文本的

Tooltip

？

如何在 WooCommerce 中使用

inputs

编辑结帐

hooks

？

我想在 WooCommerce 结帐的电话字段输入中的账单明细中添加一个图标，即

billing_phone

，这样当我们触摸它或将鼠标悬停在它上面时，

Tooltip

将显示一个文本。

我找不到修改每个

input

的方法，我已经看到我可以在带有Hook的Billing部分之前添加元素

woocommerce_before_checkout_billing_form

并在带有以下Hook的Billing部分之后添加元素

woocommerce_after_checkout_billing_form

我编辑问题

在@Mtxz 的帮助下，我设法进行了测试，并且由于其功能之一，我设法在结帐时添加了图标。

add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 10, 4 );

function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' ) {
        $content = '<strong>
        <div class="colocandolo">
        <div class="tooltip top">
         <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
          <span class="tiptext">
           Esto es un texto
            </span>
          </div>
        </div>
    </strong>';
$field = preg_replace('/<\/p>/', $content . '</p>', $field);
    }

    return $field;
}

问题是图标显示在

"Billing Details"

表单的顶部，标题下方。 您可以在下图中看到它：

我需要在@Mtxz 功能中更改什么，以便图标显示在“电话”旁边

label

？

我试过这个例子来指导我创建

function

来实现我正在寻找的东西，但它不起作用 我可以从

labels

向结帐表单

Hooks

添加图标吗？

为什么我创建的功能不起作用？ 我已经搜索过，但找不到合适的钩子来添加在输入标签旁边显示工具提示的图标。 如果这不能使用

Hooks

完成，并且没有插件可以做到这一点，也许可以通过编辑 WooCommerce 模板来完成，我想是这样。

需要定制的模板是什么？

您可以在任何 WooCommerce 管理页面中看到我正在寻找的内容，例如 wp-admin => settings => General 。 所有字段都有一个问号图标，当我们触摸该图标时，它会在工具提示中显示信息。

我还添加了截图 https://ibb.co/5Y2k2PL

我用 html 和 css 创建了一个小演示，但我不知道如何在 WooCommerce 中实现它

.colocandolo{
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted rgb(175, 76, 6); */
}
.tooltip .tiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}
.tooltip .tiptext::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}
.tooltip:hover .tiptext {
  visibility: visible;
}

.tooltip.top .tiptext{
  margin-left: -60px;
  bottom: 150%;
  left: 50%;
}

.tooltip.top .tiptext::after{
  margin-left: -5px;
  top: 100%;
  left: 50%;
  border-color: rgb(93, 69, 4) transparent transparent transparent;
}

<div class="colocandolo"> 
    <div class="tooltip top">
     <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
      <span class="tiptext">
  This is the text that we should display
        </span>
      </div>
</div>

Answer 1

尝试使用此代码放置

icon

：

add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 30, 4 );

function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' ) {
        $content = '<span class="tooltip top" style="display:inline-block">
         <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
          <span class="tiptext">
           Esto es un texto
            </span>
          </span>';
        $field = preg_replace('/<\/label>/ism',  "$content</label>", $field);
    }

    return $field;
}

我没有修复你的 CSS 如果它有帮助我也很乐意帮助你处理 CSS。

Answer 2

我修改了（通过将 CSS 类附加到标签并将标签内容替换为 HTML 图标和工具提示）您的功能如下：

 add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 10, 4 );

function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' ) {
        $args['label_class'] .= ' checkout-tooltip'; // add CSS class to label

        $content = '<img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px" class="tooltip-icon"/>
            <span class="tooltip-text">Esto es un texto</span>';

        // add the icon and tooltip to the label
        $field = str_replace( '<label', '<label data-tooltip="' . esc_attr__( 'Phone tooltip', 'your-text' ) . '"', $field );
        $field = str_replace( '<label', '<label class="checkout-tooltip-label"', $field );
        $field = str_replace( '</label>', $content . '</label>', $field );
        $field = str_replace( '<input', '<input aria-describedby="billing_phone_tooltip"', $field );
    }

    return $field;
}

我已经在 woocommerce 商店测试了上面的内容，它按预期工作。 默认情况下使用 CSS 隐藏它并在悬停时显示。

Answer 3

我看到两种处理方法：

1. 使用 CSS 类和 JS

我会为所需的输入添加一个自定义类。 JS 将用于触发工具提示，并从自定义 HTML 属性中检索文本。 此解决方案可能与您的纯 CSS + 自定义 HTML 标记工具提示不兼容。

add_filter( 'woocommerce_checkout_fields', 'customize_checkout_fields' );

function customize_checkout_fields( $fields ) {
    $fields[ 'billing' ][ 'billing_phone' ][ 'class' ][]           = 'custom-class';
    $fields[ 'billing' ][ 'billing_phone' ][ 'custom_attributes' ] = [
        'data-text' => 'custom text'
    ];

    return $fields;
}

2. 编辑 Woocommerce HTML 输出

Woocommerce 计费输入不能使用模板文件覆盖。它们是从

woocommerce_form_field()

方法生成的，该方法在

$checkout->get_checkout_fields( 'billing' )

(

form-billing.php

) 中调用每个输入。

查看

woocommerce_form_field()

代码，我可以看到一个

woocommerce_form_field

钩子，允许我们编辑最终输入的 HTML 输出。

add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 10, 4 );

function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' ) {
        $content = '<strong>Additional content</strong>';
        $field = preg_replace('/<\/p>/', $content . '</p>', $field);
    }

    return $field;
}

此代码将编辑

billing_phone

HTML 输出，并在

</p>

之前添加内容（所以在最后，但在输入“顶级”容器中）。 您可以在此处添加工具提示，并在父容器上使用

position: relative

之类的方式处理定位，并在工具提示上使用绝对定位。

您可以转储“$field”值来检查您输入的 HTML，并调整正则表达式部分。

注意：我首先尝试将整个

$field

HTML 包装在自定义

<div>

中。但它最终破坏了我的表单网格（这可能特定于我在测试环境中的实现）。所以我使用正则表达式在输入容器中注入自定义 HTML 代码。

参见：

• https://woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
• 我应该如何更改 woocommerce_form_field HTML 结构？
• 向 WooCommerce 结帐字段添加自定义 css 类

Answer 4

ok，您可以通过在 functions.php 中添加以下代码来完成此操作

function add_phone_icon_tooltip( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' && is_checkout() ) {
        $icon = '<i class="fas fa-info-circle" data-toggle="tooltip" title="'. esc_attr__( 'Custom tooltip text goes here', 'textdomain' ) . '">X</i>';
        $field = str_replace( '</label>', ' ' . $icon . '</label>', $field );
    }
    return $field;
}
add_filter( 'woocommerce_form_field', 'add_phone_icon_tooltip', 10, 4 );

此代码假设您有 FontAwesome 图标包，并将在您的电话号码旁边显示该图标。如果你悬停它，一个自定义文本会出现像这里.

您应该看到一个图标或“X”。如果您的字体很棒，请删除 x，您将只有图标。

享受。