How to add description under product in Cart

[tuanphan]

To add description under product in Cart Page, like this.

#1. First, find Product Item URL

In my example, we will have:

/store-01/p/product-99

/store-01/p/milk-dip-cup-92wf6-rkwyr-t4hlr

/store-01/p/golden-mist-cup-weny8-pz389-68pwb

#2. Next, use this code to Code Injection > Footer

<!-- Cart Page Description -->
<script>
const productDescriptions = {
    '/store-01/p/product-99': 'We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE!',
    '/store-01/p/milk-dip-cup-92wf6-rkwyr-t4hlr': 'Cause maybe if we screw up this planet enough, they won\'t want it anymore',
    '/store-01/p/golden-mist-cup-weny8-pz389-68pwb': 'You really think you can fly that thing? Do you have any idea how long it takes those cups to decompose.'
    // adding product items urls anddescriptions here
};

const addCartDescriptions = () => {
    const cartContainer = document.querySelector('.cart-container');
    if (!cartContainer) return;

    const cartRows = document.querySelectorAll('.cart-row');
    if (cartRows.length === 0) return;

    cartRows.forEach((row) => {
        const productLink = row.querySelector('.cart-row-title');
        if (!productLink) return;

        const productUrl = productLink.getAttribute('href');
        if (!productUrl) return;

        const existingDescription = row.querySelector('.cart-product-description');
        if (existingDescription) return;

        const description = productDescriptions[productUrl];
        if (!description) return;

        const cartRowDesc = row.querySelector('.cart-row-desc');
        if (!cartRowDesc) return;

        const descriptionDiv = document.createElement('div');
        descriptionDiv.className = 'cart-product-description';
        descriptionDiv.innerHTML = `<p>${description}</p>`;

        const variants = row.querySelector('.cart-row-variants');
        if (variants) {
            variants.insertAdjacentElement('afterend', descriptionDiv);
        } else {
            cartRowDesc.appendChild(descriptionDiv);
        }
    });
};

window.addEventListener('DOMContentLoaded', () => {
    setTimeout(addCartDescriptions, 1000);
    setTimeout(addCartDescriptions, 3000);
    
    const observer = new MutationObserver(() => {
        setTimeout(addCartDescriptions, 500);
    });
    
    const bodyElement = document.body;
    if (bodyElement) {
        observer.observe(bodyElement, {
            childList: true,
            subtree: true
        });
    }
});
</script>

#3. To adjust description size/color, you can use this code to Custom CSS

div.cart-product-description p {
    font-size: 15px;
    color: gray;
}