WooCommerce ACF Field for Products documents and Font Awesome Icons

custom-documents.php

<?php 
global $post, $product, $woocommerce;
if(get_field('documents', $post->ID)) {	
	echo '<table class="shop_table shop_table_responsive shop_documents"><thead><th>Filnamn</th><th>Filtyp</th><th>Storlek</th></thead>';
	while(has_sub_field('documents'))
	{
		$attachment_id = get_sub_field('document_file');
		$url = wp_get_attachment_url( $attachment_id );
		$title = get_the_title( $attachment_id );
		
		// part where to get the filesize
		$filesize = filesize( get_attached_file( $attachment_id ) );
		$filesize = size_format($filesize, 2);
		$path_info = pathinfo( get_attached_file( $attachment_id ) );
		
		echo '<tr><td><a href="'. $url .'" target="_blank">'. $title .'</a></td><td>' . $path_info['extension'] . '</td><td>'. $filesize .'</td></tr>';
	}
 
	echo '</table>';
} 
?>

functions.php

function load_custom_css() {  
	wp_enqueue_style('fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}
add_action( 'wp_enqueue_scripts', 'load_custom_css' );

product.scss

//Additional Icons support from Font Awesome

*:before, *:after {
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
}

.shop_documents {
	a[href$=".pdf"]:before {
		font-family: FontAwesome;
		padding-left: 2px;
		padding-right: 8px;
		content: "\f1c1";
		color: #e94343;
	}
	a[href$=".jpg"]:before,
	a[href$=".jpeg"]:before,
	a[href$=".png"]:before {
		font-family: FontAwesome;
		padding-left: 2px;
		padding-right: 8px;
		content: "\f1c5";
		color: $body-color;
	}
}