How to add a link for a popup window when user selects a particular variation

Question

I'm using PopupMaker plugin for wordpress to create the popup up. This works by using a click trigger on a css selector of your choosing.

With this line of code I can output the variations for the particular product when I'm on its single product page.

    add_action( 'woocommerce_before_add_to_cart_quantity', 'dump_attributes' );

function dump_attributes() {
  global $product;
  var_dump($product->get_attribute('size'));
 }

I need to output a click-able link only when the customer selects a certain variation from the drop down.

The problem I have is generating that link only when a user selects the variation 'Drum'.

Answer 1

I was able to give this a little more thought. First, we need to give the variation data that Woo sends via JSON a little extra value. I'm checking for a "black" color attribute:

if( 'black' === strtolower($variation->get_attribute('color')) ){

But you will want to change to suit your size attribute.

Next, I define the link as

$kia_data['custom_link'] = sprintf( '<a href="google.com">%s</a>', __( 'Your Link', 'your-textdomain' ) );

This is just a link to google and so you'll need to change that.

Next, we add an empty <div> placeholder. And finally we load some scripts on variable products and listen for the found_variation event. When we get it, we get the variation from the JSON data and we can check for the custom_link we defined earlier and dump it into the empty holder <div>.

That's probably clear as mud, but here's the full code snippet:

/**
 * Add data to json encoded variation form.
 *
 * @param  array $data - this is the variation's json data
 * @param  object $product
 * @param  object $variation
 * @return array
 */
function kia_available_variation( $data, $product, $variation ){
    if( 'black' === strtolower($variation->get_attribute('color')) ){
        $kia_data['custom_link'] = sprintf( '<a href="google.com">%s</a>', __( 'Your Link', 'your-textdomain' ) );
    } else {
        $kia_data['custom_link'] = false;
    }

    return array_merge( $data, $kia_data );

}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );

/**
 * holder for display link
 */
function kia_custom_varition_link() {
    echo '<div class="woocommerce-variation-link"></div>';
}
add_action( 'woocommerce_single_variation', 'kia_custom_varition_link', 5 );


/**
 * Add scripts to variable products.
 */
function kia_on_found_template_for_variable_add_to_cart() {
    add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts' );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );


function kia_variable_footer_scripts() {
    ?>
    <script type="text/javascript">
        jQuery( document ).ready(function($) {
            $('form.cart')
.on('found_variation', function( event, variation ) {
    if ( variation.custom_link ) {
        $link_html = variation.custom_link;
        $(this).find( '.woocommerce-variation-link' ).html( $link_html ).show();
    } else {
        $(this).find( '.woocommerce-variation-link' ).html('').hide();
    }

 }).on('reset_variation', function( event, variation ) {
    $(this).find( '.woocommerce-variation-link' ).html('').hide();
 });
        });
    </script>
<?php

}

Here is the result:

Answer 2

Figured out one way to solve it using jQuery and getting the ID of the selection drop down (there were two different ID's named after the attribute slug #size & #pa_size).

 add_action( 'woocommerce_before_add_to_cart_quantity', 'add_link_on_selection' );

function add_link_on_selection() {
?>
<script>

jQuery(document).ready(function ($) {
  $('#size, #pa_size').change(function(){
    if($('#add').length) {
        $('#add').remove();
        return;

} else {
  $selection = $(this).val().toLowerCase();
  console.log($selection);
$(this).after(
  '<div>' +
  ($selection == 'drum' ? '<a href="#"><div id="add">Freight Restrictions</div></a>' : '')  +
  '</div>'
);
}
  })
});
</script>
<?php

}