Checkout Product List Customization

[ykv (Yurii Kovalchuk)]

Hi,

How to place the product image under the product name like in this example?

[anwerashif (FunnelishTechSupport)]

Here’s a simple way to place the product image under the product name using JavaScript. What this code does is find the product image and modify it by cloning it and placing those clones in the right spot.

Here’s how you can use it:

<script>
document.addEventListener("DOMContentLoaded", () => {
    const productImgs = [
        { 
            selector: '.product-list .pl-item:nth-child(1) .pl-image img', 
            newSrc: 'https://img.funnelish.com/19578/723068/1739463046-1724690079473_1721724740269_1701180005196_massager%20%281%29.webp'
        },
        { 
            selector: '.product-list .pl-item:nth-child(3) .pl-image img', 
            newSrc: 'https://img.funnelish.com/19578/723068/1739463046-1724690097360_1722519245790_1.webp' 
        },
        { 
            selector: '.product-list .pl-item:nth-child(4) .pl-image img', 
            newSrc: 'https://img.funnelish.com/19578/723068/1739463046-1724690079473_1721724740269_1701180005196_massager%20%281%29.webp' 
        }
    ];

    // Loop over each product image and apply the changes
    productImgs.forEach(product => {
        const imgElem = document.querySelector(product.selector);
        
        if (imgElem) {
            // Change the image source to a new one
            imgElem.src = product.newSrc;
            
            // Hide the original image
            imgElem.style.display = "none";

            // Clone the image three times (you can adjust this as needed)
            const clone1 = imgElem.cloneNode(true);
            const clone2 = imgElem.cloneNode(true);
            const clone3 = imgElem.cloneNode(true);
            
            // Make the clones visible
            clone1.style.display = "block";
            clone2.style.display = "block";
            clone3.style.display = "block";

            // Insert the clones after the original image
            imgElem.parentNode.insertBefore(clone2, imgElem.nextSibling);
            imgElem.parentNode.insertBefore(clone1, imgElem.nextSibling);

            // If it's the fourth item, insert an additional clone after
            if (product.selector === '.product-list .pl-item:nth-child(4) .pl-image img') {
                imgElem.parentNode.insertBefore(clone3, imgElem.nextSibling);
            }
        }
    });
});
</script>

Explanation:

• We listen for when the page has fully loaded (DOMContentLoaded).
• We define a list of images with their specific selectors and the newSrc (the new image URL).
• For each image, we:
  • Hide the original one.
  • Clone the image three times and place them below the product name.
  • The clones will appear in order, so you can adjust where they go depending on the product.

You can add and customize the code to your site, and it will automatically adjust the product images as the following example. Let me know if you have any questions!