How to Display Products by Custom Attribute in Magento 2?

How to Display Products by Custom Attribute in Magento 2_

In this tutorial, I am going to explain how to display products by custom attribute in Magento 2. Sometimes it becomes a challenge when someone asks for filtered products. But it’s not as difficult as it looks.

You may also be interested in:

  1. Add and Customize Custom Tab on Product Page Magento 2

How to Create Custom Attribute in Magento 2?

Step 1: Create a new Attribute “sample” in Admin

Login to Magento Admin > Store > Attributes > Product

Create Attribute

On the Product Attributes page, you can see by default Magento provides us with some predefined attributes.

I will create a new attribute.

Click on Add New Attribute

Now we need to fill out details in the New Product Attribute and then Save.

Let’s explain the fields:

Default Label: Label text attributes that recognize the attribute.

Catalog Input Type for Store Owner: Determines the kind of data and input control that is used to manage the product from the Admin store. For example, Text Field, Text Area, Yes/No, Date, Dropdown, etc.

Values required: To request that a value be entered in this field before the record can be saved, set Values Required to Yes.

For Advanced Attribute Properties:

Attribute Code: Identifier unique to internal use.

Scope: Limits the use of an attribute to a specific store view or website. Options: Store View / Website / Global.

Default value: Assigns a start value for the attribute ease of data entry.

Use in Filter Options: Determines if the attribute is used as a filter control at the top of columns in the grid. Options: Yes / No.

Mark: The filter control is only shown when Add to Column Options is turned on.

For more details, see the Commerce User Guide.

Step 2: Assign Product Attribute to Attribute Set in Magento?

Login to Admin > Stores > Attributes > Attribute Set

Assign Product Attribute to the Attribute set

Attribute Sets page > Select set from the list > Drag and Drop Unassigned Attributes to Group

Step 1: Select any set

Note: By default, Magento gives us a set of attributes which is Default, but we can also add a new set of attributes.

Before Drag

Once you drag and drop it:

After Drag and Drop

Here we have successfully created a Custom Attribute and assigned it to the Attribute Set. I hope you understand.


How to Create Static block for Sample Products?

Here are a few steps:

  1. Login Admin > Content
  2. Elements > Blocks
  3. Add New Block
  4. Fill in the mandatory field of the New Block page.
  5. In edit section > click on Insert Widget > choose Widget Type from the dropdown (Catalog Product List)
  6. Fill title of widget in Title field
  7. In the conditions field, find your attribute (in my case, it’s Sample), choose it and set it to yes.
  8. Click on Insert Widget > Save block

Call Static Block in CMS Page:

{{block class="Magento\Cms\Block\Block" block_id="your_block_identifier"}}

In my case, the identifier is sample_products

{{block class="Magento\Cms\Block\Block" block_id="sample_products"}}

Call Static Block in Template (.phtml) file:

<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('your_block_identifier')
->toHtml();
?>

Call Static Block in Layout (XML) File:

<referenceContainer name="content">
    <block class="Magento\Cms\Block\Block" name="block_identifier">
        <arguments>
            <argument name="block_id" xsi:type="string">block_identifier</argument>
        </arguments>
    </block>
</referenceContainer>

Hope this article helped you to understand how to create a custom attribute and display products. If you have any queries, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.

If you want a live session, do direct ping me on LinkedIn I will arrange an online session on weekends.

If you like this article, you can buy me a cup of coffee Buy me a Coffee.

About Aryan Srivastava

I’m a Passionate Magento 2 Frontend Developer. I have 2.5+ years of experience in Frontend. I cherish taking up complex problems and turning them into the best layout in the easiest and proper way. I love to work on Magento 2 e-Commerce Solutions.

View all posts by Aryan Srivastava →

Leave a Reply

Your email address will not be published. Required fields are marked *