Display Manufacturer In Products Listing (Category Pages)?

Magento 2 Frontend Design
1

Dear Craig,

Its been a while since I wrote here. Been busy with other projects and the development of the site was set on pause but now I am on it again - and of course I am relying on your support and kind feedback :innocent:

I got a theme that I really like. But it doesn’t come with the feature to display the BRAND together with the PRODUCT in the product listing. Like this:

PNG
Manufacturer.PNG.jpg414×732 41.2 KB

And then I found this video that is ooold (Magento 1):

So I get the point that it should be changing in the code somewhere in that file list.phtml.

Any idea how to do this? It looks cool when the brand is included so I cannot hesitate to get it working…

:pray:
Maia

2

That video won’t do you any good at all because the infrastructure between Magento 1 and 2 are totally different. Also, bare in mind that Magento Category Pages have a List View and a Grid View. Therefore, view.phtml refers to List View.

Huge Disclaimer

I wouldn’t normally try and teach anyone how to do any Frontend/Backend Development as these topics are currently out of scope for what we do here. But what you’re asking for is pretty simple if you’ve got the basic grasp of how Magento “works”.

I’m not a developer so my knowledge of things more advanced than this task is limited. For what you’re asking there is a right and a wrong way to pull attribute data - I’m not sure I know the “best-practice” way but it will get the job done.

Things you should know (or read about) before starting

  1. What the Magento infrastructure should look like
  2. How to use and create a child theme
  3. A basic grasp of HTML/PHP/CSS (I will never attempt to teach these skills on this website)

The changes you make will need to be made inside the child theme (assuming you’re using one already). Otherwise, your changes will eventually be overwritten from a future update. This is standard practice for any setup.

Step 1: Create an override file in your child theme

First create a copy of the list.phtml file from your Theme. You’ll probably find this here:

<VENDER> refers to your Theme Vendor (e.g. Magento)
<THEME> refers to your Theme Name (e.g. luma)
<THEME_CHILD> refers to your Child Theme Name (e.g. luma_child)

app/design/frontend/<VENDOR>/<THEME>/Magento_Catalog/templates/product/list.phtml

You will then want to “override” this file by putting a copy of it in your Child Theme. Obviously, you’ll need to create the directories that don’t already exist:

app/design/frontend/<VENDOR>/<THEME_CHILD>/Magento_Catalog/templates/product/list.phtml

At this point, you’ve “overwritten” your theme file and can safely start editing your code.

Step 2: Calling the attribute data into the file

…

Step 3: Printing the attribute value onto the page

…

:information_source: I’ll update and add to this post once I know you’re with me. I’ll check back in later.

1 Like
3

Hi Craig,
Long time you sent me this answer. I will check on it and learn from it and then get back to you!