举例WooCommerce的定制边界

Astra主题提供WooCommerce Product Gallery，即产品页的产品轮播图体验不令人满意，问题很明显，没有设计成Carousel，缩略图多了断行，切换不平滑，是个半吊子实现，对于这样一个业内如此为人熟知的主题，实在是不应该的，如果要深究原因，恐怕和我在好的定制与坏的定制里说的，Astra面对WooCommerce深度定制的巨大城墙前选择了退守，这是可以理解的。

但该实现的东西总得实现，没有店长愿意给客户半吊子体验，尤其是产品详情页，上面的每个交互用例都影响转化率，客户不是傻子，没吃过猪肉也见过猪跑，他们会下意识地和自己曾经访问过的某个电商站（它很可能是amazon）的体验来比对，如果你的实现让他觉做出的情感判断是Low的，那么下单这回事有可能就没戏了。

如何完成这个定制？

Product Gallery Slider for WooCommerce

从这个插件的描述看，他应该是我们需要的：把产品轮播区域Carousel化。大致看过免费版的介绍以后，我们决定直接去它的付费版主页，因为Mouse Dragging Option是我们不愿放弃的，尤其是移动端，视频支持、细粒度的LightBox控制也很nice，Elementor兼容性意味着客户在需要的时候可以无技术人员干预下换配，这很不错。

原来它的付费版叫Twist，这是一个让人云里雾里的名字，wp.org页上开发者上传的截图，隐隐让我感到作者可能不是Designer出身，因为第一张截图展示的是一种粗糙的Design Value … 但话说回来，“现在”这些东西都无伤大雅，也许我自己换配能让它优雅起来，只要它能解决我的根本问题，如果它能让我（和客户）未来永远不为这个功能写一行代码，那么29美金是绝对值得的。

很不幸，我购买的上面的第一个插件，对，就是29美金的那个，在我们部署到生产站一个多月以后的某天，主题完成某个主要版本升级后，出现了严重兼容性问题：我们的PHP错误日志里居然监测到了不少Memory Exhausted的致命错误，而错误的源头就来自这个插件的某个文件，这让我们措手不及。

我不得不再次对这个插件的代码进行重新评估，和我的第一印象一样，插件虽然把承诺的功能实现得不错，但它的PHP代码难以令人尊重。虽然作者承诺会解决问题，因为我们的Support并没有过期，只不过他回邮件的间隔平均是3天以上，在强烈的直觉指引下，我还是决定换掉它，一个不够好的插件可以改进，一个不够好的程序员却是项目的风险因素，他不会有第二次机会。

WooThumbs

IconicWP的WooThumbs被展示的方式显然让人更有信心，我喜欢在插件主页看到客户评价里有“Polished”字样，只不过如果这个4.73的平均分是TrustPilot的更好，但没有什么是完美的。价格是79美金每年，14天试用期，30天内无理由退款，这很好，Testmonial里有WooCommerce业内人士的评语，如果businessbloomer的作者说这是一个有质量的插件，那么它大概是的。

我们的目标仍然是实现一个完整的、优质的Product Gallery体验。移动设备优化、视频支持、款式多图支持、缩放、全屏、响应速度配置 …. 而且考虑了Accessibility，这一点让我彻底放下了疑虑。

它在我几个客户的网站上工作得很好，我们和开发者的合作很顺畅，客户也很满意这笔投资，因为在不到一个小时培训之后，他们可以完全控制这个插件的行为，不必央求不解风情的程序员的干预，他居然还要按小时收服务费，过分！

调动Elementor，釜底抽薪

有时候设计师比客户跟难满足，这不，她这次改版决定彻底重制产品详情页，100%宽度的鱼眼风Carousel最近是她的最爱，她已经给我看了设计稿，不可否认，看到新设计第一眼起，我就有点击欲望，图片显示区域大了整整30%，桌面上3图同显让缩略图行不再必要，一切都一目了然，产品给人的观感无疑更加活泼、自信且附有个性了。

很显然我们需要Theme Builder，用它来制作Single Product的Template，这没有问题，但如何实现这个自信的鱼眼风？任何市场上的Elementor WooCommerce Widget都爱莫能助，前面提到的插件也无能为力，它们的能力仅限于做出一个漂亮的Carousel，但它们的作者可从来没考虑过有人会要鱼眼效果 — 其实这是设计师同学喜欢用的表述，这不失贴切，其实也可以叫Coverflow。

只要对着Elementor主页多祈祷几次，或者在WooCommerce Support页装乖乖孩，问题就能在梦中解决：

add_shortcode('custom_coverflow_product_gallery', function ($atts) {
	global $product;
	
	$attachment_ids = $product->get_gallery_attachment_ids();
	$slides = [];

	foreach( $attachment_ids as $attachment_id ) 
	{	
		$slides[] = [
			'image' => [
				'url' => wp_get_attachment_image_src( $attachment_id, 'medium' )[0],
				'id' => '',
			],
			'type' => 'image',
			'image_link_to_type' => '', 
			'image_link_to' => '',
		];
	}

	
	$media_carousel = \Elementor\Plugin::instance()->elements_manager->create_element_instance(
		[
			'elType' => 'widget',
			'widgetType' => 'media-carousel',
			'settings' => [
				'skin' => 'coverflow',
				'slides' => $slides,
			],
		],
		[]
	);
	
	$media_carousel->print_element();
	
});

如果没有人托梦相助，你也可以在Elementor（及Elementor Pro）的源码文件夹里找到蛛丝马迹。如果需求把我们逼到代码这个墙角，也就只有置之死地而后生了。

哦对了，这一切，你的Shopify都做不到 ^^

我想写上一段基于WooCommerce的templates/single-product定制的炫技结尾，但和WC源码拼刺刀并不是我们用WC的目的，我以前也写过，这不仅缺乏品位，而且危险，打住吧。