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
我尝试了许多其他选项,但没有什么起作用。
解决方案
对于简单产品类型,有多种方法来显示添加到购物车按钮。
- 使用Ajax添加到购物车按钮:
<a href="#" class="button add_to_cart_button ajax_add_to_cart" data-product_id="998" data-quantity="1" rel="nofollow">添加到购物车</a>
- 使用要求周围有一个表单的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>
- 使用GET方法与链接按钮(但它会在URL中显示查询字符串):
<a href="?add-to-cart=998&quantity=1" class="button add_to_cart_button" rel="nofollow">添加到购物车</a>