2

EDIT: I came across this code:

add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
    $taxonomy = 'attribute_pa_'.$name;

    if( $taxonomy == 'attribute_pa_staat' )
        $label = $label . ' <a href="#guide-mjattr">info<i class="fa fa-question"></i></a> ' );

    return $label;
}

But it doesn't work (yet) how can I make it work? See the page I'm trying this on here: https://dev.pctoppers.nl/product/dell-latitude-e5550-refurbished/

End of edit

I'm trying to create an icon with a specific ID so I can link a popup to it.

I want to do this with a ::after pseudo element (if possible). We have products with different grades that we want to add an extra explanation to.

This is the code I've tried:

[data-value="a-grade"]::after {
content:"\f05a\f05a";
font-family: "Font Awesome 6 Duotone"!important;
padding:0px!important;
margin:0px!important;}

This unfortunately doesn't work and puts the icon behind the text instead of on-top of the small window its in. See screenshot below

enter image description here

The most ideal look would be this:

enter image description here

The blue circle being the icon. Is there any way of achieving this? Keep in mind that it needs its own #ID so I can link a popup.

Thanks in advance!

Pixel
  • 59
  • 10
  • if you are only wanting the pseudo element clickable and not the rest of the element then it's not possible - you would need a separate element (in which case you would negate the need for creating a pseudo element) – Pete Mar 09 '22 at 12:05
  • Although you may be able to do something with js: https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element, or if the rest of the element didn't need to be clickable you could remove the pointer events on the main element and then reset them on the icon (but this mean you wouldn't be able to select the rest of the element with your mouse if you wanted to) – Pete Mar 09 '22 at 12:09
  • @Pete The problem is that this is default WooCommerce variables that I used a plugin for to make them like this. I don't have full control unfortunately.. – Pixel Mar 09 '22 at 12:13
  • Honestly it looks so much cleaner with the icon next to the text. – connexo Mar 09 '22 at 12:33
  • Even if I did that it adjusts the width of the entire element which I don't want. Would it be possible to not let it affect its parents width? – Pixel Mar 09 '22 at 13:52

1 Answers1

1

With CSS property position (absolute and relative) you can make it.

.w {
  width: 400px;
  height: 100px;
  background: lightblue;
  position: relative;
}
.txt {
  padding:10px;
}

/* Top right text */
.top-right {
  font-size:2rem;
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  border-radius:40px;
  height:10px;
  width:10px;
}
<div class="w">
  <div class="top-right">*</div>
  <div class="txt">text</div>
</div>

Update with pseudo element

.w {
  width: 400px;
  height: 100px;
  background: lightblue;
  position: relative;
}
.txt {
  padding:10px;
}


[data-value="a-grade"]::after {
  content:"!";
  font-family: "Font Awesome 6 Duotone"!important;
  font-size:2rem;
  position: absolute;
  top: -15px;
  right: -5px;
}
<div class="w" >
  <div classs="top-right" data-value="a-grade"></div>
  <div class="txt">text</div>
</div>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79