M
M
mUchenik2016-11-22 08:47:57
PHP
mUchenik, 2016-11-22 08:47:57

How to display the price depending on the quantity of goods directly in the product card?

Hello!
There is an idea, but I apologize if the description is crooked, because I tried to explain it as best I could. :)
Dear experts, please tell me how to make automatic change of the cost of goods in the product card, when changing the entered quantity?
More:
There is a product, the cost of the product is 100 rubles per kg.
the input field defaults to the number 1.
But if I enter, say, 100 in the quantity field, I would like to immediately see how the cost changes, namely: I entered 100 and the price immediately changed to 10,000.
But that's not all :
Now my woocommerce considers the cost of the ordered goods in this way (step by step):
The price of the goods is 100 rubles. and the customer sees this price in the product card.
The customer enters the required quantity of goods (but the price in the goods card does not change). In order to see the total cost, you need to go to the basket.
And only there, the customer sees the size of the total amount for his order and the size of the discount.
Now the question is:
How to display the price depending on the quantity of goods directly in the product card?
Other stovami:
the cost of the goods is 100 rubles.
I enter 10 in the product card
and the price immediately changes to 1000 rubles.
But if I enter 11
, then the price changes to 999 rubles (and the text: your discount is 1 rub.)
If it is important, then to implement discounts, I used WooCommerce Bulk Discount

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel, 2016-11-22
@Palych_tw

6e41f69aee52432fb5aa4bfcee10bb4c.png
Is this option right for you? I can send you the finished code.
UPD. You need to override the quantity-input.php template (copy to your theme)... and paste this code into it

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
$post_type = get_post_type( $post_id );
if ($post_type=='product') {
global $product;
?>
<div class="quantity">
    Количество: <button type="button" id="remove_one">-</button><input type="text" 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" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" /><button type="button" id="add_one">+</button>
    <div class="order-summ">Сумма: <span id="orderSumm"><?php echo $product->get_price();?></span> грн.</div>
</div>
<script>
    var price = jQuery('#orderSumm').html();
    var quantity;
    var summ;
    jQuery('#remove_one').on('click',function(){
        quantity = jQuery('input.qty').val();
        if (quantity <= 1) {
            summ = price*quantity;
            jQuery('input.qty').val(quantity);
            jQuery('#orderSumm').html(summ);
        } else {
            quantity--;
            summ = price*quantity;
            jQuery('input.qty').val(quantity);
            jQuery('#orderSumm').html(summ);
        }
    });
    jQuery('#add_one').on('click',function(){
        quantity = jQuery('input.qty').val();
        quantity++;
        summ = price*quantity;
        jQuery('input.qty').val(quantity);
        jQuery('#orderSumm').html(summ);
    });
    jQuery('input.qty').keyup(function(){
        var removedText = $(this).val().replace(/\D/, '');
        jQuery(this).val(removedText);
        quantity = jQuery(this).val();
        summ = price*quantity;
        jQuery('input.qty').val(quantity);
        jQuery('#orderSumm').html(summ);
    });

</script>
<?php } else {?>
    <div class="quantity">
        <input 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" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
    </div>
<?php }?>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question