WooCommerce - Design Meets Code

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) {
                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' );

Beim Astra Theme muss noch das CSS Grid überschrieben werden

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: block !important;
    margin: 0 -10px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}
.woocommerce ul.products li.product {
    width: 33.333% !important;   /* 3 Spalten */
    float: none;
    margin: 0 0 20px !important;
    padding: 0 10px;
    box-sizing: border-box;
}
@media (max-width: 921px) {
    .woocommerce ul.products li.product { width: 50% !important; }
}
@media (max-width: 544px) {
    .woocommerce ul.products 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; }

WooCommerce: Marke nach Produktkurzbeschreibung zeigen

12. November 2022 Leave a Comment

Um einem Produkt Marken als Produktmerkmal hinzuzufügen, ist ein zusätzliches Plugin notwendig, z.B.

Perfect Brands for WooCommerce

oder
https://yithemes.com/themes/plugins/yith-woocommerce-brands-add-on/

function display_single_product_brand_after_summary() { global $products; $product_id = $product->id; $product_brands = get_the_term_list($product_id, 'product_brand', '', ',' ); if (!empty($product_brands)) echo __( "Brand: ", "slug of theme" ) . $product_brands ; }; add_action( 'woocommerce_single_product_summary', 'display_single_product_brand_after_summary', 40, 0 );

Shortcode / Text nach oder vor Produktpreis anzeigen

2. August 2022 Leave a Comment

/** * Show short code after price on single product */ function cw_change_product_price_display( $price ) { $price .= do_shortcode('[xyz]'); return $price; } //add_filter( 'woocommerce_get_price_html', 'cw_change_product_price_display' );

oder

add_filter( 'woocommerce_get_price_html', 'cw_change_product_price_display' ); add_filter( 'woocommerce_cart_item_price', 'cw_change_product_price_display' ); function cw_change_product_price_display( $price ) { // Your additional text in a translatable string $text = __('TEXT');

// returning the text before the price
return $text . ' ' . $price;
}

Quelle: https://stackoverflow.com/questions/47016425/add-a-custom-text-before-the-price-display-in-woocommerce