Merrill Mayer 经营着一家位于西雅图的网站开发公司，名为 Kool Kat Web Designs。 在这篇客座文章中，她写了最近为一位摄影师进行的工作——创新地使用 WooCommerce 来帮助销售他的照片。
Jon Cornforth 有一个过时的网站，几乎没有展示他的摄影作品或激动人心的旅行。 他有一个单独的 WordPress 博客，所以他熟悉使用 WordPress。 当我们讨论将整个新网站放在 WordPress 上，以及使用 WooCommerce 销售他的照片时，Jon 非常热情。
Horsepower Design 的 Chris Davis 为 CornforthImages.com 设计了一个独特而漂亮的网站设计，以取代 Jon 目前拥有的网站设计。 作为 Web 开发人员，我必须处理 Chris 在他的设计中指定的一些功能。

开发过程
选择 WooCommerce 作为电子商务引擎后，我通过构建自定义模板并使用各种 WooCommerce 操作和过滤器来利用它的灵活性。
类别布局
由于这是一个专门用于摄影的网站，WooCommerce 类别需要显示实际打印的自定义缩略图。 我依靠 David DeSandro 的 jQuery Isotope 插件来构建像拼图一样将图像组合在一起的布局。 另一个挑战是不同尺寸的图像——垂直或水平方向。 这意味着 WooCommerce 设置提供的标准尺寸不足。
自定义尺寸救援
我利用 WordPress 的“add_image_size”功能生成高图像，同时保持 WooCommerce 缩略图设置为水平尺寸。 然后，无论在哪里需要，图像高度和宽度的简单比较确定是使用 WooCommerce 设置中定义的水平方向缩略图还是我们的“高”图像。 我使用 WooCommerce“woocommerce_before_subcategory_title”在正确的位置生成图像。 我删除了生成标题、“添加到购物车”按钮和其他不需要的组件的标准 WooCommerce 操作。

单一产品页面
单个产品页面，就像类别页面一样，具有独特的外观和感觉。 为了展示印刷品在特定环境中的外观，单个产品页面允许查看可能出现在家庭、办公室、酒店或餐厅中的图像。 这是通过使用操作“woocommerce_after_add_to_cart_button”在“添加到购物车”按钮之后添加一些附加代码来实现的。 许可证信息也通过使用操作显示：“woocommerce_after_add_to_cart_form”。 再次根据它们的方向选择图像。 这里我使用了一个自定义的 product-image.php 模板来达到预期的效果。
产品变化
每个印刷品的产品变化包括尺寸和框架选项。 该设计指定这些选择出现在购物车中，而不是单个产品页面中。 为了通过单一产品页面验证，我使用 CSS 隐藏了变化。
大车
创建了一个自定义的“variable.php”模板来显示产品变体。 自定义 JavaScript 是基于原始的 WooCommerce JavaScript 开发的，用于处理产品变化。 最后，必须在购物车中更新尺寸和框架的正确选择。 这是通过从“init”钩子中删除“woocommerce_update_cart_action”并添加一个更新购物者选择的新函数来完成的。
