×

❤آموزش ایجاد دکمه های افزایش و کاهش تعداد محصول در ووکامرس❤

در این مطلب میخوانید:

دکمه تعداد

همانطور که میدونید مقدار دهی محصول در ووکامرس بصورت پیشفرض بدون دکمه است شاید این موضوع در دسکتاپ چندان حائز اهمیت نباشه ولی برای کاربران موبایل مناسب نیست و تعداد دهی رو کمی مشکل میکنه. برای ایجاد دکمه های افزایش و کاهش تعداد نیازی به نصب افزونه نیست و کافیه طبق مراحل زیر عمل کنید

قبل از شروع حتماً از سایتتون بک آپ تهیه کنید !

مراحل رو قدم به قدم انجام بدید تا مشکلی پیش نیاد

قدم اول: نصب چایلد تم Child Theme

برای اینکه کد ها با آپدیت قالب یا افزونه از بین نرن حتماً از چایلد تم استفاده کنید

برای نصب چایلد تم میتونید از پلاگین Child Theme Configurator استفاده کنید و بعد از ساخت چایلد تم و فعال کردنش پلاگینو حذف کنید و یا اگه دانششو دارید بصورت دستی چایلد تمتونو بسازید

قدم دوم: انتقال فایل ووکامرس

برای تغییر کد های ووکامرس لازمه که فایل اون بخش رو به چایلد تم انتقال بدید و ویرایش کنید

از هاستتون به مسیر زیر برید و فایل quantity-input.php رو کپی کنید

YourSite\wp-content\plugins\woocommerce\templates\global\quantity-input.php

از مسیر زیر وارد پوشه چایلد تمتون بشید

YourSite\wp-content\themes\Yourtheme-child

و پوشه جدیدی با نام woocommerce ایجاد کنید و داخل این پوشه ووکامرس پوشه دیگه ای با نام global ایجاد کنید و فایلی که مراحل قبل کپی کردین رو اینجا قرار بدین مسیر نهایی شما باید بصورت زیر باشه

YourSite\wp-content\themes\Yourtheme-child\woocommerce\global\quantity-input.php

قدم سوم: ویرایش کدها

در منوی وردپرس رو نمایش و بعد ویرایش پرونده پوسته کلیک کنید

از منوی سمت چپ روی woocommerce و global و بعد روی quantity-input.php کلیک کنید

دنبال div با کلاس quantity بگردید (در انتهای فایل آخرین دیو میباشد) و کد زیر را جایگزین کل دیو قبلی کنید


<div class="quantity">
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
    <input type="button" value="-" class="qty_button minus" />
    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="input-text qty text"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $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' ); ?>"
        size="4"
        pattern="<?php echo esc_attr( $pattern ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>"
        aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
    <input type="button" value="+" class="qty_button plus" />
</div>

قدم چهارم: اضافه کردن جاوا اسکریپت

حالا نوبت کدهای جاوا اسکریپت ماست

در همان صفحه ویرایشگر پوسته از منوی سمت چپ روی functions.php کلیک کنید و کد زیر را در داخل تگ php جایگذاری کنید

add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
    jQuery( function( $ ) {
        if ( ! String.prototype.getDecimals ) {
            String.prototype.getDecimals = function() {
                var num = this,
                    match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                if ( ! match ) {
                    return 0;
                }
                return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
            }
        }
        // Quantity "plus" and "minus" buttons
        $( document.body ).on( 'click', '.plus, .minus', function() {
            var $qty        = $( this ).closest( '.quantity' ).find( '.qty'),
                currentVal  = parseFloat( $qty.val() ),
                max         = parseFloat( $qty.attr( 'max' ) ),
                min         = parseFloat( $qty.attr( 'min' ) ),
                step        = $qty.attr( 'step' );

            // Format values
            if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
            if ( max === '' || max === 'NaN' ) max = '';
            if ( min === '' || min === 'NaN' ) min = 0;
            if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

            // Change the value
            if ( $( this ).is( '.plus' ) ) {
                if ( max && ( currentVal >= max ) ) {
                    $qty.val( max );
                } else {
                    $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            } else {
                if ( min && ( currentVal <= min ) ) {
                    $qty.val( min );
                } else if ( currentVal > 0 ) {
                    $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            }

            // Trigger change event
            $qty.trigger( 'change' );
        });
    });
    </script>
    <?php
}

قدم پنجم:استایل دهی با css

کد های زیر رو میتونید در یکی از دو مسیر زیر قرار بدید

مسیر اول: از منوی سمت چپ همون صفحه روی style.css کلیک کنید و کد هارو پیست کنید

مسیر دوم: از منوی وردپرس وارد بخش نمایش و بعد سفارشی سازی بشید و در صفحه باز شده کد هارو در بخش css اضافی پیست کنید

.qty_button.minus,.qty_button.plus{
border-radius:20px;
	border:none;
	background-color:#0083ff;
width: 100%;
	color:white;
}

.woocommerce-cart .quantity input.qty {
    height: 20px;
    border: none;
}

.woocommerce div.product .summary.entry-summary form.cart .quantity .qty{
    width: 50%;
    float: right;
	border-radius:0;
	border:none;
}

.woocommerce div.product .summary.entry-summary form.cart .quantity {
    width: 100%;
    align-items: center!important;
    justify-content: center!important;
    display: flex;
	    height: 24px;
    margin: 10px;
}
.quantity{
	display:flex;
}

البته شما میتونید کد های css رو به سلیقه خودتون تغییر بدید تا به استایل مورد نظرتون برسید

چنانچه سوالی داشتید از بخش کامنت بپرسید ❤

علیرضا علی نیا

علیرضا علی نیا

دنیای وب مثل صفحه شطرنجه و منم یه سرباز که روز به روز به خونه آخر نزدیکتر میشه...
تلگرام
واتساپ
ایمیل
Pinterest
Reddit
پرینت

2 پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *