نحوه افزودن فرم به صفحه محصول ووکامرس

آیا می خواهید فرم سفارشی را در صفحه محصول اضافه کنید؟ بخوانید ، زیرا این پست قصد دارد راه حلی را برای شما ارائه دهد.

ووکامرس به دلیل انعطاف پذیری در سفارشی سازی ، به قدرت بسیاری از فروشگاه ها ادامه می دهد. به عنوان مثال ، ممکن است بخواهید اطلاعات اضافی را به صفحه محصول خود اضافه کنید. بهترین راه برای پیاده سازی این امر افزودن فیلدهای سفارشی به محصولات است.

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

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

با این حال ، ووکامرس راه حل داخلی برای افزودن این ویژگی ندارد. این بدان معناست که ما برای دستیابی به این هدف باید قطعه کد سفارشی ایجاد کنیم. ما افزونه ها را تنها زمانی توصیه می کنیم که تغییرات عمده ای را در سایت خود بخواهید.

ووکامرس فرم را به صفحه محصول اضافه کنید

در آموزش امروز ، ما یک قطعه کد سفارشی را که برای افزودن یک فرم شامل دو فیلد ایجاد کرده ایم ، به اشتراک می گذاریم. ما یک فیلد نام و پیام قرار می دهیم و داده های فیلدها را به عنوان متا مورد Cart و متا مورد سفارش نمایش می دهیم. این بدان معناست که در طول چرخه سفارش نمایش داده می شود.

قبل از ادامه کار ، توصیه می کنیم تم کودک را ایجاد یا ایجاد کنید. این به این دلیل است که ما برخی از فایل های اصلی را اصلاح می کنیم. تم کودک اطمینان حاصل می کند که تغییرات در حین بروزرسانی از بین نمی روند.

اجازه دهید ما مستقیماً وارد آن شویم.

مراحل افزودن فرم به صفحه محصول ووکامرس

در اینجا مراحلی وجود دارد که باید دنبال کنید:

• ابتدا وارد حساب کاربری سایت وردپرس خود شوید و به پنل مدیریت کل بروید.
• از منوی داشبورد ، روی آن کلیک کنید منوی ظاهر> منوی ویرایشگر تم به وقتی صفحه ویرایشگر تم باز شد ، به دنبال فایل توابع موضوع باشید تا عملکرد را به آن اضافه کنید فرم را به صفحه محصول ووکامرس اضافه کنید
• کد زیر را اضافه کنید به php فایل :

add_action( 'woocommerce_before_add_to_cart_button', 'sevencloner_fields_before_add_to_cart' );
function sevencloner_fields_before_add_to_cart( ) {
    ?>
    <table>
        <tr>
            <td>
               <?php _e( "Name:", "aoim"); ?>
            </td>
            <td>
                <input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
            </td>
        <tr>
        <tr>
            <td>
                <?php _e( "Message:", "aoim"); ?>
            </td>
            <td>
                <input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
            </td>
        </tr>
    </table>
    <?php
}


/**
 * افزودن داده ها به مورد سبد خرید
 */
add_filter( 'woocommerce_add_cart_item_data', 'sevencloner_cart_item_data', 25, 2 );
function sevencloner_cart_item_data( $cart_item_meta, $product_id ) {
    if ( isset( $_POST ['customer_name'] ) && isset( $_POST ['customer_message'] ) ) {
        $custom_data  = array() ;
        $custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
        $custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
        $cart_item_meta ['custom_data']     = $custom_data ;
    }
        return $cart_item_meta;
}



/**
 * نمایش داده های سفارشی در سبد خرید و صفحه پرداخت
 */
add_filter( 'woocommerce_get_item_data', 'sevencloner_item_data' , 25, 2 );
function sevencloner_item_data ( $other_data, $cart_item ) {
    if ( isset( $cart_item [ 'custom_data' ] ) ) {
        $custom_data  = $cart_item [ 'custom_data' ];
                $other_data[] =   array( 
                     'name' =>  'Name',
                     'display'  => $custom_data['customer_name']
                 );
        $other_data[] =   array(
                     'name' =>  'Message',
                     'display'  => $custom_data['customer_message']
                 );
    }
        return $other_data;
}


/**
 *متا مورد سفارش را اضافه کنید
 */
add_action( 'woocommerce_add_order_item_meta', 'sevencloner_order_item_meta' , 10, 2);
function sevencloner_order_item_meta ( $item_id, $values ) {
    if ( isset( $values [ 'custom_data' ] ) ) {
        $custom_data  = $values [ 'custom_data' ];
        wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
        wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
    }
}

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

بسته شدن

در آموزش امروز ، ما یک راه حل سفارشی که برای افزودن فرم در صفحه محصول ایجاد کرده ایم ، به اشتراک گذاشته ایم. همانطور که در این پست نشان داده ایم ، جزئیات جمع آوری شده در سراسر جزئیات سفارش ظاهر می شود.

با این حال ، هنگام ویرایش فایل های اصلی فروشگاه ووکامرس خود باید بسیار مراقب باشید. در صورت اشتباه ، خطایی نمایش داده می شود.

امیدواریم این راه حل به شما در درک نحوه عملکرد چرخه سفارش کمک کرده باشد.