AJAX Load More WooCommerce – Komplet Guide

Introduktion

I en moderne WooCommerce webshop handler det ikke kun om produkter – det handler om oplevelsen. En “AJAX load more” knap er et effektivt alternativ til klassisk sideinddeling og giver dine besøgende mulighed for at loade flere produkter uden afbrydelser. Det betyder hurtigere navigation, lavere bounce rate og bedre konvertering – især på mobil.

I denne guide viser vi dig præcis, hvordan du implementerer en AJAX load more knap, der fungerer gnidningsfrit med Divi-temaet og WooCommerce. Du får samtidig løsninger på typiske fejl og tricks til at optimere ydeevnen.

Hvorfor Vælge en AJAX Load More Knap?

• Forbedret Brugeroplevelse
• Lavere Bounce Rate
• Mobilvenlig Navigation
• Hurtigere Indlæsning
• SEO-fordel

Forudsætninger

• WordPress med WooCommerce
• Et aktivt Child Theme
• Divi-tema (eller andet tema med Woo support)
• Grundlæggende PHP/JS kendskab

Trin 1: Filstruktur

1. Opret inc/webworq-loadmore-functions.php
2. Opret js/webworq-loadmore.js
3. Inkludér begge i dit Child Theme

Trin 2: PHP-funktionalitet (webworq-loadmore-functions.php)

<?php
if (!defined('ABSPATH')) exit;

add_action('wp_enqueue_scripts', 'webworq_enqueue_loadmore_script');
function webworq_enqueue_loadmore_script() {
    wp_enqueue_script(
        'webworq-loadmore',
        get_stylesheet_directory_uri() . '/js/webworq-loadmore.js',
        array('jquery'),
        filemtime(get_stylesheet_directory() . '/js/webworq-loadmore.js'),
        true
    );
    wp_localize_script('webworq-loadmore', 'webworq_loadmore_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('webworq_loadmore_nonce')
    ));
}

add_action('wp_ajax_webworq_load_more_products', 'webworq_load_more_products');
add_action('wp_ajax_nopriv_webworq_load_more_products', 'webworq_load_more_products');
function webworq_load_more_products() {
    check_ajax_referer('webworq_loadmore_nonce', 'nonce');

    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $posts_per_page = 12;
    $category_id = isset($_POST['category_id']) ? intval($_POST['category_id']) : 0;

    $args = array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
        'orderby' => 'menu_order title',
        'order' => 'ASC'
    );

    $visibility = wc_get_product_visibility_term_ids();
    $args['tax_query'][] = array(
        'taxonomy' => 'product_visibility',
        'field' => 'term_taxonomy_id',
        'terms' => $visibility['exclude-from-catalog'],
        'operator' => 'NOT IN'
    );

    if ($category_id > 0) {
        $args['tax_query'][] = array(
            'taxonomy' => 'product_cat',
            'field' => 'term_id',
            'terms' => $category_id,
            'operator' => 'IN'
        );
    }

    $query = new WP_Query($args);
    ob_start();
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
    }
    wp_reset_postdata();

    wp_send_json_success(array(
        'html' => ob_get_clean(),
        'has_more' => ($query->max_num_pages > $paged)
    ));
}

function webworq_loadmore_button_shortcode() {
    $cat_id = is_product_category() ? get_queried_object_id() : 0;
    ob_start(); ?>
    <div class="webworq-loadmore-wrapper">
        <button id="webworq-loadmore" data-page="1" data-category-id="<?php echo esc_attr($cat_id); ?>">
            Indlæs flere produkter
        </button>
    </div>
    <?php return ob_get_clean();
}
add_shortcode('loadmore_button', 'webworq_loadmore_button_shortcode');

Trin 3: JavaScript (webworq-loadmore.js)

jQuery(document).ready(function($) {
  $('#webworq-loadmore').on('click', function() {
    var button = $(this);
    var page = parseInt(button.attr('data-page'));
    var category_id = button.data('category-id');

    $.ajax({
      url: webworq_loadmore_params.ajax_url,
      type: 'POST',
      data: {
        action: 'webworq_load_more_products',
        nonce: webworq_loadmore_params.nonce,
        page: page + 1,
        category_id: category_id
      },
      beforeSend: function() {
        button.html('<span class="loading-spinner"></span> Indlæser...');
      },
      success: function(response) {
        if (response.success && response.data.html) {
          $('.products ul.products').append(response.data.html);
          button.attr('data-page', page + 1);
          if (!response.data.has_more) {
            button.hide();
          } else {
            button.html('Indlæs flere produkter');
          }
        } else {
          button.hide();
        }
      },
      error: function() {
        button.html('Indlæs flere produkter');
      }
    });
  });
});

Trin 4: Tilføj til functions.php

require_once get_stylesheet_directory() . '/inc/webworq-loadmore-functions.php';

Trin 5: Brug shortcoden

Placer [loadmore_button] i en Divi Code module eller i skabelon.

Styling

.webworq-loadmore-wrapper {
  text-align: center;
  margin: 30px 0;
}

#webworq-loadmore {
  background-color: #2ea3f2;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

#webworq-loadmore:hover {
  background-color: #0c71c3;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Fejlfinding

Problem: Knap vises selvom der ikke er flere produkter
Løsning: Brug max_num_pages og sammenlign med $paged.

Problem: Skjulte produkter skaber tomme pladser
Løsning: Brug korrekt tax_query til exclude-from-catalog.

Problem: JavaScript loader ikke nye funktioner
Løsning: Geninitialiser JS efter append af produkter.

Konklusion

Ved at tilføje en AJAX load more knap i din WooCommerce butik, gør du det nemmere for brugerne at browse og reducerer friktion i salgsrejsen. Løsningen fungerer flot med Divi og giver høj performance og bedre UX.

FAQ

Q: Vil dette fungere med ethvert WordPress-tema?
A: Mens denne vejledning er optimeret til Divi, kan kernefunktionaliteten tilpasses til ethvert tema med mindre justeringer af selektorer og initialt produktantal.

Q: Hvordan kan jeg ændre antallet af produkter, der indlæses hver gang?
A: Modificér $posts_per_page variablen i PHP-koden for at indstille antallet af produkter, der indlæses med hvert klik.

Q: Påvirker denne tilgang SEO?
A: Denne implementering er SEO-venlig, da alle produkter eksisterer inden for samme side-URL. Sørg dog for, at din server kan håndtere større produktkataloger.

Q: Kan jeg bruge dette med produktfiltre?
A: Ja, selvom du vil skulle udvide koden til at videregive filterparametre i AJAX-anmodningen.

Q: Hvorfor ikke bruge uendelig scroll i stedet?
A: Selvom uendelig scroll er en anden mulighed, giver en “Indlæs flere” knap brugerne mere kontrol over deres browseroplevelse og bruger færre serverressourcer.