HTML 如何向WooCommerce购物车中显示自定义按钮

问题描述

我需要创建很多自定义按钮，用于将产品加入购物车：

<button type="button" class="button add_to_cart" data-product_id="998" data-quantity="1">
  Add to cart
</button>

使用链接的方法很糟糕，无法正确工作： https://site-link/?add-to-cart=998&quantity=1

我尝试了许多其他选项，但没有什么起作用。

解决方案

对于简单产品类型，有多种方法来显示添加到购物车按钮。

1. 使用Ajax添加到购物车按钮：

<a href="#" class="button add_to_cart_button ajax_add_to_cart" data-product_id="998" data-quantity="1" rel="nofollow">添加到购物车</a>

2. 使用要求周围有一个表单的POST方法和提交按钮：

<form class="cart-custom" method="post">
    <input type="hidden" class="qty" name="quantity" value="1">
    <button type="submit" name="add-to-cart" value="998" class="single_add_to_cart_button button">添加到购物车</button>
</form>

3. 使用GET方法与链接按钮（但它会在URL中显示查询字符串）：

<a href="?add-to-cart=998&quantity=1" class="button add_to_cart_button" rel="nofollow">添加到购物车</a>