Move custom attribute below product title on shop page in WooCommerce

Afternoon Stack Overflow,

I've been trying to move the custom div I've created which displays a custom attribute on the shop grid for products. I want the small text which says '2% Nic Salt, 600 Puffs, Inhale Activated' below the product title.

I'm using this code to display the attribute.

    // Fail Safe
add_action('woocommerce_after_shop_loop_item_title', 'display_shop_loop_product_attributes');
function display_shop_loop_product_attributes() {
    global $product;

    // List the correct Attributes via pa_
    $product_attribute_taxonomies = array( 'pa_grid-attributes', 'pa_grid', 'pa_styling', 'pa_number' );
    $attr_output = array(); // Initializing

    // Loop through
    foreach( $product_attribute_taxonomies as $taxonomy ){
        if( taxonomy_exists($taxonomy) ){
            $label_name = wc_attribute_label( $taxonomy, $product );

            $term_names = $product->get_attribute( $taxonomy );

            if( ! empty($term_names) ){
                $attr_output[] = '<span class="'.$taxonomy.'">'.$term_names.'</span>';
            }
        }
    }

    // Display 
    echo '<div class="product-attributes-grid">'.implode( '<br>', $attr_output ).'</div>';
}

Using Version 7.4.1

Tried to move the string editing functions.php with the visual hook guide to no success.