Design Meets Code

Standard Sortierung von WooCommerce auf „zufällig“ ändern (mit Tagescache)

11. November 2026 Leave a Comment

Die Standardsortierung bei Woocommerce lässt sich mit folgendem Code auf „zufällig“ ändern, wobei nur 1x am Tag sortiert wird, so dass sich es beim Durchblättern keine Dubletten gibt und nicht bei jedem Seitenaufruf alles wieder neu zufällig sortiert wird.

// Zufällige Sortierung, die sich nur einmal pro Tag ändert add_filter('woocommerce_get_catalog_ordering_args', 'custom_random_ordering_args');


function custom_random_ordering_args($args) {

    if (is_admin() && !defined('DOING_AJAX')) {

        return $args;

    }

// Sortierung auf Zufall mit täglichem Seed setzen $args['orderby'] = 'RAND(' . date('Ymd') . ')'; return $args; }

Produktkatalog für einen WooCommerce Shop in Masonry Layout darstellen

21. Oktober 2026 Leave a Comment

Damit die Produktauflistung in einem Woocommerce Shop im Masonry Layout dargestellt wird, wird folgender Code in die funstions.php des Childthemes oder in ein Code Snippet Plugin eingefügt.

function mein_masonry_laden() {
    wp_enqueue_script( 'masonry' );
    
    static $inline_done = false;
    if ( $inline_done ) return;
    $inline_done = true;

    wp_add_inline_script( 'masonry', "
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('ul.products').forEach(function (grid) {
                grid.classList.add('ist-masonry');
                imagesLoaded(grid, function () {
                    new Masonry(grid, {
                        itemSelector: 'li.product',
                        percentPosition: true
                    });
                });
            });
        });
    " );
}

// Shop- und Archivseiten
add_action( 'wp_enqueue_scripts', function () {
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        mein_masonry_laden();
    }
} );

// Überall, wo der [products]-Shortcode ausgegeben wird
add_action( 'woocommerce_shortcode_before_products_loop', 'mein_masonry_laden' );

Falls du Masonry auch bei den Related Products möchtest: Ergänze in der Bedingung || is_product(). Die Bedingung lautet dann if ( is_shop() || is_product_category() || is_product_tag() || is_product() ). Weil das CSS jetzt an die Klasse gebunden ist, greift es dort automatisch mit.

Beim Astra Theme muss noch das CSS Grid überschrieben werden

.woocommerce ul.products.ist-masonry {
    display: block !important;
    margin: 0 -10px;
}
.woocommerce ul.products.ist-masonry::before,
.woocommerce ul.products.ist-masonry::after {
    display: none !important;
}
.woocommerce ul.products.ist-masonry li.product {
    float: none;
    margin: 0 0 20px !important;
    padding: 0 10px;
    box-sizing: border-box;
    width: 33.333% !important;
}
.woocommerce ul.products.ist-masonry.columns-2 li.product { width: 50% !important; }
.woocommerce ul.products.ist-masonry.columns-3 li.product { width: 33.333% !important; }
.woocommerce ul.products.ist-masonry.columns-4 li.product { width: 25% !important; }
.woocommerce ul.products.ist-masonry.columns-5 li.product { width: 20% !important; }

@media (max-width: 921px) {
    .woocommerce ul.products.ist-masonry li.product { width: 50% !important; }
}
@media (max-width: 544px) {
    .woocommerce ul.products.ist-masonry li.product { width: 100% !important; }
}

Es giibt auch eine reine CSS Lösung, allerdings laufen dann die Produkte spaltenweise von oben nach unten statt zeilenweise. Die Sortierung kann daher verwirrend wirken.

ul.products { display:block; columns: 3; column-gap: 20px; } 
li.product { width:100% !important; break-inside: avoid; }

Nützliche Erweiterungen für das Forum „Flarum“

30. Mai 2026 Leave a Comment

Flarum Linguist: Sprachdatei bearbeiten

composer require fof/linguist

Follow Tags
Hierbei können Nutzer (oder du als Admin für alle) bestimmte Kategorien (Tags) abonnieren.

composer require fof/follow-tags

Die „Abonniert“-Erweiterung (FoF Subscribed)
Es gibt eine spezielle Erweiterung namens fof/subscribed. Diese wurde genau für den Zweck entwickelt, Admins oder bestimmten User-Gruppen die Möglichkeit zu geben, globale Benachrichtigungen einzurichten.

composer require fof/subscribed

Die Erweiterung fof/formatting (von FriendsOfFlarum) bringt das sogenannte MediaEmbed-Feature mit. Sobald das aktiv ist, wandelt Flarum einen einfachen YouTube-Link im Text vollautomatisch in ein abspielbares Video-Fenster um.

composer require fof/formatting

Autor einer Diskussion ändern

composer require clarkwinkelmann/flarum-ext-author-change

Die mit Abstand beste und am weitesten verbreitete Erweiterung für den Datei-Upload in Flarum heißt FoF Upload (von der Entwicklergruppe FriendsOfFlarum).

Sie ist der absolute Community-Standard, extrem sicher und bringt intelligente Funktionen mit (wie automatische Bildverkleinerung, Drag & Drop und die Unterstützung von externem Speicher wie AWS S3 oder Imgur).

Du kannst sie mit folgendem Befehl über dein Terminal installieren:

composer require fof/upload

Ein paar Tipps für die Einrichtung danach:

Aktivieren & Einstellungen: Nach der Installation gehst du in dein Admin-Dashboard unter Erweiterungen und aktivierst FoF Upload. Es erscheint ein komplett eigener Einstellungsreiter für die Extension auf der linken Seite.

Dateitypen erlauben: Standardmäßig ist die Erweiterung so eingestellt, dass sie nur gängige Bildformate (wie PNG, JPEG, WebP) erlaubt. Wenn deine Nutzer auch PDFs, ZIP-Archive oder andere Dokumente hochladen dürfen, musst du die entsprechenden Dateitypen (sogenannte Mime-Types) in den Einstellungen in die Whitelist eintragen.
Bei mime z.B. application/pdf oder pdf eintragen und dann auf das kleine Pluszeichen rechts klicken.

Rechte vergeben: Vergiss nicht, unter Berechtigungen einzustellen, welche Benutzergruppen überhaupt Dateien hochladen dürfen (z. B. nur registrierte Mitglieder oder nur Moderatoren).