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

در اکثرا فروشگاه های اینترنتی که با وردپرس-ووکامرس پیاده شده است در کنار محصول دکمه انتخاب تعداد محصول وجود دارد که کاربر هنگامی که بخواهد محصولی سفارش دهد , تعداد محصول آن را انتخاب کند.
افزونه هایی برای این کار وجود دارد و اما می خواهیم بدون افزونه با کد دکمه انتخاب تعداد محصولات در ووکامرس اضافه کنیم.
کافیه کد زیر در فایل 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;
}
پیش نمایش:

موفق باشید 🙂