ایجاد دکمه انتخاب تعداد محصولات در ووکامرس

در اکثرا فروشگاه های اینترنتی که با وردپرس-ووکامرس پیاده شده است در کنار محصول دکمه انتخاب تعداد محصول وجود دارد که کاربر هنگامی که بخواهد محصولی سفارش دهد , تعداد محصول آن را انتخاب کند.

افزونه هایی برای این کار وجود دارد و اما می خواهیم بدون افزونه با کد دکمه انتخاب تعداد محصولات در ووکامرس اضافه کنیم.

کافیه کد زیر در فایل single-product.php در جایی مناسب قرار دهید:

<?php
    global $product; 
    if( $product->get_price() === '' && $product->product_type != 'external' ) return;
?>  
<?php if ( ! $product->is_in_stock() ) : ?>	
        <a href="<?php echo get_permalink($product->id); ?>" class="button"><?php echo apply_filters('out_of_stock_add_to_cart_text', __('Read More', 'woocommerce')); ?></a>
<?php else : ?>
<?php 
    switch ( $product->product_type ) {
        case "variable" :
            $link 	= get_permalink($product->id);
            $label 	= apply_filters('variable_add_to_cart_text', __('Select options', 'woocommerce'));
        break;
        case "grouped" :
            $link 	= get_permalink($product->id);
            $label 	= apply_filters('grouped_add_to_cart_text', __('View options', 'woocommerce'));
        break;
        case "external" :
            $link 	= get_permalink($product->id);
            $label 	= apply_filters('external_add_to_cart_text', __('Read More', 'woocommerce'));
        break;
        default :
            $link 	= esc_url( $product->add_to_cart_url() );
            $label 	= apply_filters('add_to_cart_text', __('Add to cart', 'woocommerce'));
        break;
    }									
    if ( $product->product_type == 'simple' ) {
        ?>
        <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
            <?php woocommerce_quantity_input(); ?>
            <button type="submit" class="btn btn-success"><i class="fas fa-shopping-basket"></i> <?php echo $label; ?></button>
        </form>
        <?php
        
    } else {
        printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label);
    }
?> 
<?php endif; ?>

و کد CSS آن :

[type=number]{
    text-align: right;
    direction: rtl;
    padding: 5px;
    width: 60px;
}
form.cart {
    display: flex;
}
.quantity {
    margin-left: 10px;
}

پیش نمایش:

موفق باشید 🙂

7