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

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

در این آموزش، صفحه سفارش‌های حساب کاربری را به‌گونه‌ای تغییر می‌دهیم که:

• تصویر محصولات هر سفارش نمایش داده شود.
• دکمه «سفارش دوباره» به هر سفارش اضافه شود.
• محصولات سفارش با قیمت فعلی فروشگاه وارد سبد خرید شوند.

این قابلیت به‌خصوص برای فروشگاه‌هایی که محصولات مصرفی، آرایشی، خوراکی یا محصولات دارای خرید مجدد می‌فروشند، کاربرد زیادی دارد. 

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

/**
 * نمایش محصولات در لیست سفارش‌های حساب کاربری
 * + افزودن دکمه سفارش دوباره با قیمت روز
 */

/**
 * اضافه‌کردن ستون محصولات بعد از ستون شماره سفارش
 */
add_filter( 'woocommerce_account_orders_columns', function ( $columns ) {

    $new_columns = array();

    foreach ( $columns as $column_id => $column_title ) {
        $new_columns[ $column_id ] = $column_title;

        if ( 'order-number' === $column_id ) {
            $new_columns['order-products'] = 'محصولات';
        }
    }

    return $new_columns;
} );


/**
 * نمایش تصویر، نام و تعداد محصولات هر سفارش
 */
add_action(
    'woocommerce_my_account_my_orders_column_order-products',
    function ( $order ) {

        if ( ! $order instanceof WC_Order ) {
            return;
        }

        $items = $order->get_items( 'line_item' );

        if ( empty( $items ) ) {
            echo '—';
            return;
        }

        echo '<div class="mv-order-items">';

        foreach ( $items as $item ) {

            $product      = $item->get_product();
            $product_name = $item->get_name();
            $quantity     = $item->get_quantity();

            if ( $product ) {
                $image_html = $product->get_image(
                    'woocommerce_thumbnail',
                    array(
                        'loading' => 'lazy',
                        'alt'     => $product_name,
                    )
                );

                $product_url = $product->is_visible()
                    ? $product->get_permalink()
                    : '';
            } else {
                $image_html = wc_placeholder_img(
                    'woocommerce_thumbnail',
                    array(
                        'alt' => $product_name,
                    )
                );

                $product_url = '';
            }

            echo '<div class="mv-order-item">';

            echo '<div class="mv-order-item__image">';

            if ( $product_url ) {
                echo '<a href="' . esc_url( $product_url ) . '">';
            }

            echo wp_kses_post( $image_html );

            if ( $product_url ) {
                echo '</a>';
            }

            echo '</div>';

            echo '<div class="mv-order-item__content">';

            if ( $product_url ) {
                echo '<a class="mv-order-item__name" href="' . esc_url( $product_url ) . '">';
                echo esc_html( $product_name );
                echo '</a>';
            } else {
                echo '<span class="mv-order-item__name">';
                echo esc_html( $product_name );
                echo '</span>';
            }

            echo '<span class="mv-order-item__quantity">';
            echo 'تعداد: ' . esc_html( $quantity );
            echo '</span>';

            echo '</div>';
            echo '</div>';
        }

        echo '</div>';
    }
);


/**
 * فعال‌کردن سفارش دوباره برای وضعیت‌های موردنیاز
 * مخصوصاً سفارش‌های لغوشده موجود در تصویر
 */
add_filter(
    'woocommerce_valid_order_statuses_for_order_again',
    function ( $statuses ) {

        $additional_statuses = array(
            'processing',
            'on-hold',
            'cancelled',
            'refunded',
            'failed',
        );

        return array_unique(
            array_merge( $statuses, $additional_statuses )
        );
    }
);


/**
 * اضافه‌کردن دکمه سفارش دوباره به ستون عملیات
 */
add_filter(
    'woocommerce_my_account_my_orders_actions',
    function ( $actions, $order ) {

        if ( ! $order instanceof WC_Order ) {
            return $actions;
        }

        $valid_statuses = apply_filters(
            'woocommerce_valid_order_statuses_for_order_again',
            array( 'completed' )
        );

        if ( ! $order->has_status( $valid_statuses ) ) {
            return $actions;
        }

        $order_again_url = wp_nonce_url(
            add_query_arg(
                'order_again',
                $order->get_id(),
                wc_get_cart_url()
            ),
            'woocommerce-order_again'
        );

        $actions['order-again'] = array(
            'url'        => $order_again_url,
            'name'       => 'سفارش دوباره',
            'aria-label' => sprintf(
                'سفارش دوباره سفارش شماره %s',
                $order->get_order_number()
            ),
        );

        return $actions;
    },
    20,
    2
);


/**
 * استایل نمایش محصولات در جدول سفارش‌ها
 */
add_action( 'wp_enqueue_scripts', function () {

    if ( ! function_exists( 'is_account_page' ) || ! is_account_page() ) {
        return;
    }

    wp_register_style(
        'mv-account-orders',
        false,
        array(),
        '1.0.0'
    );

    wp_enqueue_style( 'mv-account-orders' );

       $css = '
    .woocommerce-orders-table__header-order-products {
        min-width: 280px;
    }

    .woocommerce-orders-table__cell-order-products .mv-order-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
        width: 280px;
        min-width: 0;
    }

    .woocommerce-orders-table .mv-order-item {
        display: flex;
        flex: 0 0 62px;
        width: 62px;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .woocommerce-orders-table .mv-order-item__image {
        width: 55px;
        height: 55px;
        min-width: 55px;
        overflow: hidden;
        border: 1px solid #eeeeee;
        border-radius: 7px;
        background: #ffffff;
    }

    .woocommerce-orders-table .mv-order-item__image img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
    }

    .woocommerce-orders-table .mv-order-item__content {
        display: block;
        width: 62px;
        min-width: 0;
        text-align: center;
    }

    .woocommerce-orders-table .mv-order-item__name {
        display: block;
        width: 100%;
        overflow: hidden;
        color: #444444;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .woocommerce-orders-table .mv-order-item__name:hover {
        color: var(--wd-primary-color, #c6538c);
    }

    .woocommerce-orders-table .mv-order-item__quantity {
        display: block;
        margin-top: 2px;
        color: #888888;
        font-size: 9px;
        line-height: 1.4;
    }

    .woocommerce-orders-table .button.order-again {
        margin-top: 5px;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        .woocommerce-orders-table__cell-order-products {
            display: flex !important;
            align-items: flex-start;
        }

        .woocommerce-orders-table__cell-order-products::before {
            flex: 0 0 28%;
        }

        .woocommerce-orders-table__cell-order-products .mv-order-items {
            flex: 1;
            width: auto;
            min-width: 0;
            justify-content: flex-start;
            gap: 8px;
            text-align: right;
        }

        .woocommerce-orders-table .mv-order-item {
            flex-basis: 58px;
            width: 58px;
        }

        .woocommerce-orders-table .mv-order-item__image {
            width: 50px;
            height: 50px;
            min-width: 50px;
        }

        .woocommerce-orders-table .mv-order-item__content {
            width: 58px;
        }
    }
';
    

    wp_add_inline_style( 'mv-account-orders', $css );
} );

 

 

نکات مهم بعد از نصب

بعد از فعال‌کردن کد، اقدامات زیر را انجام دهید:

• کش افزونه‌های بهینه‌سازی را پاک کنید.
• در صورت استفاده از قالب‌هایی مانند Woodmart، کش قالب را نیز پاک کنید.
• با یک حساب مشتری وارد سایت شوید.
• وارد بخش «حساب کاربری ← سفارش‌ها» شوید.
• نمایش تصاویر و دکمه سفارش دوباره را آزمایش کنید.
• قیمت محصولات سبد خرید را با قیمت فعلی فروشگاه مقایسه کنید.