Reputation: 21
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)?
Upvotes: 1
Views: 2279
Reputation: 8756
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;
}
Upvotes: 0
Reputation: 21
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?
Upvotes: 1