How to add Author, Size to Products

To add Author, Size to Products, like this.

#1. First, edit Product Additional Info > Add a Code Block > use syntax like this. You can repeat similar for other products.

<div class="product-custom-fields">
<p><strong>Author:</strong><span>Mary</span></p>
<p><strong>Size:</strong><span>Portrait</span></p>
</div>

#2. Next, use this code to Store Page Header Injection

<script>(function(){function fetchAndMoveCustomFields(){var gridItems=$('.product-list-item');if(gridItems.length>0){processItems(gridItems,'grid')}
function processItems(items,type){var itemCount=items.length;var batchSize=3;var delay=600;function processBatch(startIndex){var endIndex=Math.min(startIndex+batchSize,itemCount);for(var i=startIndex;i<endIndex;i++){(function(index){var currentItem=$(items[index]);var link=currentItem.find('a.product-list-item-link');var targetElement=currentItem.find('section.product-list-item-meta');var href=link.attr('href');if(href&&link.length&&targetElement.length>0&&currentItem.find('.moved-custom-fields').length===0){var cacheParam='?nocache='+new Date().getTime()+Math.random();$.get(href+cacheParam,function(data){var customFields=$(data).find('.product-custom-fields').clone();if(customFields.length){if(currentItem.find('.moved-custom-fields').length===0){customFields.addClass('moved-custom-fields');targetElement.append(customFields);console.log('Custom fields moved successfully')}}}).fail(function(){console.log('Failed to fetch data from: '+href)})}})(i)}
if(endIndex<itemCount){setTimeout(function(){processBatch(endIndex)},delay)}}
processBatch(0)}}
setTimeout(function(){fetchAndMoveCustomFields()},1500);var observer=new MutationObserver(function(mutations){var shouldProcess=!1;mutations.forEach(function(mutation){if(mutation.type==='childList'&&mutation.addedNodes.length>0){for(var i=0;i<mutation.addedNodes.length;i++){var node=mutation.addedNodes[i];if(node.nodeType===1){if($(node).find('.product-list-item').length>0){shouldProcess=!0;break}}}}});if(shouldProcess){setTimeout(function(){fetchAndMoveCustomFields()},1000)}});observer.observe(document.body,{childList:!0,subtree:!0})})();</script>

#3. Next, use this code to Custom CSS

section.product-list-item-meta {
    flex-direction: column !important;
}
section.product-list-item-meta p {
    margin-top: 0px;
    margin-bottom: 0px;
}

#4. If you want to hide it from Product Detail, use this code to Custom CSS

div.product-custom-fields {
    display: none;
}