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

Question

On a single product page, I would like to add more information icon (i or?) on a specific pa_attribute. So if you click on a? icon you will see a pop up for more information about that specific attribute. (example: https://laadkompas.nl/offerte-aanvraag-1/?car-type=Universeel%2C+verschillende+elektrische+auto%27s&installatie=Ja&compire=Thuislocatie )

I did some research but I could not compile the code, because I could not get a specific php pa_attribute.

Iv found this code: but its not related on an pa=attribute and its a Tooltip.

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>

Can somebody compile this code to get a specific pa attribute with a extra information tooltip or a popup on a single product page (Woocommerce)?

Answer 1

I did some research and found the right code. Its related on a specific pa_attribute but now I need it make the icon (?) clickable and get more information about that specific product 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;
}

Can somebody make a clickable tooltip on that specific attribute to get more information?

Answer 2

I was in same situation and your question and answer helped me alot. I share my final work here maybe helful for someoneelse later:

I prefered to use fontawsome icons in my situation rather than loading an image and also based on my template opportunities I used to execute my template shortcode (my theme is flatsome with ux-builder) to achieve what I wanted (and same thing you asked for):

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;
}