Magento 2 : How can I display an attribute on the category page?

Question

I am trying to display the sku attribute for each product on the category page. I tried following this Magento 2: Display Custom attribute value under the product name on category page

I added this code at the top-

$attribute = $_product->getResource()->getAttribute('sku');
$attributeValue = $attribute->getFrontend()->getValue($_product);
$attributeLabel = $attribute->getStoreLabel();

and a little lower down I added-

<h1 style="color: #ff6e17"><?php echo $product->getData('sku'); ?></h1>

Now the entire list.phtml page looks like this-

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\App\Action\Action;

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Product list template
 *
 * @var $block \Magento\Catalog\Block\Product\ListProduct
*/
?>
<?php
$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$attribute = $_product->getResource()->getAttribute('sku');
$attributeValue = $attribute->getFrontend()->getValue($_product);
$attributeLabel = $attribute->getStoreLabel();
?>
<?php if (!$_productCollection->count()): ?>
<div class="message info empty"><div><?= /* @escapeNotVerified */ __('We can\'t find products matching the selection.') ?></div></div>
<?php else: ?>
<?= $block->getToolbarHtml() ?>
<?= $block->getAdditionalHtml() ?>
<?php
if ($block->getMode() == 'grid') {
    $viewMode = 'grid';
    $image = 'category_page_grid';
    $showDescription = false;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
} else {
    $viewMode = 'list';
    $image = 'category_page_list';
    $showDescription = true;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
}
/**
 * Position for actions regarding image size changing in vde if needed
 */
$pos = $block->getPositioned();
?>
<div class="products wrapper <?= /* @escapeNotVerified */ $viewMode ?> products-<?= /* @escapeNotVerified */ $viewMode ?>">
    <?php $iterator = 1; ?>
    <ol class="products list items product-items">
        <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
        <?php foreach ($_productCollection as $_product): ?>
            <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
            <div class="product-item-info" data-container="product-grid">
                <?php
                $productImage = $block->getImage($_product, $image);
                if ($pos != null) {
                    $position = ' style="left:' . $productImage->getWidth() . 'px;'
                        . 'top:' . $productImage->getHeight() . 'px;"';
                }
                ?>
                <?php // Product Image ?>
                <a href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                    <?= $productImage->toHtml() ?>
                </a>
                <div class="product details product-item-details">
                    <?php
                        $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                    ?>
                    <strong class="product name product-item-name">
                        <a class="product-item-link"
                           href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>">
                            <?= /* @escapeNotVerified */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                        </a>
                    </strong>
                    <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                    <?= /* @escapeNotVerified */ $block->getProductPrice($_product) ?>
                    <?= $block->getProductDetailsHtml($_product) ?>
                    <h1 style="color: #ff6e17"><?php echo $product->getData('sku'); ?></h1>
                    <div class="product-item-inner">
                        <div class="product actions product-item-actions"<?= strpos($pos, $viewMode . '-actions') ? $position : '' ?>>
                            <div class="actions-primary"<?= strpos($pos, $viewMode . '-primary') ? $position : '' ?>>
                                <?php if ($_product->isSaleable()): ?>
                                    <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                    <form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post">
                                        <input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
                                        <input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
                                        <?= $block->getBlockHtml('formkey') ?>
                                        <button type="submit"
                                                title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
                                                class="action tocart primary">
                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                        </button>
                                    </form>
                                <?php else: ?>
                                    <?php if ($_product->isAvailable()): ?>
                                        <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                    <?php else: ?>
                                        <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </div>
                            <div data-role="add-to-links" class="actions-secondary"<?= strpos($pos, $viewMode . '-secondary') ? $position : '' ?>>
                                <?php if ($addToBlock = $block->getChildBlock('addto')): ?>
                                    <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php if ($showDescription):?>
                            <div class="product description product-item-description">
                                <?= /* @escapeNotVerified */ $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                <a href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>" title="<?= /* @escapeNotVerified */ $_productNameStripped ?>"
                                   class="action more"><?= /* @escapeNotVerified */ __('Learn More') ?></a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?= ($iterator == count($_productCollection)+1) ? '</li>' : '' ?>
        <?php endforeach; ?>
    </ol>
</div>
<?= $block->getToolbarHtml() ?>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {
                "product_sku": "<?= /* @NoEscape */ $_product->getSku() ?>"
             }
         }
     }
    </script>
 <?php endif; ?>
 <?php endif; ?>

The error I get is -

1 exception(s):
Exception #0 (Exception): Notice: Undefined variable: _product in /home/html/app/design/frontend/Magento_Catalog/templates/product/list.phtml on line 21

Where did I make a mistake?

Edit: I tried changing the code to what Herve and Sami23 suggested.

<?php foreach ($_productCollection as $_product): ?>
            <?php $attribute = $product->getResource()->getAttribute('sku');
            $attributeValue = $attribute->getFrontend()->getValue($_product);
            $attributeLabel = $attribute->getStoreLabel();?>
            <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
            <div class="product-item-info" data-container="product-grid">
                <?php
                $productImage = $block->getImage($_product, $image);
                if ($pos != null) {
                    $position = ' style="left:' . $productImage->getWidth() . 'px;'
                        . 'top:' . $productImage->getHeight() . 'px;"';
                }
                ?>
                <?php // Product Image ?>
                <a href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                    <?= $productImage->toHtml() ?>
                </a>
                <div class="product details product-item-details">
                    <?php
                        $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                    ?>
                    <strong class="product name product-item-name">
                        <a class="product-item-link"
                           href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>">
                            <?= /* @escapeNotVerified */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                        </a>
                    </strong>
                    <h1 style="color: #ff6e17"><?php echo $product->getData('sku'); ?></h1>
                    <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                    <?= /* @escapeNotVerified */ $block->getProductPrice($_product) ?>
                    <?= $block->getProductDetailsHtml($_product) ?>

I am still getting the undefined variable for line 49 which is- getResource()->getAttribute('sku');

Answer 1

changed $product to $_product. The error you have is nothing to do with seeing or not this sku attribute you are after but just a typo you've made.

Now, you seem to need to render attribute in the category listing:

• if you do want to see an attribute, go in the Magento backend and verify the attribute is setup to be Used In Product Listing

• then, you may have to refresh the index/cache and your code will show the attribute you will have verified.

Answer 2

hello @tjjen the $_product variable is undefined that why you get the error try add this code

<?php $attribute = $product->getResource()->getAttribute('sku');
$attributeValue = $attribute->getFrontend()->getValue($_product);
$attributeLabel = $attribute->getStoreLabel();?>

after this line :

<?php foreach ($_productCollection as $_product): ?>

Happy Coding !!!