Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to add extra information to a WooCommerce product attribute?

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)?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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?


  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search