WordPress Tutorials

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...

 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

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)

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...

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

  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...

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...

To Add the fields to WooCommerce variable product is quite simple. You just need to follow the steps to add your own custom variation fields. Step1: Add custom field to each product variation Step2: Store custom field value into variation data Step3: Variation Template Override Where to add the fields to WooCommerce variable product on admin side?     WooCommerce has functions for form fields within woocommerce/includes/admin/wc-meta-box-functions.php file. You have to call the right field function e.g woocommerce_wp_text_input($array_args) will add a text field. The arguments will be passed like below code. l’ll show you how to add following products fields on variations tab. Text Number Textarea Select Checkbox Hidden Step1: Add custom field to each product variation   Below code adds fields to product variation tab. create the custom function ci_variation_settings_fields() and within it call the required variation fields functions. Add the function to the variations...

Do you want to know, how to add WooCommerce custom product fields? I am sure your answer will be “Yes” Let’s get started… WooCommerce is a popular WordPress eCommerce plugin. It contains all the required features for a standard online store. You can easily add extra product fields using WooCommerce hooks. Best WooCommerce Customization Practices WooCommerce has functions for form fields within woocommerce/includes/admin/wc-meta-box-functions.php file. You have to call the right field function e.g woocommerce_wp_text_input($array_args) will add a text field. The arguments will be passed like below code.   l’ll show you how to add following products fields on general tab. Text Number Textarea Select Checkbox Hidden Custom Text Field Custom Date Field Woo Product Select   Hook WooCommerce Custom Product Fields Below code adds fields to product general tab. In step1, create the custom function ci_custom_general_tab_fields() and within it call the required fields functions. In s...

WooCommerce shortcodes can be used to insert content inside posts and pages. Here are a list of the WooCommerce shortcodes with examples to use. What are shortcodes? [woocommerce_cart] – shows the cart page [woocommerce_checkout] – shows the checkout page [woocommerce_my_account] – shows the user account page [woocommerce_order_tracking] – shows the order tracking form [add_to_cart id=”99″ style=”border-right:1px solid #ccc”] – Show the price and add to cart button of a single product by ID. [add_to_cart_url id=”99″] – Echo the URL on the add to cart button of a single product by ID. [products tag=”hoodie”] – Show Only Products With tag “hoodie” [product_page id=”99″] – Show a full single product page by ID [product_page sku=”FOO”] – Show a full single product page by SKU [products id=”7, 9, 22, 15, 22, 67″ orderby=”title” order=”desc”] – Shows a set of products by ids or skus. [products limit=”4″ columns=”4″ orderby=”id” order=”DESC” visibility=”visible”] – Display the new...

In this post I am going to show you how to create WooCommerce custom accounts page. We will create a new accounts tab and a page linked to it. Create New Account Tab We will create a new tab “CI Custom Endpoint” and assigned it to the items array. Our custom tab menu function will be hooked to woocommerce_account_menu_items. The logout menu tab is passed to unset() function because we want our Custom Tab before it. Later again Logout tab is added to the items[] array to display it in the end . Flush Rewrite Rules We need to register a new endpoint in WordPress using the add_rewrite_endpoint() function. Also register it using the query_vars filter. Endpoints are an extra part in the site URL that detect and show different content of page. Custom Accounts Page In last step the ci_custom_endpoint_content() function includes custom page and is hooked to endpoint. The code within this function will display tabs data. You can add code directly to function or can add a custom page. The page ...

A complete tutorial on Custom WooCommerce Plugin Development. We’ll develop a WooCommerce plugin with step by step code explanation. On completion of this tutorial you will have a complete understanding of how to build a WooCommerce Plugin with admin and frontend stuff. I wrote this because I have come across many WooCommerce Plugin Development tutorials. But I never found a single one that covers all the aspects of a good WC plugin. This tutorial is a complete guide for all those who are looking for how to do Custom WooCommerce Plugin Development. Prerequisites For this tutorial, you must have good PHP/MySQL and WordPress WooCommerce Development skills. If you are new to PHP or WordPress world this tutorial is not for you. I am not going to explain what PHP If Statement or Function is. You must be very familiar with WordPress and WooCommerce Hooks, CPT, etc My goal in this tutorial is to combine all the things and show to an intermediate level developer to gain necessary skills for W...

Recently one of my client had a requirement and in this post I’ll show you how to add Flatsome Theme product on-sale end countdown. When you place a product on-sale for a cheaper price, you would possibly need your customers to be ready to see the initial price, so that they see the value comparison. To demonstrate a sale price your product need to incorporate actual price and sale price.   Luckily, Flatsome Theme has a countdown module and it can be added to any page using shortcode. In below code I added comments to explain [ux_countdown] shortcode usage, the first is for Admin side and 2nd is to include within functions.php or in custom plugin.     My client requirement was to add the countdown timer for products on-sale. When the product sale time ends it will not display anymore. It adds the counter for Simple & variable products. If you have set different sale-end time for each product variation. Below code will update the counter according to selected product ...

In this post I’ll show you how to do flatsome theme customization. According to Themeforest its the #1 best selling WooCommerce theme ever. It’s a multiple-purpose responsive theme and can be used for any type of WooCommerce Project. Important Flatsome Template Files Flatsome theme has lot of files and directories, Below I’ll list some important files, which are used for WooCommerce frontend templates. Flatsome root directory It contains template files for Cart, Checkout & accounts pages page-cart.php page-checkout.php page-my-account.php Flatsome/wocommerce directory It contains template files for shop listing & product details pages archive-product.php single-product.php Flatsome/inc/woocommerce directory Below files contain functions for category, product, cart, checkout & accounts pages used within flatsome theme structure-wc-global.php structure-wc-category-page.php structure-wc-product-page.php structure-wc-product-box.php structure-wc-cart.php structure-wc-checkout...

If you are a WooCommerce Developer then you must have to agree with me about these “7 things you should never do with your WooCommerce store” . A store that loads slow, definitely loses prospective customers.   I have seen people with passion of starting online store fail due to insufficient information about the current trends. In recent years the web has been totally changed, it was a different thing 5 years ago. Now to stay within the competition, you have to know everything to be successful. Below are the list of 7 things you should never do with your WooCommerce store, I’ll go briefly on each of them. Never customize core WooCommerce plugin files Never use heavy theme Never use extra plugins Never use slow hosting Never use heavy product images Never customize theme core files Never hire cheap unskilled WooCommerce developer 1. Never customize core WooCommerce plugin files WooCommerce is a flexible eCommerce system. But to customize its core files you need good understanding o...