如何修改WooCommerce产品外观？适配MaterializeCSS前端网格

嘿，我懂你现在的需求——用MaterializeCSS把WooCommerce的产品完美适配到自定义网格布局里对吧？刚好我之前做过类似的联盟站开发，给你一套落地的解决方案：

WooCommerce允许我们通过主题模板重写来替换默认的产品输出结构，这是最稳妥且不影响插件升级的方式。你只需要在你的主题目录下创建对应的模板文件，把Materialize的网格+卡片结构套进去就行。

具体操作步骤 #

1. 准备模板文件 #

在你的WordPress主题根目录下，新建一个名为woocommerce的文件夹，然后找到WooCommerce插件目录里的templates/content-product.php文件，把它复制到你刚创建的woocommerce文件夹中。这样WooCommerce就会优先加载你主题里的这个模板，而不是插件默认的。

2. 替换为MaterializeCSS的产品卡片结构 #

把复制过来的content-product.php里的代码全部替换成下面的内容，完美适配你给出的网格+卡片结构，同时保留WooCommerce的动态产品数据：

<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.6.0
 */

defined( 'ABSPATH' ) || exit;

global $product;

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}
?>
<div class="col l3 s6">
	<div class="card hoverable">
		<div class="card-image">
			<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
				<?php echo $product->get_image( 'woocommerce_thumbnail', array( 'class' => 'padding20' ) ); ?>
			</a>
		</div>
		<div class="card-content">
			<h6 class="truncate"><?php the_title(); ?></h6>
			<?php woocommerce_template_loop_price(); ?>
		</div>
		<div class="card-action">
			<?php woocommerce_template_loop_add_to_cart(); ?>
		</div>
	</div>
</div>

3. 外层网格容器的处理 #

记得在调用产品循环的页面（比如shop页面或自定义产品列表页），在外层加上Materialize的row容器，比如：

<div class="row">
	<?php woocommerce_product_loop_start(); ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<?php wc_get_template_part( 'content', 'product' ); ?>
		<?php endwhile; ?>
	<?php woocommerce_product_loop_end(); ?>
</div>

样式与细节优化建议 #

• 如果你想调整卡片内边距或图片样式，可以自定义CSS：

.card .card-image img.padding20 {
	padding: 20px;
	box-sizing: border-box;
}
.card-content h6 {
	margin: 0 0 10px;
	color: #333;
}

• Materialize的hoverable类已经自带了悬浮效果，如果需要更个性化的效果，可以自己加额外的CSS动画。
• 响应式方面，l3 s6已经实现了桌面端4列、移动端2列的布局，刚好适合产品展示，如果你需要调整列数，只需要修改col的类名（比如l4 s6就是桌面3列）。

最后检查 #

修改完成后，记得清除WooCommerce的缓存（如果开启了缓存插件也要一起清），然后刷新页面，检查产品链接、图片、价格和加入购物车按钮是否正常工作，响应式布局在不同设备上是否显示正常。

内容的提问来源于stack exchange，提问作者Carl Louis