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

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>
  1. 使用要求周围有一个表单的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>
  1. 使用GET方法与链接按钮(但它会在URL中显示查询字符串):
<a href="?add-to-cart=998&quantity=1" class="button add_to_cart_button" rel="nofollow">添加到购物车</a>

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程

HTML 精选笔记