Magento 2.1 Widgets – Add Classes and Icons to Homepage Widget

magento-2.1widget-instancewidgets

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

On the home page, I have inserted a "New Products" widget via the Magento admin.

enter image description here

I am using Font Awesome and Bootstrap in my custom theme and I want to take advantage of those, by adding classes and icons to the product boxes in the image below.

I want those "Add to Cart" to have this code:

<button type="submit" title="Add to Cart" class="action tocart btn">
 <span class="hidden">Add to Cart</span>
 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</button>

The problem is the HTML editor in the Magento admin does not offer this possibility and I can't find the .phtml template responsible for rendering the widget.

  1. What is a viable alternative to what I did so far?
  2. Is there an alternative to inserting the "New Products" widget via the Magento admin, that would allow me to edit the widget's HTML as detailed as I wish/need? In other words: can I insert the block via some template?

Thank you!

Best Answer

You can simply override the template file and changes the html in this file

Copy the file from below path

 vendor/magento/module-catalog/view/frontend/templates/product/widget/new/content/new_grid.phtml

In your theme paste the file to:

app/design/frontend/<Vendor_Theme>/<name_theme>/Magento_Catalog/templates/product/widget/new/content/new_grid.phtml

And do changes in this file.

Related Topic