Styling adjustments:

• Square product images
• Titles should be Gotham font
• Prices should not be bold
• fix stars to look like mockup
  

Done *

-Product images are what they are.  Banners for example, use a 750x1050 template.  If you want square product images in the Catalog, you'd want to prepare square images for the products themselves.  We "could" register a new size specifically for the Catalog, and crop them to square.  I'll explore that prospect.

http://dev.diocesan.com/product-category/banners/

Tee-shirts are much closer to square product images already: http://dev.diocesan.com/product-category/apparel/

-Titles, prices, check

-Removed stars from Catalog.  It makes sense to have ratings in the Catalog if each product were different, but we are not treating them that way.  Ratings are being used on a "per category" basis, so showing them on the Catalog listing for each product is not recommended.

Update:  Woocommerce has a built in catalog thumbnail size, which is great.  It was already set to 300x300 w/ soft crop.  Unfortunately, changing it to hard crop does not achieve the desired results.  Instead of scaling to "fit", it scales to first width or height to reach square bounds, and chops off the rest.  I did this for the Ash Wednesday banners to demonstrate.

http://dev.diocesan.com/product-category/banners/ash-wednesday/

Unless there's some hidden trick, I feel the best approach is still going with square product image templates to start with.

Updated mockup.
I updated this entire mockup with fonts and all, so this should be exactly what we are looking for.
Modifications

• Item number next to category title is also Archer
• Sort by box adjusted
• Stars removed
• price font weight change
• phone number updated
• Footer updated
• customer care heart color updated

PSD is in the development folder

DioTrin_site-catalog3.jpg 701 KB • Download