Why WordPress Doesn’t Send Emails After the 6.9 Update (Fix & Solutions)

Why WordPress Doesn’t Send Emails After the 6.9 Update

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

  1. Go to WordPress Dashboard → Plugins → Add New
  2. Search for WP Mail SMTP
  3. Click InstallActivate

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)

After WordPress 6.9, emails sent from:

[email protected]

are often rejected.

Best Practice:

Make sure this email exists in your hosting or SMTP provider.

Step 6: Send a Test Email

  1. Go to WP Mail SMTP → Tools → Email Test
  2. Enter your email address
  3. Click Send Email

If successful, WordPress email issues are fixed If failed, continue to DNS setup below

Step 7: Add SPF, DKIM & DMARC Records (Critical for Deliverability)

Without DNS authentication, emails may still land in spam.

Required DNS Records:

SPF (Example)

v=spf1 include:_spf.google.com ~all

DKIM

Provided by your SMTP provider (copy exactly)

DMARC (Basic Setup)

v=DMARC1; p=none; rua=mailto:[email protected]

Add these in Domain DNS Manager (GoDaddy, Namecheap, Cloudflare, etc.)

Step 8: Fix Contact Form & WooCommerce Emails

Contact Forms (CF7 / Elementor / WPForms)

  • Set From Email to same SMTP email
  • Avoid user‑entered emails as sender

WooCommerce

Go to: WooCommerce → Settings → Emails

  • Enable email notifications
  • Ensure “From email” matches SMTP email

Step 9: Enable Email Logging (Optional but Recommended)

WP Mail SMTP Pro includes email logs.

Free alternatives: – WP Mail Logging – FluentSMTP logs

This helps track: – Failed emails – SMTP errors – Delivery status

Common Errors & Fixes After WordPress 6.9

SMTP Authentication Failed

  • Check username/password
  • Use app password (Gmail)

Emails Go to Spam

  • Add SPF, DKIM, DMARC
  • Avoid free Gmail as sender

Emails Not Sending at All

  • Disable other SMTP plugins
  • Check hosting mail restrictions

Final Checklist (WordPress 6.9 Email Fix)

  • SMTP plugin installed
  • Authenticated domain email
  • Correct From Email
  • SPF, DKIM, DMARC added
  • Test email successful

Need Expert Help?

If you’re still facing issues with WordPress email delivery, SMTP errors, or WooCommerce notifications, Technocrackers can help.

Why Every Web Agency Needs a White Label WordPress Partner in 2026

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:

  1. Expand your team capacity without hiring.
  2. We become your development wing — working behind the scenes, branded as you.
  3. Deliver faster using Elementor workflows optimized for agencies.
  4. We use pre-built kits, reusable widgets, and automation to cut build times.
  5. Keep your margins healthy.
  6. No surprise payroll costs. No office overhead. Just predictable, per-project pricing.
  7. Protect your client relationships.
  8. 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.

Schedule a Discovery Call

How to Create Custom Product Tabs in WooCommerce

How to Create Custom Product Tabs in WooCommerce

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.

Step 1: Install Required Plugins

Make sure these plugins are active:

  • WooCommerce
  • Advanced Custom Fields (ACF) (Free or Pro)

Step 2: Create ACF Fields

Option A: Single Custom Tab

  1. Go to ACF → Field Groups → Add New
  2. Field Group Title: Product Custom Tabs
  3. Add Fields:
    • Tab Title
      • Field Type: Text
      • Field Name: tab_title
    • Tab Content
      • Field Type: WYSIWYG Editor
      • Field Name: tab_content
  1. Location Rule:
    • Post Typeis equal toProduct
  2. Publish the field group

Option B: Multiple Tabs (Recommended – ACF Repeater)

  1. Add a field:
    • Field Type: Repeater
    • Field Label: Product Tabs
    • Field Name: product_tabs
  2. Inside the repeater, add sub-fields:
    • Tab Title
      • Type: Text
      • Name: tab_title
    • Tab Content
      • Type: WYSIWYG
      • Name: tab_content
    • Tab Priority (Optional)
      • Type: Number
      • Name: tab_priority
  1. Location Rule:
    • Post Typeis equal toProduct
  2. Publish

Multiple Tabs

Step 3: Add PHP Code to Display ACF Tabs

Add this code to your child theme functions.php or a custom plugin.

add_filter( 'woocommerce_product_tabs', 'acf_product_tabs' );
function acf_product_tabs( $tabs ) {
    if ( have_rows( 'product_tabs' ) ) {
        $i = 1;
        while ( have_rows( 'product_tabs' ) ) {
            the_row();
            $title    = get_sub_field( 'tab_title' );
            $priority = get_sub_field( 'tab_priority' ) ?: (50 + $i);
            if ( $title ) {
                $tabs['acf_tab_' . $i] = array(
                    'title'    => esc_html( $title ),
                    'priority' => intval( $priority ),
                    'callback' => function() use ( $i ) {
                        acf_product_tab_content( $i );
                    }
                );
            }
            $i++;
        }
    }
    return $tabs;
}

Step 4: Add Callback Function for Tab Content

function acf_product_tab_content( $index ) {
    if ( have_rows( 'product_tabs' ) ) {
        $i = 1;
        while ( have_rows( 'product_tabs' ) ) {
            the_row();
            if ( $i === $index ) {
                echo '<div class="acf-product-tab-content">';
                the_sub_field( 'tab_content' );
                echo '</div>';
                break;
            }
            $i++;
        }
    }
}

Step 5: Add Tabs from Product Edit Screen

  1. Edit any WooCommerce product
  2. Scroll to Product Tabs section
  3. Click Add Row
  4. Enter:
    • Tab Title
    • Tab Content
    • Optional Priority
  5. Update the product

Tabs from Product Edit Screen

Tabs now appear automatically on the frontend.

Tabs-frontend

Final Thoughts

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.

How to Make Elementor Tabs Auto Change Like a Slider

Elementor Tabs Auto Change Like a Slider

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:

  1. Open the page where you want to add the tabs.
  2. Click Edit with Elementor.
  3. In the Elementor editor panel, search for ElementsKit
  4. Drag and drop the Advanced Tab widget (from ElementsKit) onto your page.

  5. Choose the tab layout based on your design needs — Vertical or Horizontal.
  6. Add your tab titles and corresponding tab content for each tab.
  7. Design the tabs to match your website layout by adjusting:
    • Colors
    • Typography
    • Spacing
    • Icons and alignment
  8. Open the Advanced settings of the widget.
  9. 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

  1. Copy the script provided below.
  2. 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
  3. Save or publish the changes.
  4. 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.

How to Create Dynamic Divi Tabs on CPT Single Pages Using ACF Data & Automatically Hide Divi Tabs When ACF Data Is Empty

How to Create Dynamic Divi Tabs on CPT Single Pages Using ACF Data & Automatically Hide Divi Tabs When ACF Data Is Empty

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:

  1. Create your CPT (example: People)
  2. Go to Divi → Theme Builder
  3. Create a Single Post Template
  4. Assign it to your CPT

This template will apply to all posts of that CPT.

create-cutom-cpt Theme-Builder-WordPress

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.

ACF Fields

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.

add-acf-data

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

  1. Edit your CPT single template in Divi Theme Builder
  2. Add a Tabs module
  3. 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.

cpt-single-page

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:

  1. Open the Tabs module in your CPT single template
  2. Click on the tab content area you want to edit
  3. On the right side of the content editor, click the Dynamic Content icon (database icon)
  4. 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.

Fetch ACF Data Dynamically Inside Tab Content

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

fetch_daynamic-data

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

add-class

Step 5: Automatically Hide Tabs When ACF Data Is Empty

Go to:

Divi → Theme Options → Integration → Add code to the <body>

Paste this script 👇

<!-- hide tab -->
<script>
jQuery(document).ready(function($) {
  // Step 1: Mark empty tab content
  $('.people-tab .et_pb_all_tabs .et_pb_tab').each(function() {
    if ($.trim($(this).html()).length === 0) {
      $(this).addClass('hide-sec');
    }
  });

  // Step 2: Hide matching tab titles
  $('.people-tab .et_pb_all_tabs .et_pb_tab').each(function(index) {
    if ($(this).hasClass('hide-sec')) {
      $('.people-tab .et_pb_tabs_controls > li').eq(index).addClass('hide-title');
    }
  });

  // Step 3: Activate first visible tab
  var $tabs = $('.people-tab .et_pb_all_tabs .et_pb_tab');
  var $titles = $('.people-tab .et_pb_tabs_controls > li');

  $tabs.removeClass('et_pb_active_content');
  $titles.removeClass('et_pb_tab_active');

  $tabs.each(function(index) {
    if (!$(this).hasClass('hide-sec')) {
      $(this).addClass('et_pb_active_content');
      $titles.eq(index).addClass('et_pb_tab_active');
      return false;
    }
  });
});
</script>

Step 6: Add CSS to Hide Empty Tabs

Go to: Divi → Theme Options → Custom CSS

Add:

.people-tab .et_pb_tab.hide-sec, 
.people-tab .et_pb_tabs_controls li.hide-title {
	display: none !important;
}

Final Result (Works for Any CPT)

  • Tabs display only when ACF data exists
  • 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

output

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.

 

How to Create AJAX Filter Options Using ACF Fields in Divi Machine

How to Create AJAX Filter Options Using ACF Fields in Divi Machine

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.

You can Book a Free Project Consultation to discuss your use case, data structure, and the best development approach.

How to Build a Custom WooCommerce Product Template with Category based Sorting & Pagination in Elementor

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:

  1. Go to WordPress Dashboard → Templates → Theme Builder
  2. Click Add New → Archive Template
  3. Choose Product Archive
  4. Give the template a name (example: “Custom Shop Layout”)
  5. 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.

  1. Add the Loop Grid widget to your archive page
  2. Click Create Template
  3. 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:

  1. Click on the Loop Grid widget
  2. 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:

  1. Click Publish
  2. 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):

/**
 * Add "Sort by Category Order" option to WooCommerce sorting dropdown.
 */
add_filter( 'woocommerce_get_catalog_ordering_args', 'woolist_catalog_orderby_category_order_args' );
function woolist_catalog_orderby_category_order_args( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : apply_filters(
        'woocommerce_default_catalog_orderby',
        get_option( 'woocommerce_default_catalog_orderby' )
    );

    if ( 'category_order' === $orderby_value ) {
        // Use pre_get_posts instead of the_posts (pagination-safe)
        add_action( 'pre_get_posts', 'woolist_pre_get_products_by_category', 999 );
    }

    return $args;
}

/**
 * Add label in dropdown menu.
 */
add_filter( 'woocommerce_default_catalog_orderby_options', 'woolist_add_category_order_option' );
add_filter( 'woocommerce_catalog_orderby', 'woolist_add_category_order_option' );
function woolist_add_category_order_option( $sortby ) {
    $sortby['category_order'] = __( 'Sort by Category Order', 'woolist' );
    return $sortby;
}

/**
 * Sort WooCommerce products by category order (pagination-safe).
 */
function woolist_pre_get_products_by_category( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }

    if ( ! ( is_shop() || is_product_category() ) ) {
        return;
    }

    // Prevent infinite recursion
    remove_action( 'pre_get_posts', 'woolist_pre_get_products_by_category', 999 );

    // 1. Get categories in manual order (respect term_order)
    $get_terms_recursive = function( $parent = 0 ) use ( &$get_terms_recursive ) {
        $ordered = [];
        $terms = get_terms([
            'taxonomy'   => 'product_cat',
            'parent'     => $parent,
            'hide_empty' => false,
            'orderby'    => 'term_order',
            'order'      => 'ASC',
        ]);
        foreach ( $terms as $term ) {
            $ordered[] = $term;
            $children = $get_terms_recursive( $term->term_id );
            if ( ! empty( $children ) ) {
                $ordered = array_merge( $ordered, $children );
            }
        }
        return $ordered;
    };

    $categories = $get_terms_recursive( 0 );
    if ( empty( $categories ) ) {
        return;
    }

    // 2. Assign priority per category
    $priority = 1;
    $cat_priority = [];
    foreach ( $categories as $cat ) {
        $cat_priority[ $cat->term_id ] = $priority++;
    }

    // 3. Fetch all product IDs first (ignore pagination)
    $args = $query->query_vars;
    $args['fields'] = 'ids';
    $args['posts_per_page'] = -1;
    $args['paged'] = 0;
    $all_products = get_posts( $args );

    // 4. Get priority for each product
    $get_priority = function( $product_id ) use ( $cat_priority ) {
        $terms = wp_get_post_terms( $product_id, 'product_cat', ['fields' => 'ids'] );
        if ( empty( $terms ) ) {
            return PHP_INT_MAX;
        }
        $priorities = [];
        foreach ( $terms as $t ) {
            if ( isset( $cat_priority[ $t ] ) ) {
                $priorities[] = $cat_priority[ $t ];
            }
        }
        return ! empty( $priorities ) ? min( $priorities ) : PHP_INT_MAX;
    };

    // 5. Sort all product IDs by category, then menu_order, then title
    usort( $all_products, function( $a, $b ) use ( $get_priority ) {
        $pa = $get_priority( $a );
        $pb = $get_priority( $b );
        if ( $pa !== $pb ) return $pa - $pb;

        $ma = (int) get_post_field( 'menu_order', $a );
        $mb = (int) get_post_field( 'menu_order', $b );
        if ( $ma !== $mb ) return $ma - $mb;

        return strcasecmp( get_the_title( $a ), get_the_title( $b ) );
    });

    // 6. Manual pagination slicing
    $per_page = $query->get( 'posts_per_page' );
    $paged = max( 1, $query->get( 'paged' ) );
    $offset = ( $paged - 1 ) * $per_page;
    $paged_products = array_slice( $all_products, $offset, $per_page );

    // 7. Update query vars for WooCommerce
// Get full, sorted list of product IDs
$query->set( 'post__in', $all_products );
$query->set( 'orderby', 'post__in' );
// DO NOT do array_slice or manual slicing
    $query->set( 'posts_per_page', $per_page );
    $query->set( 'paged', $paged );

    // 8. Correct pagination count
    add_filter( 'found_posts', function( $found, $q ) use ( $all_products ) {
        if ( $q->is_main_query() && ( is_shop() || is_product_category() ) ) {
            return count( $all_products );
        }
        return $found;
    }, 10, 2 );
}

Step 6: Enable It from WooCommerce Customizer

Once the code is added successfully, go to: Appearance → Customize → WooCommerce → Product Catalog → Default Product Sorting

You’ll now see a new option:  Sort by Category Order

Select it — and from now on, your shop and category pages will automatically display products grouped and ordered by the category hierarchy.

 (Optional) Organize Categories Manually

If you want full drag-and-drop control over category ordering, install:

Category Order and Taxonomy Terms Order Plugin
 https://wordpress.org/plugins/taxonomy-terms-order/  (Free from WordPress.org)

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.

How to Get Product Title and URL Automatically in Divi Forms

How to Get Product Title and URL Automatically in Divi Forms

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:

  1. Go to Content → Heading
  2. Select: Page/Archive Title (this pulls the current page title dynamically)
  3. Now go to: Advanced → CSS ID & Classes
  4. Add this class: page_title

This class is important because our script will detect it and use its value.

Add the Dynamic Page Title

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:

Field Name Field ID
Page URL page_url
Page Title page_title

Example message pattern:

Name: %%Name%%
Email: %%Email%%
Message: %%Message%%
Page Title: %%page_title%%
Page URL: %%page_url%%

This ensures the captured data appears in your submitted email.

Divi Form Fields

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>

code sample

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

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

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.

Contact us

Let's Unleash Your Digital Potential Together.

Address

C-605, Ganesh glory 11, Nr. BSNL Office, Jagatpur Road, S.G. Highway, Jagatpur, Ahmedabad, India - 382481.

Phone

INDIA : (091) 8200639242 USA : +1 (310) 868-6009

Limited Time Offer

X

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

Name*