php - 在产品属性下拉菜单 woocommerce 旁边添加工具提示描述

Question

我想在每个产品变体下拉列表中添加一个工具提示，并附上一个简短的描述。这是我所设想的屏幕截图。

我考虑过使用 CSS 并添加伪元素 :after，但我无法使其可点击。此外，我没有看到将内容添加到每个下拉列表的钩子。

标签： phpcsswordpresswoocommerce

Answer 1

我使用了 woocommerce 钩子 (woocommerce_before_variations_form)、引导工具提示和 css 定位将工具提示 btn 移动到我想要它们的位置。

WooCommerce 功能：

add_action( 'woocommerce_before_variations_form', 'krank_custom_action', 5 );

function krank_custom_action() {
  echo '<button class="krank-tooltip ttone" type="button" data- 
  toggle="tooltip" data-placement="top" title="Your text here">Your btn text</button>
  <button class="krank-tooltip tttwo" type="button" data-toggle="tooltip" data-placement="top" title="Your text here ">Your btn 
    text</button>';
}

CSS：

/* Tool tips */
button.krank-tooltip {border: none;color: #0157a3;}
button.krank-tooltip.ttone {position: relative;top: 73px;right: -273px;}
button.krank-tooltip.tttwo {position: relative;top: 114px;right: -161px;}