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.
I am overwriting the default template for this widget in my theme, with a app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/product/widget/new/column/new_default_list.phtml
template file.
The problem is the product images are too small, I want to be able to set custom width and height.
The code for the product "squares":
<div class="product-item-info">
<a class="product-item-photo" href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
title="<?php /* @escapeNotVerified */ echo $block->stripTags($_product->getName(), null, true) ?>">
<?php echo $block->getImage($_product, 'side_column_widget_product_thumbnail')->toHtml(); ?>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
title="<?php /* @escapeNotVerified */ echo $block->stripTags($_product->getName(), null, true) ?>)" class="product-item-link">
<?php /* @escapeNotVerified */ echo $this->helper('Magento\Catalog\Helper\Output')->productAttribute($_product, $_product->getName(), 'name') ?>
</a>
</strong>
<div class="product-item-actions">
<div class="actions-primary clearfix">
<?php if ($_product->isSaleable()): ?>
<?php if ($_product->getTypeInstance()->hasRequiredOptions($_product)): ?>
<?php /* @escapeNotVerified */ echo $block->getProductPriceHtml($_product, '-widget-new-' . $suffix) ?>
<button type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
class="action tocart btn"
data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_product) ?>"}}'>
<span class="hidden"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</button>
<?php else: ?>
<?php
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_product), ['product' => $_product->getEntityId()]);
?>
<?php /* @escapeNotVerified */ echo $block->getProductPriceHtml($_product, '-widget-new-' . $suffix) ?>
<button type="button" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
class="action tocart btn"
data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'>
<span class="hidden"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_product->getIsSalable()): ?>
<div class="stock available" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
<span><?php /* @escapeNotVerified */ echo __('In stock') ?></span>
</div>
<?php else: ?>
<div class="stock unavailable" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
<span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
What shall I change here? Or is there an alternative to editing the new_default_list.phtml
template file?
Thank you!
Best Answer
Create
view.xml
inapp/design/frontend/your_theme_namespace/yourtheme/etc/
with following contentHere you can change image size depending on your template and requirement.
I hope this will help you.