如何向WooCommerce产品属性添加额外信息?

Question

在单个产品页面上，我想在特定pa_attribute上添加更多信息图标(i 或 ？(。因此，如果您单击？图标，您将看到一个弹出窗口，以获取有关该特定属性的更多信息。(例如：https：//laadkompas.nl/offerte-aanvraag-1/？car-type=Universeel%2C+verschillende+elektrische+auto%27s&installatie=Ja&compire=Thuislocatie(

我做了一些研究，但我无法编译代码，因为我无法获得特定的 php pa_attribute。

Iv 找到了这段代码：但它与 pa=attribute 无关，它是一个工具提示。

add_action( 'woocommerce_before_variations_form', 'krank_custom_action', 2 );
function krank_custom_action() {
echo '  <button class="krank-tooltip ttone" type="button" data-toggle="tooltip" data-placement="top" title="this is a text ">?</button>

有人可以编译此代码以获取带有额外信息工具提示的特定 pa 属性或单个产品页面上的弹出窗口 (Woocommerce( 吗？

Answer 1

我做了一些研究，找到了正确的代码。它与特定pa_attribute相关，但现在我需要它使图标 (？( 可单击并获取有关该特定产品属性的更多信息。

add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'pa_'.$name;
if( $taxonomy == 'pa_montagewijze' )
$label .= '<div class = "customization_image_icon"><img class="alignleft wp-image-25335" src="https://laadkompas.nl/wp-content/themes/laadkompass/images/info.png" alt="" width="10" height="10" /></div>';
return $label;
}

有人可以在该特定属性上制作可单击的工具提示以获取更多信息吗？

Answer 2

我处于同样的情况，您的问题和答案对我有很大帮助。我在这里分享我的最后作品，也许以后对其他人来说很有意义：

我更喜欢在我的情况下使用fontawsome图标而不是加载图像，并且还基于我用来执行template shortcode的模板机会(我的主题与 ux-builder 很扁平(来实现我想要的(和你要求的一样(：

add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'pa_'.$name;
if( $taxonomy == 'pa_mjattr' )
$label = $label . ' <a href="#guide-mjattr">info<i class="fa fa-question"></i></a> ' . do_shortcode( '[lightbox id="guide-mjattr" width="600px" padding="20px"][block id="guide-mjattr"][/lightbox]' );
return $label;
}