How can I get product list type references of metafield?

[webdevsynd]

Hi there,
I've added a Product Wear with it Metafield as I want to be able to show a list of wear with it products on our product pages but need help showing the product title and image.

Vogal theme: https://themeforest.net/item/vogal-multipurpose-shopify-theme/47138639 

Product Metafield definition: https://prnt.sc/CtPaN8hjcjLp 
Product Metafields: https://prnt.sc/qT8ld7_HdLju

I've added this into the liquid:

{% assign wear_it_with_key = 'wear_it_with' %}
{% assign wear_it_with = product.metafields.custom[wear_it_with_key] %}

{% if wear_it_with != blank %}
{% assign product_handles = wear_it_with | split: ',' %}
<div class="related-products">
<h2>Wear it with newww</h2>
<div class="product-list">
{% for handle in product_handles %}
{% assign product_id = handle | split: '/' | last | remove: '"' | remove: ']' %}
ID: {{ product_id }}
{% assign related_product_list = all_products[product_id] %}
Test: {{ related_product_list }}
{% if related_product_list %}
<div class="product-item">
<a href="{{ related_product_list.url }}">
<h3>{{ related_product_list.title }}</h3>
<p>{{ related_product_list.price | money }}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}

Which outputs this on my product page: 

https://prnt.sc/6oTBG-fCX_oK 

What do I need to add to the liquid to be able to show the product title and product others details?

Like this one: https://prnt.sc/MklcwOTVmf7E