Understanding the logic behind WooCommerce templating system

Question

I'm trying to dive a little deeper into wordpress and specifically into Woocommerce. At the moment my goal is to create custom filters for product archive. I managed to install via composer the woocommerce library and use the api to retrieve data. Next step is to display these data the exact same way woocommerce does in archive product page, so everything is wrapped with the appropriate classes etc. I found the archive-product.php and tried a few things. I also found the block template archive-product.html but I can't really follow the logic so I can recreate something similar. Anyone has any idea on how to approach this? There is always the possibility to create my own template but I want to follow the exact same structure that WooCommerce uses and I guess what better way to utilize their templates and functions. Thanks

$woocommerce = new Client(
    'http://dev.local',
    '***',
    '***',
    [
        'wp_api' => true,
         'version' => 'wc/v3',
    ]
);
$products =$woocommerce->get('products');
global $product;


do_action( 'woocommerce_before_shop_loop' );

woocommerce_product_loop_start();

foreach ($products as $product_data) {
    $product = wc_get_product($product_data->id);
    do_action( 'woocommerce_shop_loop' );
    wc_get_template_part('content', 'product');
}
woocommerce_product_loop_end();
do_action( 'woocommerce_after_shop_loop' );

It is pretty close, but the ul doesn't have the classes I see in DOM in shop page and there are more differences.