Как добавить поле количества с кнопкой «Добавить в корзину» к разным и простым продуктам на странице магазина?

Question

По умолчанию у Woocommerce нет поля количества для переменных продуктов.

Я пробовал https://ru.wordpress.org/plugins/woocommerce-ajax-add-to-cart-for-variable-products/, но он отображается только на странице одного продукта.

Как отобразить поле количества на странице товара?

Answer 1

Вы можете создать свой собственный набор количества:

Вот краткий обзор того, как я сделал это для своего сайта: (надеюсь, я смогу помочь вам в этом)

Я удалил стандартные функции woocommerce-hooks из своих функций тем .php

Например:

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

Обзор всех хуков woocommerce: (Наглядное руководство)

Страница архива: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

Один продукт: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

После удаления крючков я добавил их в нужное место с помощью пользовательской функции, которая содержит мой пользовательский ящик количества.

add_action( 'woocommerce_after_shop_loop_item_title', 'customize_woocommerce_archive_product', 10 );

function customize_woocommerce_archive_product(){
   global $product;
   $id = $product->get_id();
   $permalink = get_permalink( $product->get_id());
   $step = 1;
   $min_value = 1;
   $max_value = 10000;
   $input_name = $id;
   $input_value = 1;
   $input_name = $id;
   $sku = $product->get_sku();

   <input id="quantity_counter<?php echo $id;?>" 
   type="number" step="<?php echo esc_attr( $step ); ?>" 
   min="<?php echo esc_attr( $min_value ); ?>" 
   max="<?php echo esc_attr( $max_value ); ?>" 
   name="<?php echo esc_attr( $input_name ); ?>" 
   value="<?php echo esc_attr( $input_value ); ?>" 
   title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" 
   class="input-text qty text custom_quantity" size="4"/>

   <div class="custom_pricing_table_row custom_pricing_table_button_container">

        <a href="<?php echo $permalink;?>/?add-to-cart=<?php echo $id; ?>" 
        name="<?php echo $id;?>" data-quantity="1" 
        class="custom_pricing_table_button button product_type_simple 
        add_to_cart_button ajax_add_to_cart quantity_trigger" 
        data-product_id="<?php echo $id;?>" 
        data-product_sku="<?php echo $sku;?>" rel="nofollow">Add to cart</a>

   </div>
}

Теперь вам нужно добавить немного javascript, чтобы изменить значение количества данных.

Внутри моей темы function.js я создал следующую функцию:

 jQuery('.quantity_trigger').click(function(){
    var clickedTrigger_ID = jQuery(this).attr('name');  
    var searchID = 'quantity_counter' + clickedTrigger_ID;

    var currentCounter = document.getElementById(searchID);
    var quantity = currentCounter.value;

    jQuery(this).attr("data-quantity",quantity);

});

Надеюсь, этот код поможет вам.