File: /var/www/html/CW-techs/wp-content/themes/cw-techs/woocommerce/myaccount/my-account.php
<?php ob_end_flush(); ?>
<?php
/**
* Template Name: Custom My Account Page
* This template overrides the WooCommerce My Account page with a custom design.
* Place this file in: your-child-theme/woocommerce/myaccount/my-account.php
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
$current_user = wp_get_current_user();
get_header();
?>
<div class="common-outer">
<section class="my-account-sec px-common">
<div class="container custom-container">
<div class="my-account-header-wrapper">
<div class="back-btn-block">
<a class="back-btn" href="#">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/back-btn.svg" alt=""> Back to home
</a>
</div>
<div class="account-header">
<h2 class="title mb-0">My <span class="color">Account</span></h2>
</div>
<div class="btn-block-right">
<button class="accnt-btn" data-bs-toggle="modal" data-bs-target="#removeDeleteModal">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/del-white.svg" alt=""> Delete Account
</button>
<a class="accnt-btn" href="<?php echo esc_url(wp_logout_url(home_url())); ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logout-white.svg" alt=""> Log Out
</a>
</div>
</div>
<div class="account-wrapper d-flex">
<div class="account-left-col">
<div class="account-left-cover">
<div class="usr-img-block">
<div class="usr-img-cover">
<img class="user-img" id="profile-picture" src="<?php
$profile_pic = get_user_meta(get_current_user_id(), 'profile_picture', true);
echo $profile_pic ? esc_url($profile_pic) : get_stylesheet_directory_uri() . '/img/user.png';
?>" alt="">
<div class="edit-block">
<form id="uploadProfileImageForm" enctype="multipart/form-data">
<label class="file-label" for="img">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/camera.svg" alt="">
<!-- <input class="inp-file" type="file" id="img" name="img" accept="image/*"> -->
<input class="inp-file" type="file" id="img" name="profile_image" accept="image/*">
</label>
</form>
</div>
</div>
</div>
<div class="inp-data-wrapper">
<div class="inp-data-block">
<div class="op-label">
<span class="icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/acc-1.svg" alt="">
</span>
Name
</div>
<p class="op-name"><?php echo esc_html($current_user->display_name); ?></p>
</div>
<div class="inp-data-block">
<div class="op-label">
<span class="icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/acc-2.svg" alt="">
</span>
Email ID
</div>
<p class="op-name"><?php echo esc_html($current_user->user_email); ?></p>
</div>
<div class="inp-data-block">
<div class="op-label">
<span class="icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/acc-3.svg" alt="">
</span>
Phone Number
</div>
<p class="op-name"><?php echo esc_html($current_user->phone_country_code); ?> <?php echo esc_html($current_user->phone); ?></p>
</div>
</div>
<div class="acc-btn-wrapper">
<button class="acc-btn" data-bs-toggle="modal" data-bs-target="#ChanagePasswordModal">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/lock-wht.svg" alt=""> Change Password
</button>
<button class="acc-btn" data-bs-toggle="modal" data-bs-target="#editProfileModal">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/edi-wht.svg" alt=""> Edit Profile
</button>
</div>
</div>
</div>
<div class="account-right-col">
<div class="account-det-cover">
<ul class="nav nav-pills account-tab-btn-wrapper" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">Saved Addresses</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">My Orders</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="address-wrapper">
<div class="row">
<?php
if ( is_user_logged_in() ) {
$user_id = get_current_user_id();
$saved_addresses = get_user_meta($user_id, 'saved_addresses', true);
$saved_addresses = is_array($saved_addresses) ? $saved_addresses : [];
if (!empty($saved_addresses)) {
foreach ($saved_addresses as $i => $addr) {
$label = isset($addr['label']) ? $addr['label'] : 'Address ' . ($i + 1);
$full_address = $addr['label'].', '.$addr['address_line'] . ', ' . $addr['city'] . ', ' . $addr['state'] . ', ' . $addr['postcode'] . ', ' . $addr['country'];
?>
<div class="col-xl-4 col-lg-6 col-md-12 address-col">
<div class="address-card">
<!-- <span class="primary"><?php echo esc_html($label); ?></span> -->
<div class="top-block">
<div class="loc-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/loc-sqr.svg" alt="">
</div>
<p><?php echo esc_html($full_address); ?></p>
</div>
<div class="btn-block">
<a href="#" class="edit-addrs-btn update-addrs-btn"
data-index="<?php echo esc_attr($i); ?>"
data-address='<?php echo json_encode($addr); ?>'>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/edi-wht.svg" alt=""> Edit Address
</a>
<a data-bs-toggle="modal" data-bs-target="#removeAddressModal" href="#" class="edit-addrs-btn" data-index="<?php echo esc_attr($i); ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/del-white.svg" alt=""> Delete
</a>
</div>
</div>
</div>
<?php
}
}
// else {
// echo '<section class="no-data">
// <div class="no-data-img"><img src="' . get_stylesheet_directory_uri() . '/img/no-data-img.svg" alt="no-data"></div>
// <p class="no-msg">You have no saved addresses yet.</p>
// </section>';
// }
}
?>
<!-- Add New Address Button -->
<div class="col-xl-4 col-lg-12 col-md-12 address-col">
<div class="address-card p-0">
<button class="add-addrs-btn" title="Add New Address">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/add-lg.svg" alt="Add Address">
</button>
</div>
</div>
<?php if (empty($saved_addresses)) { ?>
<section class="no-data">
<div class="no-data-img">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/no-data-img.svg" alt="no-data">
</div>
<p class="no-msg">You have no saved addresses yet.</p>
</section>
<?php } ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="my-order-cover">
<?php
if ( is_user_logged_in() ) {
$customer_orders = wc_get_orders([
'limit' => -1,
'customer_id' => get_current_user_id(),
'orderby' => 'date',
'order' => 'DESC',
]);
if ( !empty($customer_orders) ) {
foreach ( $customer_orders as $order ) {
$order_id = $order->get_id();
$items = $order->get_items();
$billing_address = $order->get_formatted_billing_address();
$status = wc_get_order_status_name( $order->get_status() );
$total = $order->get_formatted_order_total();
$delivered_date = $order->get_date_completed();
?>
<div class="my-order-card">
<div class="drop-inner">
<div class="dropdown">
<button class="btn three-dots-btn" type="button" id="dropdownMenuButton<?php echo $order_id; ?>" data-bs-toggle="dropdown" aria-expanded="false">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</button>
<ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdownMenuButton<?php echo $order_id; ?>">
<li><button class="dropdown-item btn btn-outline-danger">Cancel</button></li>
<li><button class="dropdown-item btn btn-outline-primary">Return</button></li>
</ul>
</div>
</div>
<?php foreach ( $items as $item_id => $item ) {
$product = $item->get_product();
if ( ! $product ) continue;
$product_color = get_post_meta($product->get_id(), 'product_color', true);
$product_spec = get_post_meta($product->get_id(), 'product_specification', true);
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
$product_price = (float) $item->get_total(); // Total = price × quantity
$quantity = (int) $item->get_quantity();
$order_date = $order->get_date_created()->format('d M Y');
$status = ucfirst($order->get_status());
$billing_address = $order->get_formatted_billing_address();
// Discount percent
$discount_percent = 0;
if ($regular_price > 0 && $regular_price > $product_price) {
$discount_percent = round((($regular_price - $product_price) / $regular_price) * 100);
}
?>
<div class="product-inner d-flex">
<div class="prod-img-block">
<div class="prod-img">
<?php echo $product->get_image(); ?>
</div>
</div>
<div class="prod-det-block">
<h4 class="prod-name"><?php echo esc_html( $product->get_name() ); ?></h4>
<div class="prod-sm-det-wrapper">
<?php
$brand = $product->get_attribute('product_brand');
$variant = $product->get_attribute('variant');
$subcategory = $product->get_attribute('pa_subcategory');
?>
<span class="prod-card-sm"><?php echo esc_html( $product_color ); ?></span>
<span class="prod-card-sm"><?php echo esc_html( $product_spec ); ?></span>
<!-- <span class="prod-card-sm"><?php echo esc_html( $subcategory ); ?></span> -->
<span class="prod-card-sm bold-600">₹<?php echo esc_html(number_format($product_price, 2)); ?>
<?php if ($regular_price && $regular_price > $product_price): ?>
<span class="prod-price">₹<?php echo esc_html(number_format($regular_price, 2)); ?></span>
<span class="offr-perct"><?php echo esc_html($discount_percent); ?>%</span>
<?php endif; ?>
</span>
<span class="prod-card-sm">Qty : <?php echo esc_html($quantity); ?></span>
<span class="prod-card-sm"><?php echo esc_html($order_date); ?></span>
<span class="prod-card-sm status"><?php echo esc_html($status); ?></span>
<button class="prod-card-sm download-btn" onclick="window.open('<?php echo esc_url( $order->get_view_order_url() ); ?>')">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/cart-dwnlod.svg" alt=""> Download invoice
</button>
</div>
<div class="deliver-address">
<?php echo wp_kses_post( $billing_address ); ?>
</div>
</div>
</div>
<?php } ?>
</div>
<?php
}
}else{?>
<section class="no-data">
<div class="no-data-img">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/no-data-img.svg" alt="no-data">
</div>
<p class="no-msg">You have no orders yet.</p>
</section>
<?php
}
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-------------------------------Chanage password modal-------------------------------------------->
<div class="modal fade edit-profile" id="ChanagePasswordModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editProfileModalLabel">
<span>CHANGE</span> <span class="txt">PASSWORD</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="sub-text">Update your personal information and keep your profile current.</p>
<form class="edit-form" id="password-form" data-parsley-validate>
<div class="form-group">
<label class="form-label">Current Password</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/lock-icon.svg" alt="lock">
</span>
<input type="password" name="current_password" class="form-control" placeholder="Enter your current password" required data-parsley-required-message="Current password is required." data-parsley-length-message="Password must be between 8 and 20 characters long.">
<span class="form-icon eye-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
</span>
</div>
</div>
<div class="form-group">
<label class="form-label">New Password</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/lock-icon.svg" alt="lock">
</span>
<input type="password" name="new_password" class="form-control" placeholder="Enter your new password" required data-parsley-minlength="6" data-parsley-required-message="New password is required." data-parsley-length-message="Password must be between 8 and 20 characters long." data-parsley-minlength-message="New password must be at least 6 characters long.">
<span class="form-icon eye-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
</span>
</div>
</div>
<div class="form-group">
<label class="form-label">Confirm New Password</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/lock-icon.svg" alt="lock">
</span>
<input type="password" name="confirm_password" class="form-control" placeholder="Confirm your new password"
required data-parsley-equalto="[name='new_password']"
data-parsley-required-message="Confirm your new password."
data-parsley-length-message="Password must be between 8 and 20 characters long."
data-parsley-equalto-message="Passwords do not match.">
<span class="form-icon eye-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn remove" id="chngepswd-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!----------------------------Edit Account------------------------------------------->
<?php
$current_user = wp_get_current_user();
$first_name = esc_attr($current_user->first_name);
$last_name = esc_attr($current_user->last_name);
$email = esc_attr($current_user->user_email);
?>
<div class="modal fade edit-profile" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editProfileModalLabel">
<span>EDIT</span> <span class="txt">PROFILE</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="sub-text">Update your personal information and keep your profile current.</p>
<form class="edit-form" id="edit-profile-form" data-parsley-validate>
<div class="form-group">
<label class="form-label">First Name</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/person.svg" alt="person">
</span>
<input class="form-control" type="text" autocomplete="off" maxlength="50" name="first_name" value="<?php echo $first_name; ?>"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$" required data-parsley-trigger="change"
data-parsley-required-message="First name is required."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
oninput="validateName(this)" placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label class="form-label">Last Name</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/person.svg" alt="person">
</span>
<input class="form-control" type="text" autocomplete="off" maxlength="50" name="last_name" value="<?php echo $last_name; ?>"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$" required data-parsley-trigger="change"
data-parsley-required-message="Last name is required."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
oninput="validateName(this)" placeholder="Enter your last name">
</div>
</div>
<?php
$current_user = wp_get_current_user();
$country_code = get_user_meta($current_user->ID, 'phone_country_code', true);
$phone = get_user_meta($current_user->ID, 'phone', true);
?>
<div class="form-group">
<label class="form-label">Phone Number</label>
<div class="input-grp">
<select class="form-select" name="country_code" style="max-width: 80px;" required data-parsley-required-message="Please select country code.">
<?php
global $country_codes;
foreach ($country_codes as $code => $label) {
echo '<option value="'.esc_attr($code).'" '.selected($country_code, $code, false).'>'.esc_html($code).'</option>';
}
?>
</select>
<input
class="form-control phone-number-input"
type="text"
maxlength="10"
autocomplete="off"
name="phone"
value="<?php echo esc_attr($phone); ?>"
required
data-parsley-pattern="^[0-9]{10}$"
data-parsley-trigger="change"
data-parsley-required-message="Phone number is required."
data-parsley-pattern-message="Enter a valid 10-digit phone number."
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
inputmode="numeric"
placeholder="Enter your phone number">
</div>
</div>
<div class="form-group">
<label class="form-label">Email Address</label>
<div class="input-wrp">
<span class="form-icon">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/email-img.svg" alt="person">
</span>
<input class="form-control" readonly type="email" autocomplete="off" name="email" id="email"
value="<?php echo $email; ?>"
required data-parsley-type="email" maxlength="50" data-parsley-trigger="change"
data-parsley-required-message="Email is required."
data-parsley-pattern-message="Invalid email format. Use a valid email address."
placeholder="Enter your email">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn remove" id="profile-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-------------------------Password update modal--------------------------------------->
<div class="modal remove-modal fade" id="removeModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="icon-circle">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/remove-cart-icon.svg" alt="remove-cart-icon">
</div>
<div class="modal-title">Password Updated <br>Successfully</div>
<div class="modal-subtext">Your new password has been saved. You can<br> now log in with your updated credentials.</div>
</div>
<div class="modal-footer">
<button class="btn remove" onclick="window.location.href = '/login';">Continue</button>
</div>
</div>
</div>
</div>
<!--------------------Deletion popup--------------->
<div class="modal remove-modal fade" id="removeDeleteModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="icon-circle">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/remove-cart-icon.svg" alt="remove-cart-icon">
</div>
<div class="modal-title">Confirm Account Deletion</div>
<div class="modal-subtext">This action is permanent and cannot <br> be undone. Are you sure you want to delete<br> your account?</div>
</div>
<div class="modal-footer">
<button class="btn cancel" data-bs-dismiss="modal">Cancel</button>
<button class="btn remove" id="confirmDeleteAccountBtn">Remove</button>
</div>
</div>
</div>
</div>
<div class="modal remove-modal fade" id="removeAddressModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="icon-circle">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/remove-cart-icon.svg" alt="remove-cart-icon">
</div>
<div class="modal-title">Confirm Address Deletion</div>
<div class="modal-subtext">This action is permanent and cannot <br> be undone. Are you sure you want to delete<br> your Address?</div>
</div>
<div class="modal-footer">
<button class="btn cancel" data-bs-dismiss="modal">Cancel</button>
<button class="btn remove" id="confirmDeleteAddressBtn">Remove</button>
</div>
</div>
</div>
</div>
<!-- ADDRESS MODAL HTML -->
<div class="modal fade edit-profile address-modal" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addressModalLabel">
<span id="address-modal-title">Add</span> <span class="txt">Address</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="edit-form" id="address-form" data-parsley-validate>
<input type="hidden" name="address_index" id="address_index" value="">
<div class="row">
<div class="form-group col-md-6">
<label class="form-label">Name</label>
<input class="form-control" type="text" autocomplete="off" maxlength="50" minlength="2"
name="label"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
required
data-parsley-trigger="change"
data-parsley-length-message="Name must be between 2 and 100 characters."
data-parsley-required-message="Name is required."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."
oninput="validateName(this)"
placeholder="Enter your name" oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')">
</div>
<div class="form-group col-md-6">
<label class="form-label">Address</label>
<input type="text" name="address_line" class="form-control" minlength="2" maxlength="100"
required
data-parsley-required-message="Address is required."
data-parsley-length-message="Address must be between 2 and 100 characters."
placeholder="Enter your address">
</div>
<div class="form-group col-md-6">
<label class="form-label">City</label>
<input type="text" name="city" class="form-control" minlength="2" maxlength="50"
required
data-parsley-required-message="City is required."
data-parsley-length-message="City must be between 2 and 50 characters."
placeholder="Enter your city">
</div>
<div class="form-group col-md-6">
<label class="form-label">State</label>
<input type="text" name="state" class="form-control" minlength="2" maxlength="50"
required
data-parsley-required-message="State is required."
data-parsley-length-message="State must be between 2 and 50 characters."
placeholder="Enter your state">
</div>
<div class="form-group col-md-6">
<label class="form-label">Postal Code</label>
<input type="text" name="postcode" class="form-control"
minlength="4" maxlength="10"
required
inputmode="numeric"
pattern="\d*"
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
data-parsley-type="digits"
data-parsley-length="[4, 10]"
data-parsley-required-message="Postal code is required."
data-parsley-type-message="Postcode must be numbers only."
data-parsley-length-message="Postcode must be between 4 and 10 digits."
placeholder="Enter your postal code">
</div>
<div class="form-group col-md-6">
<label class="form-label">Country</label>
<input type="text" name="country" class="form-control" minlength="2" maxlength="50"
required
data-parsley-required-message="Country is required."
data-parsley-length-message="Country must be between 2 and 100 characters."
placeholder="Enter your country">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn cancel" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn remove" id="address-btn">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php get_footer();?>