从十六进制颜色代码以wordpress顺序显示彩框图像？

问：

我有一个初始化代码，可以在购买时为所有产品添加颜色：

add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_colour_field' );

 function ecommercehints_custom_product_colour_field() {
    global $product;
 
    echo '<div class="ecommercehints_custom_product_colour_field">
       <label for="lua-chon-mau-son">Lựa chọn màu sơn: </label>
       <input type="color" id="lua-chon-mau-son" name="lua-chon-mau-son">
    </div><br>';
 
 }
 
 // Save the field to the cart data
 add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_colour_to_cart_data', 10, 3 );
 
 function ecommercehints_save_custom_colour_to_cart_data( $cart_item_data, $product_id, $variation_id) {
 
    if ( !empty( $_POST['lua-chon-mau-son'] ) ) {
       $cart_item_data['lua-chon-mau-son'] = sanitize_hex_color( $_POST['lua-chon-mau-son']); 
    }
 
    return $cart_item_data;
 
 }
 
 
 // Show custom field data on cart, checkout, and thank you page.
 add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_field_data_under_product_name', 10, 2 );
 
 function ecommercehints_show_custom_field_data_under_product_name( $item_data, $cart_item ) {
 
    if ( !empty( $cart_item['lua-chon-mau-son'] ) ) {
       $item_data[] = array(
          'key'     => 'Lựa chọn màu sơn: ',
          'value'   => $cart_item['lua-chon-mau-son'],
       );
    }
 
    return $item_data;
 
 }
 
 // Save the custom field data as order meta
 add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_field_data_as_order_meta', 10, 4 );
 
 function ecommercehints_add_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) {
 
    if ( !empty( $values['lua-chon-mau-son'] ) ) {
       $item->add_meta_data('Lựa chọn màu sơn: ', $values['lua-chon-mau-son']);
    }
 
 }

我想将十六进制代码显示为相应颜色的框。根据我在图像中用红色圈出的区域：

我用过 Echo，但没有用。