Introduction

You may need a different product image dimension than the theme default for displaying products on your homepage using the Product Content Widget. By default, images are cropped at a 4-3 ratio for the most uniform look.

This is considered a modification, and is provided as-is. We expect you understand what you are doing if applying coding changes using these or other WordPress tutorials. Make a backup of your existing file so you can replace it if something goes wrong and you need to start over. Modified files WILL probably be replaced by a theme update at some point, so keep note of your changes for future reference or see our guides below. We cannot assist you with modifying your theme or support problems you encounter as a result!

If you are modifying a theme as part of a client project, the following are really important!

How to Modify Your Theme the Right Way
How to Track Update Changes and Maintain Modifications

The Solution

Either install the Solid Code Theme Editor plugin and access it from Appearance > SC Theme Editor, or create a copy of the widget as specified in the above “Child Theme” article.

Line numbers may vary slightly depending on your theme. Please note the themes this article is intended for under the title above!

Lines 91-95 define the image:

$width = 490;
$height = 368;
$resizer = '4-3-medium';

If you have products that require taller portrait images such as posters or shirts, add another condition on the line following the “resizer” line, as shown in red below:

elseif($layout_columns !="1"): 
 $width = 490;
 $height = 368;
 $resizer = '4-3-medium';
elseif($posttype == 'product') :
 $width = 660;
 $height = 660;
 $resizer = '660auto';

If you are using a 2 column layout and need the height to be taller than a maximum of 660 pixels, change the height value.

If edited locally, upload via FTP to wp-content/themes/yourtheme/ocmx/widgets/

 

Elementor

Have you seen Elementor?

You can build almost any Obox theme with Elementor!
With a powerful, fast page builder, Elementor is the best way to get your site online with as little effort as possible.