Worpress

Thay đổi page tracking order

Nguyen Eric
0
09/11/24
09/11/2024
Worpress

Copy toàn bộ code sau vào file tracking.php trong wp-content/plugin/wocommerce/order/tracking.php thay thế code cũ

/**
 * Order tracking
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/order/tracking.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 2.2.0
 */

defined( 'ABSPATH' ) || exit;

$notes = $order->get_customer_order_notes();
?>
<div class="tm_opcl trk ord_nb">
<div class="orid_st"><div class="opn"><strong>Mã đơn hàng</strong><br>
<span class="grn"><?php echo '<span class="order-date">' . $order->get_order_number() . '</span>'; ?></span></div>
<div class="bdct"></div>
<div class="cls"><strong>Trạng thái</strong><br>
	<strong><span class="grn"><?php echo '<mark class="ord_stt">'.wc_get_order_status_name( $order->get_status() ).'</mark>'; ?></span></strong></div></div>
	<div class="bdct"></div>
<div class="tm_ord"><strong>Thời gian đặt hàng</strong><br>
<span class="grn"><?php foreach ( $notes as $note ) : ?>
	<?php echo '' . wc_format_datetime( $order->get_date_created() ) . '' ?>
					<?php echo date_i18n( esc_html__( 'H:i:s', 'woocommerce' ), strtotime( $note->comment_date ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		<?php endforeach; ?></span></div>
</div>

<ul class="ord_details">
	<li>
		<?php esc_html_e( 'Tổng đơn hàng:', 'woocommerce' ); ?>
		<strong><?php echo wp_kses_post( $order->get_formatted_order_total() ); ?></strong>
	</li>
	<li>
		Thanh toán: 
		<?php echo esc_html( $order->get_payment_method_title() ); ?>
	</li>
	<li>
		Số điện thoại: 
		<strong><?php echo esc_html( $order->get_billing_phone() ); ?></strong>
	</li>
	<li>
		<strong><?php echo wp_kses_post( $order->get_formatted_billing_address( esc_html__( 'N/A', 'woocommerce' ) ) ); ?></strong>
	</li>
</ul>
<?php global $product;
 $statuses = array( 'pending', 'on-hold', 'processing' ); // Define order statuses
    if ($order->has_status($statuses) ) {
        printf('<a href="%s" class="woocommerce-button cancel button">Hủy đơn</a>',
             esc_url( add_query_arg( 'cancel_order', $order->get_id() ) ) );
    } ;?>

<?php do_action( 'woocommerce_view_order', $order->get_id() ); ?>

Thêm css để đẹp ra

.tm_opcl{display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 5px;    margin: 10px;
    border-radius: 5px;
    background: #eeee;}

.opn,.cls{width: 49%; text-align: center;}
.grn{color:green;}
.tm_opcl strong {
font-weight:600;color:#222;}

.bdct{
border: 1px solid #000;
    margin: 5px 0;}

.orid_st{display: contents;}
.tm_ord{text-align: center;width:60%;}

Thêm css vào thiết bị hiển thị MOBI để tối ưu

.trk{display:block;}	
.orid_st{display:flex;}
.tm_ord {width: unset;}
}

THÀNH QUẢ …

Tags :
Tags: ,