<!-- Begin: Elementor Email Template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Form Submission</title>
<style>
/* Minimal mobile tweaks for clients that support <style> */
@media (max-width: 620px) {
.container { width: 100% !important; }
.content { padding: 20px !important; }
.field-label { width: 120px !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background:#f5f7fb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color:#1f2937;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background:#f5f7fb;">
<tr>
<td align="center" style="padding:24px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="container" style="width:600px; max-width:100%; background:#ffffff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06);">
<!-- Header -->
<tr>
<td style="background:#111827; padding:22px 28px;">
<h1 style="margin:0; font-size:18px; line-height:1.3; color:#ffffff; font-weight:700;">
New Form Submission
</h1>
</td>
</tr>
<!-- Body -->
<tr>
<td class="content" style="padding:28px;">
<p style="margin:0 0 16px; font-size:15px; line-height:1.6;">
You’ve received a new message via your website form. Details below:
</p>
<!-- Fields table -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:separate; border-spacing:0; margin:12px 0; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
<tr>
<td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">
Name
</td>
<td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;">
[field id="name"]
</td>
</tr>
<tr>
<td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">
Phone
</td>
<td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;">
[field id="phone"]
</td>
</tr>
<tr>
<td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">
Email
</td>
<td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;">
<a href="mailto:[field id='email']" style="color:#2563eb; text-decoration:none;">[field id="email"]</a>
</td>
</tr>
<tr>
<td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6;">
Message
</td>
<td style="padding:14px 16px; font-size:14px; color:#111827; line-height:1.65;">
[field id="message"]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!-- End: Elementor Email Template -->
Author: Bonny Elangbam
JS to allow only 10 digit number in tel field form – Elementor
<script>
document.addEventListener("DOMContentLoaded", function () {
const phoneInput = document.querySelector('input[type="tel"]');
const form = document.querySelector("form.elementor-form");
if (phoneInput) {
// Restrict input to digits only
phoneInput.addEventListener("input", function () {
this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
});
}
if (form) {
form.addEventListener("submit", function (e) {
const phone = phoneInput.value.trim();
if (phone.length !== 10) {
e.preventDefault();
e.stopImmediatePropagation();
alert("Please enter a valid phone number.");
phoneInput.focus();
}
});
}
});
</script>Elementor Form to register as new User with customer role with Approval Feature
// Handle Elementor registration form submission
add_action('elementor_pro/forms/new_record', function ($record, $handler) {
$form_name = $record->get_form_settings('form_name');
if ('registration_form' !== $form_name) {
return;
}
// Get form data
$raw_fields = $record->get('fields');
$fields = [];
foreach ($raw_fields as $id => $field) {
$fields[$id] = sanitize_text_field($field['value']);
}
$first_name = $fields['name'] ?? '';
$email = sanitize_email($fields['email'] ?? '');
$phone = $fields['phone'] ?? '';
if (empty($email)) {
return;
}
$username = sanitize_user(current(explode('@', $email)));
$password = wp_generate_password();
$user_id = wp_create_user($username, $password, $email);
if (!is_wp_error($user_id)) {
wp_update_user([
'ID' => $user_id,
'first_name' => $first_name,
'role' => 'customer'
]);
// Store approval status
update_user_meta($user_id, 'customer_approved', 0);
// Save phone in billing & shipping details
update_user_meta($user_id, 'billing_phone', $phone);
update_user_meta($user_id, 'shipping_phone', $phone);
// Notify admin
wp_mail(
get_option('admin_email'),
'New Customer User Pending Approval',
"A new Customer user has registered and is pending approval:\n\nName: $first_name\nEmail: $email\nPhone: $phone\n\nApprove Now: " . admin_url('users.php')
);
}
}, 10, 2);
// Add approval column
add_filter('manage_users_columns', function ($columns) {
$columns['customer_approved'] = 'Customer Approved';
return $columns;
});
// Column content + Approve button
add_filter('manage_users_custom_column', function ($output, $column_name, $user_id) {
if ($column_name === 'customer_approved') {
$approved = get_user_meta($user_id, 'customer_approved', true);
if ($approved == 1) {
return '<span style="color:green;font-weight:bold;">Approved</span>';
} else {
$approve_url = wp_nonce_url(add_query_arg([
'action' => 'approve_customer_user',
'user_id' => $user_id,
]), 'approve_customer_user_' . $user_id);
return '<a href="' . esc_url($approve_url) . '" class="button">Approve</a>';
}
}
return $output;
}, 10, 3);
// Approval action
add_action('admin_init', function () {
if (isset($_GET['action'], $_GET['user_id']) && $_GET['action'] === 'approve_customer_user') {
$user_id = intval($_GET['user_id']);
if (wp_verify_nonce($_GET['_wpnonce'], 'approve_customer_user_' . $user_id)) {
update_user_meta($user_id, 'customer_approved', 1);
// Send approval email with reset password link
$user_info = get_userdata($user_id);
$reset_link = wp_lostpassword_url();
wp_mail(
$user_info->user_email,
'Your Account Has Been Approved',
"Hi {$user_info->first_name},\n\nYour account has been approved.\nYou can set your password here: $reset_link\n\nThank you!"
);
wp_redirect(remove_query_arg(['action', 'user_id', '_wpnonce']));
exit;
}
}
});
// Prevent login until approved
add_filter('authenticate', function ($user, $username, $password) {
if ($user instanceof WP_User) {
$approved = get_user_meta($user->ID, 'customer_approved', true);
if ($approved != 1) {
return new WP_Error(
'approval_pending',
__('Your account is pending approval. Please wait for admin approval.', 'textdomain')
);
}
}
return $user;
}, 30, 3);
// Block password reset for unapproved users
add_action('validate_password_reset', function ($errors, $user) {
if ($user && !is_wp_error($user)) {
$approved = get_user_meta($user->ID, 'customer_approved', true);
if ($approved != 1) {
$errors->add('approval_pending', __('Your account is pending approval. You cannot reset your password yet.', 'textdomain'));
}
}
}, 10, 2);
// Also block the 'Set New Password' screen
add_action('login_form_rp', 'block_unapproved_password_reset');
add_action('login_form_resetpass', 'block_unapproved_password_reset');
function block_unapproved_password_reset() {
$user = check_password_reset_key($_REQUEST['key'] ?? '', $_REQUEST['login'] ?? '');
if ($user instanceof WP_User) {
$approved = get_user_meta($user->ID, 'customer_approved', true);
if ($approved != 1) {
wp_die(__('Your account is pending approval. You cannot set a new password yet.', 'textdomain'));
}
}
}
registration_form is the form name
Theme to support Woocomerce
function mytheme_add_woocommerce_support()
{
add_theme_support('woocommerce');
}
add_action('after_setup_theme', 'mytheme_add_woocommerce_support');
Replacing WordPress Logo on Login Page
First impressions count—and in WordPress, your login page is often the first touchpoint for clients, team members, or contributors. So why stick with the plain old WordPress logo when you can proudly display your brand? Replacing WordPress Logo on Login Page?
In this post, we’ll show you how to replace the default WordPress login logo with your own site logo—automatically using the logo set in your Customizer settings. No plugins needed, just a few lines of code.
Why Customize the Login Logo?
- Brand Identity: Reinforce your brand presence.
- Professionalism: Especially helpful on client or team-facing dashboards.
- Consistency: Keep your site looking polished across every touchpoint.
The Smarter Way: Use Your Site’s Custom Logo
WordPress lets you set a custom site logo under Appearance > Customize > Site Identity. We’ll use that logo for the login screen—and if none is set, we’ll gracefully fall back to the classic WordPress logo.
How to Do It (Code Snippet)
Paste the following code into your theme’s functions.php file or in a custom plugin:
function custom_login_logo()
{
$custom_logo_id = get_theme_mod('custom_logo');
$logo_url = $custom_logo_id ? wp_get_attachment_image_url($custom_logo_id, 'full') : 'https://s.w.org/style/images/wp-header-logo.png'; ?>
<style type="text/css">
#login h1 a,
.login h1 a {
background-image: url('<?php echo esc_url($logo_url); ?>');
height: 80px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
padding-bottom: 20px;
}
body.login {
background-color: #3c434a;
}
body.login #backtoblog a,
body.login #nav a {
color: #fff;
}
body.login input#wp-submit {
background: #3c434a;
border: #3c434a;
padding: 0px 30px;
}
body.login input#user_login,
body.login input#user_pass {
border-radius: 25px;
padding: 0px 15px;
}
</style> <?php }
add_action('login_enqueue_scripts', 'custom_login_logo');
function custom_login_logo_url()
{
return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');
function custom_login_logo_title()
{
return get_bloginfo('name');
}
add_filter('login_headertext', 'custom_login_logo_title');Results
- If your site logo is set in the Customizer, it will appear on the login page.
- If not, it defaults back to the WordPress logo.
- Clicking the logo takes users back to your homepage.
- Hover text shows your site name.
Wrapping Up
Customizing your WordPress login page is a quick win that makes your site look more polished and professional. It’s easy, requires zero plugins, and shows visitors that you care about the details.
Have questions or want to go further with login page styling? Drop a comment or get in touch!
How to Remove Unused WooCommerce Images from Your WooCommerce Store
Implement The Code Theme’s function
Open your theme functions.php and paste the below code:
// Automatically Delete Woocommerce Images After Deleting a Product
add_action( 'before_delete_post', 'delete_product_images', 10, 1 );
function delete_product_images( $post_id )
{
$product = wc_get_product( $post_id );
if ( !$product ) {
return;
}
$featured_image_id = $product->get_image_id();
$image_galleries_id = $product->get_gallery_image_ids();
if( !empty( $featured_image_id ) ) {
wp_delete_post( $featured_image_id );
}
if( !empty( $image_galleries_id ) ) {
foreach( $image_galleries_id as $single_image_id ) {
wp_delete_post( $single_image_id );
}
}
}