Help - Display product variant information in cart & checkout

Read-Only Link

Hi all,

I am working with a client and we are trying to figure out how to display the selected product variant to the end-user in both the cart modal and checkout page, similar to this Figma mockup:

(I apologize for needing to use imgur links; for some reason it wouldn’t let me upload images directly to this form)

This is the custom code we currently have that was set up by his previous developer, which iterates through every item in the cart and populates a list, and then should remove the “hide” class from the ul that holds the variant data:

$(".w-commerce-commercecheckoutorderitem").each((index, element) => {
            let productdiv = $(element);
            let sku = productdiv.find(".product_sku").text();
            let price = getNumber(productdiv.find(".checkout-order-price").text());
            let heading = productdiv.find(".w-commerce-commerceboldtextblock").text(); 
            let product_brand = productdiv.find(".product_brand").text();
            let product_type = productdiv.find(".product_type").text(); 
                item_name: heading,
                item_id: sku,
                price: price,
                item_category: product_type,
                item_brand: "Zeitlin’s Delicatessen",
                item_variant: "",

This specific snippet of code is only on the checkout page and should run upon page load; The initial array population seems to work, however it is the last line that seems to have no effect. I have also tried iterating through all the items a second time, specifically to find this ul but that also did not work.

Lastly, whenever I tried to print out the ul from every item in the cart, it would only ever return what I assume is the first item, without the others. I used this code after the above code block to do this:

let allItemVariantLists = $(".w-commerce-commercecheckoutorderitemoptionlist");

With this being the output:

The expected output should have been 4 instances of the ul, and to top it off, whenever I clicked the node in the circled area (>0: ul.w-commerce…), the messages indicated by the red arrows popped up, which I assume means the node no longer exists.

Does anyone have any idea what could be causing this and how we can solve it?