Javascript 在WooCommerce商店页面上添加数量字段并添加到购物车buton

我正在尝试开发WooCommerce集成的WordPress主题，但是，如何实现这一特定的定制功能，我感到困惑：

单击shop/archive页面上的任一分组产品，但不是重定向到该分组产品的页面（我相信这是默认的WooCommerce行为），而是使用每个产品的子产品和数量字段启用下面的div。应该可以通过JavaScript或JQuery实现

再次通过AJAX或JQuery脚本，一旦达到分组产品的最大数量，就应该“禁用”或阻止用户添加更多

使用底部的“添加到购物车”按钮将选择添加到购物车

现在，我知道我的问题可以通过使用JavaScript和一些CSS技巧来解决，但我不知道为了实现这一点，我应该使用哪些WooCommerce函数/钩子

我已经尝试过这段代码，但它并没有产生我所尝试的效果：

/**
 * Override loop template and show quantities next to add to cart buttons
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

/**
*覆盖循环模板并在“添加到购物车”按钮旁边显示数量
*/
添加过滤器（'woocommerce\u loop\u add\u to\u cart\u link'，'quantity\u inputs\u for\u woocommerce\u loop\u add\u to \u cart\u link'，10，2）；
函数数量\u输入\u用于\u商业\u循环\u添加\u至\u购物车\u链接（$html，$product）{
如果（$product&&$product->is_type（'simple'）&&&$product->is_purchable（）&&&$product->is_in_stock（）&&&&！$product->is_selled_single（））{
$html=''；
$html.=woocommerce\u quantity\u输入（数组（），$product，false）；
$html.=''.esc_html（$product->add_to_cart_text（））。'；
$html.=''；
}
返回$html；
}

经过一段时间的搜索和试验，我找到了一个解决方案（或者更确切地说是一个黑客）

事实证明，我可以通过获取相关的“添加到购物车”URL将产品添加到购物车。通过一点JavaScript和CSS技巧，理论上我可以创建像图像中那样的自定义功能。我不太确定这是一个正确的或最有效的方法，但肯定被认为是一个解决办法

以下是有关自定义添加到购物车URL的指南：

把它贴在这里，以防有类似问题的人遇到这个问题

提示：使用JavaScript构建自定义添加到购物车URL。例如，一个函数可以更改商店页面上自定义“添加到购物车”按钮的

href

属性。有很多方法可以做到这一点。但那是我的主意

function whenProductClicked(){
     let e = document.getElementById("YourAddToCart_Button_ID");
     e.setAttribute("href", "https://yourdomain.com/?add-to-cart=3111");
}

最重要的部分是URL的这一部分：

？add to cart=3111

，当您安装WooCommerce时，此URL将触发WooCommerce的add to cart功能<代码>？添加到购物车是功能，

3111

是数据库中现有产品的ID。因此，如果您需要偏离WooCommerce的标准工作方式，那么您必须在如何构建URL方面发挥作用并发挥创意。就我个人而言，我不会这么做，但是嘿

---

当然，它可能会变得更复杂，需要大量的检查（至少是根据我的要求），但这是我所想的最基本的形式。

你应该在你的问题中包含所有相关的代码…如果你使用的是StackOverFlow现有答案代码，请始终*在你的问题编号中包含链接，我没有使用SO答案中的现有代码。关于我的问题的片段是我从官方WooCommerce文档中得到的。编辑：如果它是在现有答案上引用的，那么我不知道它。因为我相信我的问题是独一无二的。那么你真正的代码尝试在哪里呢？