5分钟生成10篇英文软文article forge软件试用

Merrill Mayer 经营着一家位于西雅图的网站开发公司,名为 Kool Kat Web Designs。 在这篇客座文章中,她写了最近为一位摄影师进行的工作——创新地使用 WooCommerce 来帮助销售他的照片。

google广告开户

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”并添加一个更新购物者选择的新函数来完成的。

WordPress divi主题
自定义购物车页面
自定义购物车页面
您想成为我们博客的特色吗? 分享您使用 WordPress 和我们的产品的经验,如果我们相信这将使我们的社区受益,我们将发布它。 联系我们。
cta-banner-10-产品页面-v2_2x

5分钟生成10篇英文软文article forge软件试用
tiktok