Divi Product Navigator

Divi Product Navigator changes how shoppers move through your WooCommerce products on a Divi site. By default, shoppers click a page number and wait for the whole page to reload. With Navigator you choose how they browse: styled page numbers, pages that load without a reload, a Load More button, or infinite scroll. You set it up once in WP Admin and it works on every paginated product grid on your site. There are no modules to place and no CSS selectors to type.

Four ways to browse

  • Numbered pagination. Clean page numbers with your own Previous/Next text, an icon, or both. Pick from six shapes: square, rounded, circle, pill, underline and plain. You control padding, spacing, font and colours for the normal, hover, active and disabled states.
  • AJAX product loading. The same numbered pagination, but new pages load in place without a full page reload. The URL updates, so the browser’s Back and Forward buttons work as shoppers expect.
  • Load More. A button adds the next set of products under the grid. It shows “Showing 24 of 120 products” and a progress bar. When someone lands on page 5, a “Load previous products” button lets them go back up.
  • Infinite scroll. Products load as the shopper scrolls. After a number of automatic loads that you choose, it switches to a Load More button, so your footer is always reachable.

Different mode for each device

Choose one mode for desktop, another for tablet and another for phone. It uses Divi’s own breakpoints. For example, you can run AJAX page numbers on desktop and Load More on phones.

Per-module control without a module

Add one CSS class to any Divi Shop or Products module, and that module uses its own mode instead of the global one. The classes are qn-dpn-numbers, qn-dpn-ajax, qn-dpn-load-more, qn-dpn-infinite and qn-dpn-off. This works the same way in Divi 4 and Divi 5.

Shoppers keep their place

  • The URL stays correct, so refreshing or sharing a link opens the same products.
  • The browser’s Back button returns shoppers to the list they had loaded, at the same scroll position.
  • The page scrolls to the top of the grid after a page change, and allows for Divi’s fixed header.

More ways to shop faster

  • Sorting without a reload. Changing “Sort by” updates the products in place.
  • “Show 12 / 24 / 48” selector (optional). Shoppers choose how many products they see per page. When it’s off, it leaves Divi’s own products-per-page setting alone.
  • Loaders. Choose a spinner, dots, a top progress bar or skeleton placeholder cards.
  • Friendly errors. If a page fails to load, shoppers see a retry button. If it fails again, they’re taken to that page the normal way, so they’re never stuck.
  • Back to top button for long lists.

Works everywhere on your Divi site

  • WooCommerce shop, category, tag, brand and attribute pages, and product search results
  • Divi 4 Shop module and Divi 5 Products module, including several on one page
  • Divi Theme Builder archive templates
  • WooCommerce shortcode
  • The Divi Builder plugin on other themes

Easy to style, with a live preview

Every option lives on one settings screen, with a live preview that updates as you change colours, sizes, shapes, button text and loaders.

Built properly

  • SEO-friendly. Real page links stay in the HTML for search engines.
  • Cache-friendly. It loads the same pages your page cache already serves, with no extra database queries.
  • Grid-safe. Product rows never misalign after new products are added.
  • Accessible. Screen-reader announcements, keyboard support, focus handling and reduced-motion support.
  • Translation-ready. RTL support and WPML/Polylang compatibility.
  • Works with your other QuikNexa plugins. Divi Product Switch swatches and Divi Size Guide work on newly loaded products.
  • Lightweight. Loads only on pages that have a product grid. Inline styles are kept out of the page HTML.

Requirements: WordPress 6.8+, WooCommerce 9.0+, PHP 7.4+, Divi 4.27+ or Divi 5.

/* 3 · plugins */ at(function(){step(2);},t);t+=520; var sws=$$(".qnh_hw_sw2",panes[2]).slice(0,2); sws.forEach(function(s,k){at(function(){s.classList.add("qnh_on");},t+k*180);}); t+=sws.length*180+420; /* 4 · media */ at(function(){step(3);},t);t+=560; at(function(){$$(".qnh_hw_md",panes[3])[0].classList.add("qnh_on");},t);t+=760; /* 5 · branding */ at(function(){step(4);$("#qnh_name").classList.add("qnh_focus");},t);t+=380; for(var n=1;n<=NAME.length;n++){ (function(c,d){at(function(){ $("#qnh_name").firstElementChild.textContent=NAME.slice(0,c); $("#qnh_slug").textContent=SLUG.slice(0,Math.max(0,c-1)); $("#qnh_prevname").textContent=NAME.slice(0,c); $("#qnh_prevh").textContent="Welcome to "+NAME.slice(0,c); },d);})(n,t); t+=48; } t+=180; at(function(){$("#qnh_name").classList.remove("qnh_focus");$$(".qnh_hw_sws i",panes[4])[0].classList.add("qnh_sel");},t);t+=760; /* 6 · review */ at(function(){step(5);},t);t+=180; $$("[data-qnh_cnt]",panes[5]).forEach(function(b){ var to=+b.dataset.qnh_cnt; for(var k=1;k<=to;k++)(function(v,d){at(function(){b.textContent=v;},d);})(k,t+k*(to>5?42:260)); }); t+=900; /* 7 · generate */ at(function(){step(6);},t);t+=320; var logs=$$("#qnh_log span"),PCT=[14,31,48,66,84,100]; logs.forEach(function(l,k){ at(function(){ l.classList.add("qnh_on"); $("#qnh_progress").style.width=PCT[k]+"%"; $("#qnh_pct").textContent="Working · "+PCT[k]+"%"; },t+k*240); }); t+=logs.length*240+420; /* ready */ at(function(){ready.classList.add("qnh_on");},t);t+=3400; at(function(){running=false;run();},t); } /* ---- sizing: never paint before the real width is known ---- */ var lastW=0; function fit(){ var w=stageEl.clientWidth; if(!w||w===lastW)return; lastW=w; scale.style.setProperty("--qnh_s",(w/620).toFixed(4)); wrap.style.visibility="visible"; } if("ResizeObserver" in window)new ResizeObserver(fit).observe(stageEl); else addEventListener("resize",fit); fit(); requestAnimationFrame(function(){fit();requestAnimationFrame(fit);}); if(document.readyState!=="complete")addEventListener("load",fit,{once:true}); if(reduce){finish();return;} if("IntersectionObserver" in window){ new IntersectionObserver(function(e){ vis=e[0].isIntersecting; if(vis)run();else{clearAll();running=false;} },{threshold:.25}).observe(stageEl); }else run(); })();
0$0.00