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

Question

我正在尝试通过WooCommerce集成开发WordPress主题，但是，我对如何执行此特定自定义功能感到困惑：

1. 在商店/存档页面上单击任一分组产品，但不要重定向到该分组产品的页面（我相信这是默认的WooCommerce行为），请启用以下子产品单项和数量的div每个领域。应该可以通过JavaScript或JQuery来实现。

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

3. 使用底部的“添加到购物车”按钮将选择内容添加到购物车。

现在，我熟悉使用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;
}

Answer 1

经过一番搜索和实验，我找到了解决方案（或更确切地说是一种破解方法）。

结果是，我只需将相关的添加到购物车URL即可将产品添加到购物车。从理论上讲，通过一点JavaScript和CSS技巧，我可以创建自定义功能，如图像中的功能。我不确定这是否是正确或最有效的方法，但绝对可以考虑采用此方法。

以下是有关自定义添加到购物车网址的指南： https://www.businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/

将其张贴在此处，以防有人遇到类似问题。

提示：使用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。就个人而言，我不会这样做，但是嘿。

当然，它可能会变得更加复杂，并且需要进行大量检查（至少在我的要求下），但这是我所想到的最基本的形式。