如何在 WooCommerce 目录中使用新按钮添加 10 件产品？

Question

我需要将 10 件特定产品添加到购物车。 为此，我们创建了一个新按钮，添加到默认的 WooCommerce 按钮中，该按钮仅显示在某些产品上。

缺点是，当我们按下按钮时，会添加该产品的 10 件，但不会重定向到购物车，这是我们不希望发生的情况。 添加 10 个单位后，用户必须继续在商店中。

我已经寻找了问题的解决方案，他们为我提供了一个 javascript 函数，但由于某种原因它不起作用。 javascript 应该阻止我被重定向到购物车，但它阻止了按钮并且不执行操作。

javascript代码

jQuery(document).ready(function($) {
    // Maneja el clic en el botón "Añadir 10 al carrito"
    $('.add-to-cart-10').on('click', function(e) {
        e.preventDefault();
        var productId = $(this).data('product-id');
        var quantity = 10;

        // Agrega el producto al carrito utilizando AJAX
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'add_to_cart',
                product_id: productId,
                quantity: quantity,
            },
            success: function(response) {
                // Realiza cualquier acción adicional aquí (como mostrar un mensaje de éxito)
                console.log('Producto agregado al carrito: ' + productId);
            },
        });
    });
});

是否可以通过另一种方式而不使用 javascript 来遵循此操作？ 我真的不在乎如何去做，经过几天的努力，我只想尽我所能去做。

我不明白是否会有问题，或者会发生什么，我尝试了其他示例并使用其他代码进行了测试，它将按钮添加到产品页面，而不是目录，它也不起作用。

我不知道如何找到一种方法来做到这一点，你能给我一些在哪里寻找信息的想法或例子吗？

// Add an "Add 10 to Cart" button on the catalog page for specific products
add_action('woocommerce_after_shop_loop_item', 'agregar_boton_anadir_10_al_carrito', 10);

function agregar_boton_anadir_10_al_carrito() {
    global $product;

    /// Define an array with the IDs of the products to which you want to apply this functionality
    $productos_especificos = array(3092, 422);

    // Get the ID of the current product
    $producto_id = $product->get_id();

    // Check if the current product is in the list of specific products
    if (in_array($producto_id, $productos_especificos)) {
        echo '<div class="add-10-to-cart-button">';
        echo '<a href="' . esc_url(wc_get_cart_url()) . '?add-to-cart=' . esc_attr($producto_id) . '&quantity=10" class="button">Añadir 10 al carrito</a>';
        echo '</div>';
    }
}

Answer 1

要为 WooCommerce 档案中的特定产品添加辅助“添加到购物车”按钮（数量为 10 个），请使用以下命令：

// Add an "Add 10 to Cart" button on archives for specific products
add_action('woocommerce_after_shop_loop_item', 'display_second_add_to_cart_10', 15);
function display_second_add_to_cart_10() {
    global $product;

    if ( $product ) {
        $targeted_ids = array(3092, 422); // Array of allowed products Ids
        
        if (  in_array($product->get_id(), $targeted_ids) ) return;

        if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) {
            woocommerce_template_loop_add_to_cart( ['quantity' => 10] );
        }
    }
}

// Change add to cart text to "Add 10 to Cart"
add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_10_text', 10, 3 );
function filter_loop_add_to_cart_10_text( $button, $product, $args  ) {
    if ( $args['quantity'] == 10 ) {
        $button_text    = __("Add 10 to Cart", "woocommerce");
        $args['class'] .= 'button_10';

        $button = sprintf(
            '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
            esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
            isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
            esc_html( $button_text )
        );
    }
    return $button;
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。