1

I want to be able to add external links with documentation for my products. With this code I added for simple products and it works as I wish:

// This function gets the value for the the custom fields from the database and adds it to the frontend output function
function wpse_add_custom_link_output() {
    $external_link = get_post_meta(get_the_ID(), '_custom_product_text_field', true);
    if ($external_link !== "")
        {
    $html = '<a href="'.$external_link.'" class="custom-button-class" target="_blank"><img src="https://pdfimage.png" width="100" height="100" alt="pdf_logo.png" title="'.__('External product link','woocommerce').'">Product Datasheet</a>';
    echo $html;
        }
};
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 ); 
// This function creates the field in the backend
function wpse_add_custom_link_field(){
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => __('Paste product link here', 'woocommerce'),
            'label' => __('Custom product link', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    echo '</div>';
}
add_action('woocommerce_product_options_general_product_data', 'wpse_add_custom_link_field');
// this function saves the link/text field
function wpse_save_custom_link_field($post_id){
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
    update_post_meta($post_id, '_custom_product_text_field', 
    esc_attr($woocommerce_custom_product_text_field));
}
add_action('woocommerce_process_product_meta', 'wpse_save_custom_link_field');

I have to add the same for the variations for which I want to put such a link. This code creates a custom field where I can fill in the link:

// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation
 
add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );
 
function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
   woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
   ) );
}
 
// -----------------------------------------
// 2. Save custom field on product variation save
 
add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );
 
function bbloomer_save_custom_field_variations( $variation_id, $i ) {
   $custom_field = $_POST['custom_field'][$i];
   if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}
 
// -----------------------------------------
// 3. Store custom field value into variation data
 
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );
 
function bbloomer_add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
   return $variations;
}

To show it in the frontend I edit: woocommerce / single-product / add-to-cart / variation.php by adding this line: {{{data.variation.custom_field}}}

My problem is that it comes out as plain text - Custom Field: https://mylink.com I'm looking for a way to make it Clickable Link and replace the link itself with an image of a PDF file or a button.