woocommerce featured products and categories

Widgets would allow the end user to reconfigure later, so if you think they may want to change things up, that would be a good way to go. If it’s not likely that they’ll want to customize this, it might be better to go with template parts.

In this example, you would have a “large featured product,” “medium featured category,” and “small featured product” template part. You could then build your html grid on whatever templates you’re editing and call each template part within the appropriate part of the grid.

The benefit of template parts is that if the end user changes the theme and ever decides to change back to your theme, the template parts are already in place and the theme is good to go upon activation. With widgets, they would have to activate the theme and then know to go set up their widgets, or they could risk having default ones (categories, login meta, all that junk) appearing until they realized they had to do that extra setup.

To allow the end user to select featured products:

One way to accomplish this would be to add a custom field on products – add a checkbox field for Featured Product. Next, you’ll need to run WP_Query within your overarching template file to find however many total featured products you want to display on that page. For example, if your layout above is for a homepage, edit front-page.php and run the WP_Query there. That will ensure that you have 4 unique products, not 4 separately-queried products which could allow the same product to appear twice.

Finally, you will need to create only one “Featured Product” template part and pass it parameters so that it knows both what size to display and what product to display. You would call it like this:

<?php get_template_part('featured_product', 'large', '1234'); ?>

Your template part will need to have a conditional for size: if size is large, use this markup; if size is small, use this other markup. The ‘1234’ should be one of the product IDs you grabbed from your WP_Query. From the ID you can then grab the image, name, permalink, etc. like you would in a normal loop.