Paginering er en af de mest oversete brugeroplevelsesdetaljer i en webshop. Traditionel paginering (side 1, 2, 3...) bryder browsingflowet og kræver fuld sidegenindlæsning. Ajax Load More løser dette ved at indlæse nye produkter direkte i siden — uden reload.
I denne guide viser vi dig hvordan du implementerer Ajax Load More i WooCommerce, med konkrete kodeeksempler, SEO-overvejelser og tips til filterkompatibilitet.
Hvad er Ajax Load More?
Ajax Load More er en teknik (og et populært WordPress-plugin) der bruger Ajax-kald til at hente og indsætte nyt indhold i siden uden fuld sidegenindlæsning. I en WooCommerce-kontekst betyder det at brugeren kan browse flere produkter med et klik på "Vis flere" — eller med automatisk infinite scroll.
Fordele ved Ajax Load More i en webshop
- Bedre brugeroplevelse: Ingen irriterende sidegenindlæsninger. Browsing føles hurtig og glidende.
- Lavere bounce rate: Brugere der nemt kan se flere produkter, forlader sjældnere siden.
- Højere engagement: Flere sete produkter = flere potentielle tilføjelser til kurven.
- Hurtigere opfattet hastighed: Kun nye produkter indlæses — ikke hele siden.
Metode 1: Ajax Load More-plugin (ingen kode)
Det nemmeste er at bruge Ajax Load More-pluginet (gratis med premium add-ons). Her er opsætningen:
- Installér og aktivér "Ajax Load More" fra WordPress plugin-repository.
- Køb og installér WooCommerce-add-on'en (påkrævet for WooCommerce-integration).
- Gå til Ajax Load More → Settings og konfigurér grundindstillinger.
- Tilføj shortcode til din shop-side eller brug pluginets template integration.
Grundlæggende shortcode
[ajax_load_more post_type="product" posts_per_page="12"
orderby="date" order="DESC"
button_label="Vis flere produkter"
button_loading_label="Indlæser..."
transition="fade" transition_speed="300"]Med WooCommerce-specifik template
[ajax_load_more woocommerce="true"
posts_per_page="12"
button_label="Vis flere produkter"
images_loaded="true"
css_classes="woocommerce columns-3"]Metode 2: Custom implementering (fuld kontrol)
For fuld kontrol kan du implementere Ajax Load More manuelt. Her er en komplet løsning:
Trin 1: PHP — Registrér Ajax endpoint
// functions.php eller custom plugin
add_action('wp_ajax_load_more_products', 'load_more_products_handler');
add_action('wp_ajax_nopriv_load_more_products', 'load_more_products_handler');
function load_more_products_handler() {
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$per_page = isset($_POST['per_page']) ? intval($_POST['per_page']) : 12;
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
$args = array(
'post_type' => 'product',
'posts_per_page' => $per_page,
'paged' => $paged,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
);
if ($category) {
$args['tax_query'] = array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $category,
),
);
}
$query = new WP_Query($args);
if ($query->have_posts()) {
ob_start();
while ($query->have_posts()) {
$query->the_post();
wc_get_template_part('content', 'product');
}
$html = ob_get_clean();
wp_send_json_success(array(
'html' => $html,
'has_more' => $paged < $query->max_num_pages,
));
} else {
wp_send_json_success(array(
'html' => '',
'has_more' => false,
));
}
wp_die();
}Trin 2: JavaScript — Load More-funktionalitet
// assets/js/load-more.js
(function($) {
let currentPage = 1;
const perPage = 12;
let isLoading = false;
$('#load-more-btn').on('click', function(e) {
e.preventDefault();
if (isLoading) return;
isLoading = true;
const $btn = $(this);
$btn.text('Indlæser...').prop('disabled', true);
currentPage++;
$.ajax({
url: wc_ajax_params.ajax_url,
type: 'POST',
data: {
action: 'load_more_products',
page: currentPage,
per_page: perPage,
category: $btn.data('category') || '',
},
success: function(response) {
if (response.success && response.data.html) {
$('ul.products').append(response.data.html);
if (!response.data.has_more) {
$btn.fadeOut();
} else {
$btn.text('Vis flere produkter').prop('disabled', false);
}
}
isLoading = false;
},
error: function() {
$btn.text('Fejl — prøv igen').prop('disabled', false);
isLoading = false;
}
});
});
})(jQuery);Trin 3: Enqueue scripts
// functions.php
function enqueue_load_more_scripts() {
if (is_shop() || is_product_category()) {
wp_enqueue_script(
'load-more-products',
get_template_directory_uri() . '/assets/js/load-more.js',
array('jquery'),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_scripts');SEO-overvejelser
Ajax Load More kan påvirke din SEO hvis det implementeres forkert. Her er de vigtigste overvejelser:
Progressiv forbedring
Behold altid standard WooCommerce-paginering i din HTML-kildekode som fallback. Ajax Load More skal være en forbedring ovenpå — ikke en erstatning for — standard paginering. Googlebot crawler primært HTML-kildekoden.
Korrekte meta-tags
Sørg for at dine paginerede sider har korrekte rel="next" og rel="prev" tags. Selvom Google har sagt at de ikke bruger dem som rankeringsfaktor, hjælper de andre søgemaskiner og crawlere.
Unikke produkt-URL'er
Hvert produkt skal have sin egen permanente URL, uanset om det blev indlæst via Ajax eller traditionel paginering. Link altid til den kanoniske produkt-URL.
Undgå duplikeret indhold
Brug canonical tags på paginerede sider der peger på den primære shopside. Tilføj paginerede sider til robots.txt eller brug noindex hvis de ikke tilføjer SEO-værdi.
Kompatibilitet med produktfiltre
Ajax Load More skal geninitialiseres når brugeren ændrer filtre. Her er et eksempel med YITH WooCommerce Ajax Product Filter:
// Lyt efter filterændringer
$(document).on('yith-wcan-ajax-filtered', function() {
// Reset page counter
currentPage = 1;
// Opdatér Load More-knap
$('#load-more-btn').show().text('Vis flere produkter');
// Hent aktive filtre til næste Ajax-kald
activeFilters = getCurrentFilters();
});De fleste populære filter-plugins som YITH, WooCommerce Product Filter by WooBeWoo og FacetWP har lignende JavaScript-events du kan lytte på.
Performance-optimering
- Lazy load billeder: Brug
loading="lazy"på produktbilleder i Ajax-responsen for at spare båndbredde. - Preload næste side: Hent næste side i baggrunden når brugeren nærmer sig bunden, så indlæsningen føles øjeblikkelig.
- Caching: Cache Ajax-responses server-side med Transients API for at reducere databaseforespørgsler.
- Minimér response-størrelse: Send kun den HTML der er nødvendig — ikke hele sidens markup.
Fejlfinding: Almindelige problemer
Produkter vises ikke korrekt
Tjek at du bruger wc_get_template_part('content', 'product') i dit Ajax-endpoint. Hvis dit tema bruger en custom product loop, skal du referere til den template i stedet.
Billeder mangler eller er forkert størrelse
Sørg for at wp_enqueue_scripts kører korrekt, og at WooCommerce-billedstørrelserne er konfigurerede. Kør evt. "Regenerate Thumbnails" efter ændringer.
Load More-knap forsvinder ikke
Tjek at din Ajax-handler returnerer has_more: false korrekt. Sammenlign $paged med $query->max_num_pages.
Konflikter med page builders
Elementor, Divi og WPBakery har egne product loop-elementer der kan konflikte med Ajax Load More. Brug plugin-specifikke hooks til integration, eller implementér Load More direkte i page builderens custom widget.
Anbefaling: Load More-knap vs. infinite scroll
Vi anbefaler Load More-knappen fremfor infinite scroll i de fleste webshops. Infinite scroll lyder tiltalende, men har flere problemer:
- Brugeren kan ikke nå footeren (med kontaktinfo, links osv.).
- Det er sværere for brugeren at vende tilbage til et specifikt produkt.
- Det kan føles overvældende for brugere der leder efter noget bestemt.
- Tilgængelighed (accessibility) er bedre med en eksplicit knap.
Vil du have hjælp til at optimere din WooCommerce-shop? Se vores e-commerce services eller kontakt os for en uforpligtende snak om din webshops performance og brugeroplevelse.