Woocommerce-Produktliste – ersetzen div. booten

Lesezeit: 2 Minuten

Benutzer-Avatar
kanlukasz

Ich suche den ganzen Tag nach einer geeigneten Lösung, um eine Woocommerce-Vorlage mit Bootstrap-Raster zu erstellen. Ich habe immer versucht, Änderungen mit Hooks vorzunehmen, weil ich denke, dass dies der beste Weg ist.

Woocommerce zeigt die Produktliste wie folgt an:

<ul class="products">

<li class="post-24 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin product_tag-test first instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-30 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-31 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-32 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin last instock shipping-taxable purchasable product-type-simple"></li>

</ul>

Ich möchte dies in das richtige Bootstrap-Raster ändern. Sowas in der Art:

<div class="row">

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

</ul>

Ändern Sie ul in div, es ist möglich durch die Funktion woocommerce_product_loop_start(), aber wie kann ich ändern/ersetzen li Klasse = “…. zu div class=”col-md…. ?

Vielen Dank im Voraus für Ihre Hilfe

Benutzer-Avatar
Samyer

Sie sollten also eine Woocommerce-Vorlagendatei mit einer Vorlagendatei in Ihrem untergeordneten Thema überschreiben.

FTP in Ihre Installation, gehen Sie zu wp-content/plugins/woocommerce/templateskopiere content-product.php, dupliziere diese Datei in deinem Child-Theme in einem neuen Ordner namens „woocommerce“.

Dann ändern Sie die <ul <?php post_class(); ?>> zu Ihrem div und welcher Klasse Sie wollen.

Wenn Sie Fragen zum Überschreiben von Woocommerce-Vorlagendateien haben, sehen Sie sich Folgendes an: https://wordpress.stackexchange.com/questions/256088/how-to-override-woocommerce-template-files

  • Das ist ein guter Anfang, aber es beantwortet nicht seine Frage, er möchte

      in ein div überschreiben.

      – Wilmar Arias

      19. Oktober 2020 um 12:28 Uhr


Du kannst ändern <ul> ohne Vorlage zu bearbeiten, verwenden Sie einfach dies in der functions.php:

/** 
 * Add Custom WooCommerce Loop Start
 */
function woocommerce_product_loop_start( $echo = true ) {
    ob_start();
    echo '<div class="something">'; 
    if ( $echo )
        echo ob_get_clean();
    else
        return ob_get_clean();
}

Benutzer-Avatar
Wilmar Arien

Die einfache Möglichkeit, dies zu ändern, besteht darin, Woocomerce-Vorlagen zu überschreiben.

Das Ul-Tag wird generiert von loop-start.php.

Sie finden es auf:

content/plugins/woocommerce/templates/loop/loop-start.php.

Wenn Sie den Loop-Start und das Loop-Ende ändern möchten, müssen Sie die Dateien kopieren:

wp-content/plugins/woocommerce/templates/loop/loop-start.php

in deinen Themenordner:

wp-content/themes/mysuperchildtheme/woocommerce/loop/

1362950cookie-checkWoocommerce-Produktliste – ersetzen div. booten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy