If your WordPress emails stopped working after the 6.9 update and you’re struggling to understand why, you’re in the right place to fix this issue step by step. Many site owners noticed contact form emails, WooCommerce notifications, password resets, and admin alerts failing or going to spam.
This step‑by‑step guide shows exactly how to fix WordPress email issues using SMTP, the most reliable solution recommended for WordPress 6.9 and beyond.
Why SMTP Is Mandatory After WordPress 6.9
WordPress 6.9 introduced stricter handling of the email envelope sender. As a result:
PHP mail() is no longer reliable
Emails without authentication fail silently
Gmail, Outlook, and Yahoo block unauthenticated senders
SMTP fixes all of this by authenticating emails before sending.
Step 1: Choose a Reliable SMTP Plugin
For WordPress 6.9, these plugins work best:
WP Mail SMTP (Beginner‑friendly)
FluentSMTP (Free & powerful)
Post SMTP Mailer (Advanced logging)
Recommended for most sites: WP Mail SMTP
Step 2: Install WP Mail SMTP Plugin
Go to WordPress Dashboard → Plugins → Add New
Search for WP Mail SMTP
Click Install → Activate
Once activated, you’ll see the WP Mail SMTP Setup Wizard.
Step 3: Choose Your SMTP Mailer
WP Mail SMTP supports multiple mailers. Popular options:
Mailer
Best For
Gmail / Google Workspace
Small sites, blogs
Brevo (Sendinblue)
Marketing + transactional emails
SendLayer
WooCommerce & business sites
Amazon SES
High‑volume sending
Other SMTP
Custom hosting SMTP
For beginners, choose Gmail or Brevo.
Step 4: Configure SMTP Settings (Example: Other SMTP)
If you select Other SMTP, enter:
SMTP Host: yourmailprovider.com
Encryption: TLS
SMTP Port: 587
Authentication: ON
Username: your email address
Password: email app password
Enable Force From Email Enable Force From Name
Step 5: Fix the “From Email Address” Issue (Very Important)
Introduction: The Scaling Dilemma Every Agency Faces
If you run a web or SEO agency, you’ve probably been here before — too many client projects, not enough developers, and an inbox full of “when will my site go live?” messages. We get it. Agencies grow fast, and web development capacity often struggles to keep up. But hiring full-time developers isn’t always the answer — it’s expensive, unpredictable, and hard to scale without sacrificing profit margins. That’s exactly where a white-label WordPress partner comes in — especially one who lives and breathes Elementor.
What’s Changing in 2026
2026 is shaping up to be the year of agency specialization. Most agencies are niching down, focusing on SEO, paid media, or design — not on the tech-heavy parts of WordPress builds. At the same time, client expectations are higher than ever:
“Can you deliver it by next week?”
“Can you make it faster on mobile?”
“Can you integrate this with our CRM and optimize for SEO?”
Agencies that can say yes confidently to those requests — without stretching their team — are the ones that’ll win.
Why White Label Partnerships Make Sense (Now More Than Ever)
Here’s the truth: agencies that scale sustainably all have one thing in common — they know what to keep in-house and what to delegate. When you partner with a white-label WordPress team like ours, you instantly:
Expand your team capacity without hiring.
We become your development wing — working behind the scenes, branded as you.
Deliver faster using Elementor workflows optimized for agencies.
We use pre-built kits, reusable widgets, and automation to cut build times.
Keep your margins healthy.
No surprise payroll costs. No office overhead. Just predictable, per-project pricing.
Protect your client relationships.
We work under strict NDAs — your clients will only ever see your brand.
Real-World Example
One of our agency partners in New York came to us after burning through three in-house developers in a year. They were great at SEO and client management — but every WordPress project slowed them down. We set up a white-label collaboration:
Shared Slack channel
Trello for project management
Standardized Elementor templates
In the first quarter, they delivered 12 websites instead of 5. Their profit margins grew by 38%, and client satisfaction scores hit a record high. That’s not a one-off. We see this story play out every month with agencies across the U.S.
The Hidden Advantage: Strategic Focus
Outsourcing your builds doesn’t just save time — it frees up focus. When your team isn’t bogged down in revisions and debugging, they can double down on client strategy, retention, and upselling — the real growth drivers. A white-label partner becomes your invisible engine — running smoothly in the background while you lead the brand forward.
Why Agencies Choose TechnoCrackers
We’ve built over 300+ WordPress and Elementor websites as a silent partner for agencies. Our secret sauce? Reliability + speed + communication.
Dedicated Slack channels for every agency
Elementor Pro expertise for rapid, high-quality builds
SEO-friendly site structures from day one
White-label reporting and project documentation
When we say we’re your team — we mean it.
Ready to Scale Without Hiring?
Let’s talk about how our white-label Elementor team can help your agency scale profitably in 2026.
Creating custom product tabs in WooCommerce using Advanced Custom Fields (ACF) allows store owners to display additional product information in a clean, organized, and user-friendly way. Instead of hardcoding content, ACF enables you to manage tab titles, content, and order directly from the WordPress admin panel, making it easy to create unlimited, product-specific tabs without touching code repeatedly.
Creating custom product tabs in WooCommerce using Advanced Custom Fields (ACF) is a powerful and flexible way to manage detailed product information without hardcoding content. By leveraging ACF repeater fields and WooCommerce hooks, you can add unlimited, product-specific tabs that are easy to maintain directly from the WordPress admin panel.
This approach improves content organization, enhances the user experience, and allows non-technical users to update product details effortlessly. Whether you’re adding FAQs, specifications, warranty information, or size guides, ACF-based product tabs provide a scalable solution that works seamlessly with any WooCommerce theme or page builder.
By implementing this method, you gain full control over tab structure, content, and display logic—making it an ideal choice for modern, content-rich WooCommerce stores.
Elementor Tabs are great for organizing content, but by default they require users to click each tab manually. If you want a more dynamic experience—similar to a slider or carousel—you can make Elementor tabs auto-change at regular intervals. This approach improves engagement, highlights multiple pieces of content, and keeps your layout visually active.
In this article, we’ll explain what auto-changing tabs are, why they’re useful, and the different ways you can achieve this effect in Elementor.
What Does “Auto-Changing Tabs” Mean?
Auto-changing tabs behave like a slider:
Tabs switch automatically after a set time (for example, every 3–5 seconds)
Content rotates without user interaction
Users can still click tabs manually if they want
This creates a smooth, animated experience similar to testimonials sliders, feature showcases, or step-by-step presentations.
Plugins Required
Before creating auto-changing tabs in Elementor, make sure the following plugins are installed and activated on your WordPress website:
Elementor – Page builder plugin
Elementor Pro – Required for advanced features and better control
ElementsKit – Provides the Advanced Tabs widget with enhanced functionality
Step 1: Create the Tabs Layout
Follow these steps to create the tab structure using ElementsKit:
Open the page where you want to add the tabs.
Click Edit with Elementor.
In the Elementor editor panel, search for ElementsKit
Drag and drop the Advanced Tab widget (from ElementsKit) onto your page.
Choose the tab layout based on your design needs — Vertical or Horizontal.
Add your tab titles and corresponding tab content for each tab.
Design the tabs to match your website layout by adjusting:
Colors
Typography
Spacing
Icons and alignment
Open the Advanced settings of the widget.
Add a custom CSS class to the tab widget (this will be used later to enable auto-changing functionality).
Step 2: Convert Tabs to Auto-Change Like a Slider
Now that your tabs are created and styled, the next step is to make them auto-change automatically like a slider. This is done using a custom JavaScript script that switches tabs at a fixed time interval.
This method works smoothly with ElementsKit Advanced Tabs and uses Bootstrap’s native tab functionality for better compatibility.
What This Script Does
Automatically switches tabs every 3 seconds
Works with vertical or horizontal tabs
Stops auto-sliding when a user manually clicks a tab
Targets the widget using the custom CSS class you added earlier
How to Use the Script
Copy the script provided below.
Paste it into one of the following locations:
Your theme’s php file (before </body>)
A Custom Code plugin (recommended)
Elementor → Custom Code → Location: Footer
Save or publish the changes.
Refresh the page and check the front end — your tabs should now auto-slide like a slider.
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.verticle-tabbing').forEach(wrapper => {
const tabs = wrapper.querySelectorAll('.elementkit-nav-link');
if (tabs.length < 2) return;
let currentIndex = 0;
let interval = null;
function showTab(tab) {
// Bootstrap 5
if (window.bootstrap && bootstrap.Tab) {
bootstrap.Tab.getOrCreateInstance(tab).show();
}
// Bootstrap 4 fallback
else if (window.jQuery && jQuery.fn.tab) {
jQuery(tab).tab('show');
}
}
function startAutoplay() {
if (interval) return;
interval = setInterval(() => {
showTab(tabs[currentIndex]);
currentIndex = (currentIndex + 1) % tabs.length;
}, 3000);
}
function stopAutoplay() {
if (!interval) return;
clearInterval(interval);
interval = null;
}
// Wait for ElementsKit & Bootstrap to load
setTimeout(startAutoplay, 1200);
// Stop autoplay on manual tab click
tabs.forEach(tab => {
tab.addEventListener('click', stopAutoplay);
});
});
});
</script>
Final Thoughts
Making Elementor tabs auto change like a slider is a powerful way to enhance interactivity and engagement on your website. Whether you use custom JavaScript, an Elementor add-on, or a slider-based alternative, this technique can help present more content in less space—while keeping your design modern and dynamic.
With the right timing and thoughtful UX, auto-changing tabs can turn static layouts into engaging visual experiences.
If you’re planning a custom WordPress website or need advanced Elementor functionality without relying on heavy plugins, getting expert guidance early can save time and rework later.
You can Book a Free WordPress Consultation with our team to discuss your requirements, explore the best technical approach, and ensure your site is built for performance and scalability.
When building Custom Post Type (CPT) single pages in Divi, tabs are a great way to organize content. But the real problem starts when ACF fields are empty — Divi still displays the tab, leaving blank content areas.
In this tutorial, you’ll learn how to:
Create dynamic Divi tabs on CPT single pages
Display ACF field data dynamically inside tabs
Automatically hide tabs when ACF data is empty
Note: This tutorial uses a People Custom Post Type as a demo example only.
The same setup works for any CPT, such as:
Team Members
Products
Properties
Courses
Portfolio
Services
Requirements
Divi Theme
Advanced Custom Fields (ACF)
Any Custom Post Type (People CPT is used only for demonstration)
Step 1: Create Any CPT & Single Template (Demo: People)
For this demo, a People CPT is created.
You can replace this with any Custom Post Type you want.
Steps:
Create your CPT (example: People)
Go to Divi → Theme Builder
Create a Single Post Template
Assign it to your CPT
This template will apply to all posts of that CPT.
Step 2: Create ACF Fields for Your CPT (Demo Fields)
For demonstration, the following ACF fields are created:
School
College
Information
These fields are just examples.
You can create any number of ACF fields depending on your CPT type.
Assign the ACF field group to your CPT.
Step 3: Add & Fill ACF Data in CPT Posts
Create multiple CPT posts and fill ACF data differently:
Some posts may contain School data
Some may contain College data
Some fields may be left empty
This variation helps test the automatic tab hiding logic later.
Step 4: Create Divi Tabs and Show ACF Data Dynamically
Now comes the most important part — creating dynamic tabs.
4.1 Add the Divi Tabs Module
Edit your CPT single template in Divi Theme Builder
Add a Tabs module
Create tab titles such as:
School
College
Information
These tab titles should match the type of ACF data you want to display.
You can rename them based on your CPT fields.
4.2 Fetch ACF Data Dynamically Inside Tab Content
Divi allows you to fetch ACF field values directly inside the tab content using its built-in Dynamic Content option, so no extra module or plugin setup is required.
To display ACF data inside a tab:
Open the Tabs module in your CPT single template
Click on the tab content area you want to edit
On the right side of the content editor, click the Dynamic Content icon (database icon)
From the dynamic options, select the ACF field you want to display
Example: School
Example: College
Example: Information
Divi will now automatically pull and display the selected ACF field value for the current CPT post.
This means:
Each CPT post shows its own ACF data
No static content is required
The tab content updates dynamically for every post
You can repeat the same process for each tab, selecting different ACF fields based on the tab tit
4.4 Add Custom Class to the Tabs Module
Add this custom class to the Tabs module:
people-tab
This is just a demo class name.
You can rename it based on your CPT, for example:
team-tab
product-tab
property-tab
Step 5: Automatically Hide Tabs When ACF Data Is Empty
Go to:
Divi → Theme Options → Integration → Add code to the <body>
Tabs with empty ACF fields are hidden automatically
First available tab opens by default
Clean UI and better UX
Fully reusable for any CPT single page
Conclusion
Although this tutorial uses a People CPT as a demo, the same setup works for any Custom Post Type. By combining Divi Tabs, ACF, and Divi Machine, you can build smart, dynamic CPT single pages without showing empty content.
Once implemented, you’ll never need to manually manage tab visibility again.
If you’re looking to develop a custom WordPress or Divi project with dynamic functionality, you can Book a Free Project Consultation to discuss your requirements and next steps.
If you’re building dynamic websites with Divi, Advanced Custom Fields (ACF), and Divi Machine, one of the most powerful features you can add is AJAX filtering. AJAX filters allow users to sort and filter content instantly—without refreshing the page—creating a smooth and modern browsing experience.
In this tutorial, you’ll learn exactly how to create AJAX filter options using ACF fields inside Divi Machine. Whether you’re building a directory, real estate listings, service listings, or a product catalog, this guide will help you create advanced filter systems with no custom coding required.
Step 1: Create the ACF Field “Position”
Go to ACF → Field Groups
Click Add New Field Group
Add a field:
Field Label: Position
Field Name: position
Field Type: Select / Text / Radio
Select is recommended so you can pre-define job roles.
Add all possible positions (if using Select field)
Set the rule:
Show this field group if Post Type = Job Opening
Publish the field group.
Step 2: Add Position Values to Each Job Opening
Now add content:
Go to Job Openings → Add New
Enter Job Title
Fill the ACF field Position
Add job description, responsibilities, requirements, etc.
Publish
Repeat this for all job posts.
Step 3: Create a Job Openings Listing Layout in Divi Library
To build a clean and reusable job listing design, you first need to create a layout inside the Divi Library.
How to create the layout:
Go to Divi → Divi Library → Add New
Enter a layout name (Example: Job Opening Listing Layout)
Choose Layout Type: Layout
Click Submit
Now edit the layout inside the Divi Builder
Step 4: Create the Job Opening Archive or Page
Now you will use Divi Machine to display all job openings on a front-end page.
Steps:
Create or open the page you want to use for your job archive
Enable Divi Builder
Add the module: DM – Archive Loop
Configure the archive loop:
Select Post Type:Job Openings
Select Layout: Choose the template you created in Divi Library
Step 5: Create the AJAX Filter Using the ACF Field
Divi Machine allows you to create filters for any ACF field.
Here we will create a filter for Position (ACF field).
Steps:
Add the module: DM – Filter Posts (Divi Machine Module)
Click Add New Filter Item
In the Main settings, configure:
Filter Name: Position
What do you want to search/filter? → Select ACF Field
Select Post Type: Job Openings
Select ACF Name: position
In the Empty Options settings:
Show empty filter option: YES
Hide empty options on page load: YES
Hide filter option when it has no options: YES
Step 6: Save and Test Your Filter
Now visit your Job Openings archive page:
The layout you created in the Divi Library should display correctly
The Divi Machine Archive Loop should load all job posts
The filter for Position should update the job list instantly (AJAX)
Pagination or Load More buttons should work smoothly
You now have a fully functional, dynamic Job Opening listing page with AJAX filtering using ACF fields.
If you’re working on a WordPress or Divi project that requires AJAX filters, ACF-based logic, or custom dynamic functionality, we can build a clean, scalable solution tailored to your exact requirements—without plugin overload.
If you’re looking to take full control of how your WooCommerce products appear on your store, Elementor Pro makes it incredibly easy. With custom templates, loop items, and dynamic WooCommerce elements, you can design a fully branded shop page — no coding required.
In this guide, you’ll learn how to:
Create a custom WooCommerce archive template
Build a custom product loop layout with images, pricing, meta info & add-to-cart
Enable pagination, column control, and product count
Add category-based sorting functionality for a better user experience
By the end of this tutorial, you’ll have a professional, flexible product layout that matches your brand perfectly.
Step 1: Create a Custom Product Archive Template
To start customizing the default WooCommerce Shop and Category pages, follow these steps:
Go to WordPress Dashboard → Templates → Theme Builder
Click Add New → Archive Template
Choose Product Archive
Give the template a name (example: “Custom Shop Layout”)
Click Create Template
Once loaded, you’ll see Elementor’s default WooCommerce widgets.
Now customize the layout using:
Heading or Page Title
Breadcrumbs
Search Bar
Sorting & Filter Options (optional)
Step 2: Create a Custom Product Loop Item
Elementor Pro now offers Loop Grid and Loop Item builder — allowing full control over how each product card looks.
Add the Loop Grid widget to your archive page
Click Create Template
This opens a new “Loop Item” layout canvas
Now build your product card using Elementor widgets:
Include the following elements:
Element
Widget
Product Image
Product Image
Product Title
Product Title
Short Description
Product Short Description
SKU
Product SKU (Dynamic Tags → Woo Meta)
Categories
Product Terms
Price
Product Price
Add to Cart
Add to Cart Button
Style spacing, borders, typography and hover effects as needed.
Tip: You can make the product image & name clickable by enabling the Link to Product Page option.
Once done → Save & Publish.
Step 3: Set Columns, Layout & Pagination
Back in the Archive template:
Click on the Loop Grid widget
Set:
Columns (Desktop/Tablet/Mobile)
Number of Items per Page
Select Loop Template you created earlier
Enable Pagination
Pagination options include:
Numeric Pagination
Load More Button
Infinite Scroll (Pro)
Step 4: Apply the Template to Shop & Category Pages
Before closing the editor:
Click Publish
Set Display Conditions:
✔ All Product Archives
✔ Shop Page
✔ Product Categories
Click Save.
Your custom layout is now live!
Step 5: Add Category-Based Sorting to Your WooCommerce Store
By default, WooCommerce lets customers sort products by price, popularity, rating or date — but not by the category order you set. To make browsing easier and more organized, we’ll add a Category-Based Sorting option to both:
The WooCommerce Sorting Dropdown
The Default Sorting Setting inside Appearance → Customize
This ensures your products appear in the exact order of their assigned categories — perfect for structured stores like machinery, spare parts, collections, or apparel.
Add Custom Sorting Code
Add the following code to your functions.php or a custom plugin (recommended if using a child theme):
This plugin allows you to reorder product categories visually, and the sorting function will respect that order automatically.
Step 7: Test Your Sorting & Ensure Everything Works
Now that your custom product template and category-based sorting are in place, it’s important to verify everything is functioning correctly.
Go to: YourSite.com/shop
Check the following:
Products display in the correct category-based sequence
The layout matches your Elementor loop template
Pagination works (example: clicking page 2 continues the ordered list)
Sorting dropdown shows “Sort by Category Order”
Try switching between sorting options:
Default Sorting
Price (asc/desc)
Category Order
Then return to Sort by Category Order to ensure your custom order re-applies correctly.
Final Result
If everything is configured correctly, your WooCommerce shop will now:
Display products grouped and ordered by category hierarchy
Use a fully custom Elementor loop layout
Support pagination, sorting, and filtering
Allow you to change category order easily without editing loops
Automatically update sorting whenever you rearrange categories
Conclusion
Congratulations — you now have a fully customized WooCommerce product archive with:
A unique Elementor product card design
Pagination and responsive layout control
Smart category-based sorting
Optional manual drag-and-drop category ordering
This setup gives your WooCommerce store a clean, organized, and intuitive structure — especially useful for businesses with large catalogs, product families, or grouped collections.
If you’re planning a WooCommerce store that requires custom product templates, category-based sorting, or advanced pagination in Elementor, our WordPress developers can build a fast, scalable solution tailored to your business needs.
You can Book a Free Project Consultation to discuss your store requirements, performance goals, and the best development approach.
If you’re building websites with Divi and want your forms to automatically include the current page title and URL, this tutorial will help you do it—without using plugins.
This technique is especially useful for:
Product pages
Landing pages
Service request forms
Support or inquiry forms
Once set up, users can submit a form and you’ll automatically receive which page they sent it from — making communication faster and more organized.
Step 1 — Edit the Page Using Divi Builder
Open the page where you want this functionality and click:
Enable Visual Builder → Edit With Divi
Create a simple layout with:
Section
Row
Heading Module
Contact Form Module
Step 2 — Add the Dynamic Page Title
In the heading module:
Go to Content → Heading
Select: Page/Archive Title (this pulls the current page title dynamically)
Now go to: Advanced → CSS ID & Classes
Add this class: page_title
This class is important because our script will detect it and use its value.
Step 3 — Create the Divi Form Fields
Open the Contact Form module and add your normal inputs (Name, Email, Message, etc.)
Then add two additional hidden (or visible) fields:
This ensures the captured data appears in your submitted email.
Step 4 — Add the Script in Divi Theme Options
Go to: Divi → Theme Options → Integration → Add Code to <head>
Paste the following scripts:
Script to Fetch Page URL :
<script>
document.addEventListener("DOMContentLoaded", function () {
const field = document.querySelector('input[data-original_id="page_url"]');
if (field) field.value = window.location.href;
});
</script>
Script to Fetch Page Title :
<script>
document.addEventListener("DOMContentLoaded", function () {
const product = document.querySelector('.page_title');
const field = document.querySelector('input[data-original_id="page_title"]');
if (product && field) {
field.value = product.innerText.trim();
field.readOnly = true;
field.style.cursor = "not-allowed";
}
});
</script>
Step 5 — Test the Form
Now refresh the page and you’ll see:
The page title fills automatically
The page URL fills automatically
The fields are locked so users can’t modify them
Example Front-End Result
Submit the form and check your email — you should now receive something like this:
Name: John Doe
Email: [email protected]
Message: I want more info.
Page Title: Sample Page
Page URL: https://example.com/sample-page/
Example Mail Result
Want This for WooCommerce?
You can use the same method on product pages — great for product inquiry forms.
Tip
If you want to hide the title/URL fields, simply hide fields via css.
If you’re planning a WordPress or WooCommerce project that involves Divi forms, dynamic product data, or custom automation, our team can handle the complete development—from planning and implementation to testing and launch.
You can Book a Free Project Consultation to discuss your goals, timelines, and how we can take full responsibility for building your solution.
Youtube Video Url
Youtube Video Url
Try a Free 2-Hour Test Task
Experience our quality, speed, and communication on any small WordPress task before you commit. No contract. No cost. No obligation. [For New Agency Partners]
"*" indicates required fields
Try a Free 2-Hour Test Task
Experience our quality, speed, and communication on any small WordPress task before you commit. No contract. No cost. No obligation. [For New Agency Partners]