WooCommerce如何在首页展示带加入购物车按钮及描述的自定义商品

以下为不同技术场景下的可落地实现方案：

1. 通用原生HTML/CSS/JS实现 #

适合所有自定义开发的站点，可直接复用代码调整参数：

页面结构代码 #

<!-- 商品展示模块容器 -->
<div class="featured-products-section">
  <h2>精选商品</h2>
  <div class="products-grid">
    <!-- 单个商品卡片，需要展示多少个就复制多少份 -->
    <div class="product-card">
      <img src="替换为你的商品图片本地/站点内路径" alt="商品名称" class="product-img">
      <h3 class="product-name">纯棉休闲T恤</h3>
      <p class="product-desc">100%新疆长绒棉，透气亲肤，多色可选，日常穿搭百搭款</p>
      <p class="product-price">¥99.00</p>
      <button class="add-to-cart-btn" data-product-id="1001">加入购物车</button>
    </div>
  </div>
</div>

样式代码 #

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}
.product-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.product-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 4px;
}
.product-desc {
  color: #666;
  font-size: 14px;
  margin: 8px 0;
  line-height: 1.4;
}
.add-to-cart-btn {
  width: 100%;
  background: #2385bb;
  color: #fff;
  border: none;
  padding: 10px 0;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 12px;
}
.add-to-cart-btn:hover {
  background: #1a6a96;
}

加入购物车交互逻辑 #

document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const productId = this.getAttribute('data-product-id');
    // 可替换为你站点自身的购物车接口请求逻辑
    // 本地存储购物车实现参考：
    let cart = JSON.parse(localStorage.getItem('cart') || '[]');
    const existingProduct = cart.find(item => item.id === productId);
    existingProduct ? existingProduct.quantity += 1 : cart.push({id: productId, quantity: 1});
    localStorage.setItem('cart', JSON.stringify(cart));
    alert('商品已成功加入购物车');
  })
})

2. WooCommerce（WordPress）站点实现 #

无需全量写代码，直接用系统自带短代码即可实现：

• 展示已标记为「精选」的商品，插入短代码：[featured_products limit="4" columns="4" orderby="date" order="DESC"]
• 自定义展示指定ID的商品，插入短代码：[products ids="1001,1002,1003" orderby="post__in"]，把ids参数替换为你要展示的商品ID即可
• 自带默认商品卡片已经包含商品描述、价格、加入购物车按钮，需要调整样式可自定义主题的WooCommerce模板文件。

3. Shopify站点实现 #

直接修改主题模板代码即可快速上线：

1. 进入Shopify后台，依次点击「在线商店」-「模板」-「编辑代码」
2. 找到首页模板index.liquid，插入以下代码，替换为你要展示的商品句柄即可

{% assign featured_product_handles = "cotton-t-shirt,canvas-shoes,leather-bag" | split: "," %}
<div class="featured-products">
  <h2>精选商品</h2>
  <div class="grid grid--uniform">
    {% for handle in featured_product_handles %}
      {% assign product = all_products[handle] %}
      {% if product %}
        <div class="grid__item medium-up--one-quarter">
          {% render 'product-card', product: product %}
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

默认product-card组件已经自带商品描述预览、加入购物车按钮，不需要额外开发。

内容的提问来源于stack exchange，提问作者Happy Nest Ventures LLC