0

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!

Improve this question

3 Answers 3

Reset to default
1

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.

Improve this answer
13
  • Your suggestion worked with one amendment" the fi;e I needed to overwrite was new_default_list.phtml not new_grid.phtml.
    – Razvan Zamfir
    Commented Nov 7, 2017 at 15:44
  • How do I set (bigger) width and height for the product images in the screenshot above?
    – Razvan Zamfir
    Commented Nov 8, 2017 at 9:19
  • You can use below code for resize image
    – Pradeep Singh
    Commented Nov 8, 2017 at 12:01
  • Where, in what file?
    – Razvan Zamfir
    Commented Nov 8, 2017 at 12:05
  • new_default_list.phtml <?php $_imagehelper = $this->helper('Magento\Catalog\Helper\Image'); $productImage = $_imagehelper->init($_item, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFr‌​ame(FALSE)->resize(5‌​00)->getUrl(); ?> <img src="<?php echo $productImage; ?>" />
    – Pradeep Singh
    Commented Nov 8, 2017 at 12:23
0

You can add such icons with help of CSS, you just need to pass the content code in css; below is an example

What is a viable alternative to what I did so far?

You can use icons in CSS, just need to get the class/id and apply the content code in CSS. http://astronautweb.co/snippet/font-awesome/

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?

Most of the design customization you can do with the help of CSS, rest you need to create another template to render here.

Improve this answer
1
  • I have already included Font Awesome in some template files. I would like to be consistent.
    – Razvan Zamfir
    Commented Nov 7, 2017 at 9:48
0

I am assuming you have inserted widget from admin.
You can change widget template, like I have changed in following code from new_grid.phtml to custom_new_grid.phtml

<p>{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" show_pager="0" products_count="10" template="product/widget/new/content/custom_new_grid.phtml"}}</p>

and created new template file custom_new_grid.phtml in my custom theme.
In this custom file you can add your own classes.

Improve this answer
8
  • Great stuff! One question: In what directory of my theme precisely shall I put my (not yet created) custom_new_products.phtml file?
    – Razvan Zamfir
    Commented Nov 7, 2017 at 10:16
  • You can create new custom template inside app/design/frontend/NameSpace/custom-theme/Magento_Catalog/templates/product/widget/new/content/
    – Anshu Mishra
    Commented Nov 7, 2017 at 10:24
  • NameSpace is company name, right?
    – Razvan Zamfir
    Commented Nov 7, 2017 at 10:26
  • Also, being really new to Magento, Whare can I find a good example custom_products_template.phtml (generic file name)?
    – Razvan Zamfir
    Commented Nov 7, 2017 at 10:28
  • Yes, you can choose your company name as namespace.
    – Anshu Mishra
    Commented Nov 7, 2017 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.