Posts

How to Add WooCommerce Custom Registration Form Fields

Image
Do you want to know, how to add WooCommerce custom registration form fields? I am sure your answer will be “Yes” Let’s get started… The custom user registration fields are added to the following pages 1- Registration Form 2- Account Edit Pages 3- Checkout Page Create Account Section 4- Admin User Add/Edit Pages The tutorial is divided in multiple parts, at the end you can find complete code. Following field types are added to WooCommerce Register, Account, Checkout and Admin side Text Number Textarea Select Checkbox Country Email   Add Custom Fields to WooCommerce Registration Form The below image shows the fields added to the User Registration Form Page. woocommerce_form_field( $key, $args, $value = null ) The woocommerce_form_field() outputs the form fields html. It accepts 3 parameters. $key The $key is field Name and ID $args Array options of form fields. This function supports all type of html form fields. $value Field value For more detail check woocommerce_form_field() Ad...

My Elementor Design Settings

 Open Elementor Site Settings 1) Site Identity:- Site Settings -> Settings -> Site Identity a) Site Name b) Site Description c) Site Logo d) Site Favicon 2) Layout Settings:- Site Settings -> Settings -> Layout  a) Content Width: 1444 b) Container Padding         c) Gaps d) Default Page Layout: Elementor Full Width e) Breakpoints 3) Default Pages Background:- Site Settings -> Settings -> Background 4) Global Colors: Site Settings -> Design System -> Global Colors 5) Global Typography: Site Settings -> Design System -> Global Fonts 6) Theme Style:- Site Settings -> Theme Style a) Typography b) Buttons c) Images d) Form Fields 7) WooCommerce:- Site Settings -> Settings         a) WooCommerce

Elementor WordPress Page Speed

I may apply following techniques to get best user experience and improve Elementor/WordPress website page speed: ✔️ Leverage browser caching ✔️ Eliminate render-blocking JavaScript and CSS ✔️Inline critical, above the fold CSS ✔️ Defer the parsing of and/or asynchronously load JavaScript ✔️ Enable compression ✔️ Minify CSS ✔️ Minify HTML ✔️ Minify JavaScript ✔️ Load Google Fonts on Website Server ✔️ Use Global Design System (Colors/Typography) ✔️ Prioritize visible content ✔️ Reduce server response time ✔️ Convert your site to it’s secure, HTTPS version ✔️ Optimize images ✔️ Implement Caching ✔️ Cloudflare CDN ✔️ Optimize/Upgrade PHP  ✔️ WPRocket, Autoptimize, Litespeed, etc ✔️ Google SpeedInsights, Gtmetrix ✔️ Core Web Vitals (LCP, CLS, INP)

Onpage and Technical SEO Checklist 2024

My Checklist for Onpage and Technical SEO: WordPress and Elementor 1) HTML5 Semantics constist of proper usage of HTML5 tags ✔️  <header> tag for website header ✔️   <nav> tag for navigation menu ✔️  <main> tag for website content ✔️  <article> tag for blog articles ✔️  <aside> tag for website sidebar ✔️  <h1> for website main title, only one h1 heading tag ✔️  <h2> - <h6> sub-heading tags used in hierachical structure ✔️  <img> Optimized image with proper name and Alt attribute ✔️   <footer> tag for website footer 2) Content SEO ✔️ Website Title (Admin Settings) ✔️ Website Tagline  (Admin Settings) ✔️ SEO optimized Permalinks  (Admin Settings) ✔️ Focus Keyphrase or Keyword ✔️ Meta Title and Meta Description (based on Focus Keyphrase) ✔️ Page url slug  ✔️ H1 tag - for website main title, only one h1 heading t...

What makes bad User Experience?

You web UI is with bad UX - User Experience, if it  ✔️  Slow page load times ✔️  The design isn't mobile-friendly ✔️  Complex navigation ✔️  Lack of accessibility ✔️  Inconsistent design ✔️  Irrelevant or low-quality content ✔️  A cluttered layout ✔️  Lack of feedback or progress indicators

Rebuilding WordPress Website Checklist

  Planning to rebuild your WordPress website? Keeping seo for your current site is very important, here are some tips to follow: ✔️ First we need to determine the state of SEO the current site is in, check domain rating and backlinks using ahref or semrush. ✔️ Check current website is using any plugin i.e Yoast or else. keep plugin seo stuff as it is. ✔️ Rebuild your website on staging server. ✔️ Within staging WordPress admin, do following Go to Settings > General Settings (enter same as old site Site Title, Tagline, Site Favicon) Settings > Reading (for Search Engine Visibilty check this box Discourage search engines from indexing this site) Settings > Permalinks (choose Post Name option) ✔️ Start adding website page with similar URLs (slugs remain exactly the same). Page HTML semantic must be same as old site e.g header, nav, main, article, h1- h6, image alt, aside, footer ✔️ 301 redirects if any page that has to move, or that is being deleted but has similar conte...

How to Create WordPress Page with Elementor

Image
A basic tutorial on how to create WordPress Page with Elementor Page Builder. What is Elementor? According to the elementor.com Elementor is a page builder plugin that replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode. The page builder enables you to reach a top-notch quality of design without needing to use code or CSS, and without relying on developers for help. Benefits of using Elementor with WordPress Elementor is fastest WordPress Page Builder Design Modern Responsive Layouts with ease Compatible with any WordPress Theme SEO Optimized, works well with Yoast popular plugin Lot of Addons to add new functionality Works well with WooCommerce Create and Edit WordPress Page with Elementor Add or Edit a WordPress page. Click on Edit with Elementor button, this will open up page builder. Components of Elementor Page Builder Every WordPr...