Добавим сверху фильтры и изображение товаров.
Добавьте сниппет-код:
// --- Отображение миниатюры продукта на страницах просмотра заказов Woocommerce
add_filter( 'woocommerce_order_item_name', 'wpsh_display_product_image_in_order_item', 20, 3 );
function wpsh_display_product_image_in_order_item( $item_name, $item, $is_visible ) {
if( is_wc_endpoint_url( 'view-order' ) ) {
$product = $item->get_product();
if( $product && $product->get_image_id() > 0 ) {
$thumbnail = $product->get_image( array( 50, 50 ), false, array( 'class' => 'item-thumbnail' ) );
$item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;
}
}
return $item_name;
}
// --- Показать, как отображать название и количество товаров в новой колонке
add_filter( 'woocommerce_account_orders_columns', 'wpsh_product_column', 10, 1 );
function wpsh_product_column( $columns ) {
$new_columns = [];
foreach ( $columns as $key => $name ) {
$new_columns[ $key ] = $name;
if ( 'order-status' === $key ) {
$new_columns['order-items'] = __( 'Товар', 'woocommerce' );
}
}
return $new_columns;
}
add_action( 'woocommerce_my_account_my_orders_column_order-items', 'wpsh_product_column_content', 10, 1 );
function wpsh_product_column_content( $order ) {
$details = array();
foreach( $order->get_items() as $item ) {
$product = $item->get_product();
if ( $product ) {
$thumbnail = $product->get_image( array( 50, 50 ), false, array( 'class' => 'attachment-50x50 size-50x50 item-thumbnail' ) );
$details[] = $thumbnail . ' ' . esc_html( $item->get_name() ) . ' × ' . intval( $item->get_quantity() );
}
}
echo count( $details ) > 0 ? implode( '<br>', $details ) : '–';
}
// --- Фильтр заказов по статусу
add_filter( 'woocommerce_my_account_my_orders_query', 'avs_my_account_orders_filter_by_status' );
function avs_my_account_orders_filter_by_status( $args ) {
if ( isset( $_GET['status'] ) && ! empty( $_GET['status'] ) ) {
$args['status'] = array( $_GET['status'] );
}
return $args;
}
add_action( 'woocommerce_before_account_orders', 'avs_my_account_orders_filters' );
function avs_my_account_orders_filters() {
echo '<div class="order-status-filters">';
// Сначала "Все заказы"
$statuses = wc_get_order_statuses();
$current_status = isset($_GET['status']) ? $_GET['status'] : '';
$filters = [];
// "Все заказы"
$filters[] = '<a class="order-status-filter-link' . (empty($current_status) ? ' active' : '') . '" href="' . esc_url(remove_query_arg('status')) . '">Все заказы</a>';
// Остальные статусы
foreach ($statuses as $slug => $name) {
$status_orders = count(wc_get_orders([
'status' => $slug,
'customer' => get_current_user_id(),
'limit' => -1
]));
if ($status_orders > 0) {
$filters[] = '<a class="order-status-filter-link' . ($current_status === $slug ? ' active' : '') . '" href="' . esc_url(add_query_arg('status', $slug, wc_get_endpoint_url('orders'))) . '">' . esc_html($name) . '</a>';
}
}
echo implode('<span class="delimit"> - </span>', $filters);
echo '</div>';
}И добавим немного красоты css на страницу Мой аккаунт
selector .item-thumbnail img{border-radius:6px;object-fit: cover;}
selector img.attachment-50x50, img.size-50x50{border-radius:6px;object-fit: cover;}
selector img.woocommerce-placeholder.wp-post-image{border-radius: 6px;height:50px;object-fit: cover;}
.order-status-filters {display: flex;flex-wrap: wrap;font-weight: bold;margin-bottom: 30px;gap: 4px 8px;}
.order-status-filter-link {padding: 2px 8px;border-radius:4px;margin: 2px 0;}
.order-status-filter-link.active {color: #fff!important;background: #7f951e;pointer-events:none;}
a.order-status-filter-link:hover {background-color:#D9E3AA;}
.order-status-filters .delimit:last-child {display:none;}