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

【问题标题】：Adding quantity fields and add to cart buton on WooCommerce Shop page在 WooCommerce 商店页面上添加数量字段并添加到购物车按钮
【发布时间】：2020-08-05 17:42:17
【问题描述】：

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

点击商店/存档页面上的任一分组产品，而不是重定向到该分组产品的页面（我相信这是默认的 WooCommerce 行为），启用下面的 div 与每个子单品和数量字段.应该可以通过 JavaScript 或 JQuery 实现。
再次通过 AJAX 或 JQuery 脚本，一旦达到分组产品的最大数量，这应该“禁用”或阻止用户添加更多。
使用底部的“添加到购物车”按钮将选择添加到购物车。

现在，我知道我的问题可以使用带有一些 CSS 技巧的 JavaScript 来解决，但我并不特别知道我应该使用哪些 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;
}

【问题讨论】：

您应该在问题中包含所有相关代码...如果您使用 StackOverFlow 现有答案代码，请始终*在您的问题中包含链接
不，我没有使用来自 SO 答案的现有代码。我的问题上的 sn-p 是我从 WooCommerce 官方文档中得到的。 docs.woocommerce.com/document/… 编辑：如果它在现有答案中被引用，那么我不知道。因为我相信我的问题有点独特。
那么你自己的真实代码尝试在哪里？

标签： javascript php jquery wordpress woocommerce

【解决方案1】：

经过一番搜索和试验，我找到了解决方案（或者更确切地说是 hack）。

事实证明，我只需获取相关的添加到购物车 URL 即可将产品添加到购物车。使用一点 JavaScript 和 CSS 技巧，理论上我可以创建像图像中那样的自定义功能。我不太确定这是一种正确或最有效的方法，但绝对认为是一种解决方法。

以下是有关自定义添加到购物车 URL 的指南： 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。就个人而言，我不会这样做，但是，嘿。

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

【讨论】：