Create a metabox for the admin editor in single product. I use a plugin instead of trying to add to child theme or functions.
//add a woocommerce metabox to the product editor
add_action( 'woocommerce_product_options_general_product_data', 'plugin_add_audio_meta_box' );
function plugin_add_audio_meta_box()
{ ....
<tr>
<td class="file_url">
<input type="text" class="input_text"
placeholder="<?php esc_attr_e( "http://", 'plugin' ); ?>"
name="_plugin_two"
value="<?php echo $plugin_fileurl; ?>" />
</td>
<td class="file_url_choose" width="1%">
<a href="#" class="button upload_file_button"
data-choose="<?php esc_attr_e( 'Choose file', 'plugin' ); ?>"
data-update="<?php esc_attr_e( 'Insert file URL', 'plugin' ); ?>">
<?php echo str_replace( ' ', ' ', __( 'Choose file', 'plugin' ) ); ?></a>
</td>
</tr>
.... }
function save_fields ...
update_post_meta( $post_id, ....
Then call the file wherever you need it on the front side:
<p><?php
$attr = array(
'src' => strip_tags($plugin_fileurl),
'loop' => 'true',
'autoplay' => '',
'preload' => 'none',
);
echo '<div class="audio-player" itemprop="audio">' . wp_audio_shortcode( $attr ) . ' </div>';
/* echo do_shortcode(''.esc_url($plugin_fileurl).''); */
?></p>