How to display additional attributes in category page product item

Question

Please check the below images for more understanding

Display here...

Answer 1

You can override file vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

under app/design/frontend/vendor/theme/Magento_Catalog/templates/product/list.phtml

Option 1. Add the below code to show the value of your attribute

<?php if($_product->getAttributeText('attribute_code')){
echo $attr = $_product->getResource()->getAttribute('attribute_code')->getStoreLabel().': ';
echo $_product->getAttributeText('attribute_code');

} ?>

OR

Option 2.

1. Create Helper File and get value of attributes

<?php

namespace Mital\Attributes\Helper;

use Magento\Catalog\Model\Product;
use Magento\Framework\Phrase;
use Magento\Framework\Pricing\PriceCurrencyInterface;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    
    /**
     * @var PriceCurrencyInterface
     */
    protected $priceCurrency;

    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        PriceCurrencyInterface $priceCurrency
       
    ) {        
        parent::__construct($context);        
    }   
       

    /**
     * $excludeAttr is optional array of attribute codes to exclude them from additional data array
     *
     * @param array $excludeAttr
     * @return array
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function getAdditionalData($product , array $excludeAttr = [])
    {
        $data = [];            
        $attributes = $product->getAttributes();
        foreach ($attributes as $attribute) {
            if ($this->isVisibleOnFrontend($attribute, $excludeAttr)) {
                $value = $attribute->getFrontend()->getValue($product);

                if ($value instanceof Phrase) {
                    $value = (string)$value;
                } elseif ($attribute->getFrontendInput() == 'price' && is_string($value)) {
                    $value = $this->priceCurrency->convertAndFormat($value);
                }

                if (is_string($value) && strlen(trim($value))) {
                    $data[$attribute->getAttributeCode()] = [
                        'label' => $attribute->getStoreLabel(),
                        'value' => $value,
                        'code' => $attribute->getAttributeCode(),
                    ];
                }
            }
        }
        return $data;
    }

    /**
     * Determine if we should display the attribute on the front-end
     *
     * @param \Magento\Eav\Model\Entity\Attribute\AbstractAttribute $attribute
     * @param array $excludeAttr
     * @return bool
     * @since 103.0.0
     */
    protected function isVisibleOnFrontend(
        \Magento\Eav\Model\Entity\Attribute\AbstractAttribute $attribute,
        array $excludeAttr
    ) {
        return ($attribute->getIsVisibleOnFront() && !in_array($attribute->getAttributeCode(), $excludeAttr));
    }
   
}

2. Call helper and this code in list.phtml

  <?php $custom_helper = $this->helper('Mital\Attributes\Helper\Data'); ?>
 <?php if ($_additional = $custom_helper->getAdditionalData($_product)) :?>
    <div class="additional-attributes-wrapper table-wrapper">
        <table class="data table additional-attributes" id="product-attribute-specs-table">
            <caption class="table-caption"><?= $block->escapeHtml(__('More Information')) ?></caption>
            <tbody>
            <?php foreach ($_additional as $_data) :?>
                <tr>
                    <th class="col label" scope="row"><?= $block->escapeHtml($_data['label']) ?></th>
                    <td class="col data" data-th="<?= $block->escapeHtmlAttr($_data['label']) ?>"><?= /* @noEscape */ $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
<?php endif;?>

Make sure your attribute Used in Product Listing = yes