UI-improvement: Conditional icons for license description

[HebstreitParticipant]

One of the biggest advantages of Symbiostock is the ability to sell individual content. In my opinion, the Symbiostock-Express UI could be further improved: I am looking for a way to display additional information about the licenses as Woocommerce – hook. I think about icons with tooltips that are displayed according to the license selection. To show what I mean, I have made a sketch that visualizes the application:

Unfortunately, I’m not very familiar with programming – I know it would work with JavaScript via a matching Woocommerce hook. I do not know how I can address the radio button properties in a complex fieldset. Can someone help with this, and possibly correct the code?

<?php
add_action( ‘woocommerce_single_variation’, ‘need_handsome_conditional_icons_display’, 10 );

function need_handsome_conditional_icons_display() {
echo ‘

<p tooltip=”Lorem ipsum”>Lorem 1

‘;
echo ‘

<p tooltip=”Lorem ipsum”>Lorem 2

‘;
?>
<style> .lorem1{ display: none; }
.lorem2{ display: none; } </style>
<script>jQuery(document).ready(function($){
//
$(document).on(‘change’, ‘#pa_license’, function() {
//this is not working in Symbiostock Express: how to pick correct value or whatever… in the ‘pa_license’ fieldset??
if ( $(“input[name=’attribute_pa_license’]:id”).val() === “attribute_pa_licenselicense_vectorsmalljpeg” ) {
$(‘.lorem1’).show();
$(‘.lorem2’).hide();
} else {
$(‘.lorem1’).hide();
$(‘.lorem2’).hide();
}
})
})</script>
<?php
}

Hebstreits Sketches

[Author]

Posts