was successfully added to your cart.

Wenn Sie Produkte im Shop mit einem „ab:“ verkaufen möchten, können Sie mit diesen zwei Methoden vor dem eigentlichen Produkt-Preis ein „ab:“ hinzuzufügen. Das gelingt mit einem eingriff in die funktions.php oder im CSS-Child.

Mit einem dieser zwei Methoden können Sie einstellen, ob ein „ab:“ oder etwas anderes vor dem eigentlichen Preis angezeigt werden soll. Das „ab:“ wird dann vor jedem Produkt-Preis ergänzt und ist somit, überall auf jeder Produkt-Seite sichtbar.

 

INHALTSVERZEICHNIS

Produkt-Preis „ab:“

In diesem Tutorial erfahren Sie, wie Sie vor dem Produkt-Preis im Shop eine „ab:“ Angabe hinzufügen können.

  1. WooCommerce Preis ab statt von bis
  2. WooCommerce Preis „ab:“ mittels CSS bei allen Produkten

 


 

WooCommerce Preis ab statt von bis

WooCommerce Preis ab statt von bis bei „Variablen Produkten“. Ab 2.1 zeigt WooCommerce nicht mehr die Preisangabe “ab” an, stattdessen wird „von – bis“ angezeigt.

Um auf das alte 2.0 Format „ab Preis“ zurück zu gehen, ist die Lösung von Gerhard Potgieter zu empfehlen. Für die alte Darstellung mit dem Preis „ab” statt „von – bis“ Format, fügen Sie einfach den folgenden Code in Ihre „functions.php“ ein.

Der folgenden Code Zeilen betreffen die „Variablen-Preise“ sowie die „Sale-Preise“ in den Variablen. Die folgende Code wird Ihrer „functions.php“ Datei hinzugefügt, hierfür können Sie auch die „functions.php“ Ihres Child-Themes verwenden. Ansonsten lautet der Pfad zur „functions.php“ Datei folgendermaßen: …/wp-content/themes/Themename/functions.php

 

add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

function wc_wc20_variation_price_format( $price, $product ) {
    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
    }

    return $price;
}

 

Eine weitere Möglichkeit, wenn man den durchgestrichenen Preis der Variable ausblenden möchte, stattdessen nur den Sale-Preis zu stehen haben möchte. Die Variable in der letzten Zeile ist dafür zuständig: $saleprice oder $price

 

add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

function wc_wc20_variation_price_format( $price, $product ) {
    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
    }

    return $saleprice;
}

 

Tipp: In der „functions.php“ ist bereits ein Code enthalten, dieser fängt mit einem <?php Syntax an. Kopieren Sie die Code Zeilen und beachten Sie den Syntax „<?php“ und „?>“ beim einfügen. Andernfalls wird es zu einer Fehlermeldung kommen.

 

Mehr Informationen zum Thema auf : github.com

 

Achtung: Ich habe gemerkt das durch den Code, unter WooCommerce > Einstellungen > Mehrwertsteuer unter der auf der Registerkarte „Mehrwertsteueroptionen“ die „Preisanzeige Zusatz/ Endung“ nicht mehr funktioniert. Ich persönlich finde das sehr schade, da ich dieses Feld für das „Sternchen-Symbol (*)“ genutzt habe, um weiterführende Informationen im Footer einzubauen. Beispielsweise *Preis inkl. 19 % MwSt. – zzgl. Versand.

 


 

WooCommerce Preis „ab:“ mittels CSS bei allen Produkten

WooCommerce Preis „ab:“ kann man bei allen Produkten, auch mit CSS einfügen oder mit den vorherigen Beispielen kombinieren. Die Elemente :before und :after fügen vor oder nach einem Befehl einen beliebigen Inhalt ein, der mit content angegeben wird. Hierbei kann es sich um einfachen Text und Anführungszeichen handeln oder Grafiken und Zähler.

Um bei allen Produkten die Bezeichnung „ab:“ vor dem Preis zu setzen, fügen Sie einfach den folgen CSS-Befehl in Ihre CSS-Datei ein. Um die Bezeichnung „ab:“ vor dem Preis setzen zu können, wird mit dem Befehl :before der entsprechende content gestezt. Dieser CSS-Befehl lautet wie folgt:

span.amount:before {
content: "ab: ";
}

oder

span.price:before {
content: "ab: ";
}

 

Mit dem CSS-Befehl „display:none“ oder „visibility:hidden“ können Sie beliebige Elemente ausblenden. Dieser CSS-Befehl sieht wie folgt aus:

CSS-ELEMENT {
display: none;
}

oder

CSS-ELEMENT {
visibility: hidden;
}

Die CSS-Befehle in die CSS-Datei einfügen oder falls Sie mit einem Child-Theme arbeiten diesen nutzen. Ansonsten bietet das JetPack Plugin ein Modul an, der dann unter Design > CSS bearbeiten zu finden ist, welches ich gerne bevorzuge.

 

Korrekturen, Hinweise und Ergänzungen
Sollten Sie einen Punkt nicht verstehen, falls Ihnen etwas Wichtiges fehlt oder wenn Sie einen Verbesserungsvorschlag haben, dann lassen Sie es mich in einem Kommentar wissen.

 

Autor Adem Oezen

Grafikdesigner und Webentwickler. Entwickelt Webanwendungen wie Portalsysteme, Online-Shops und andere komplexe Webseiten. Auch Front-End Entwicklung, SEO Optimierung und Erweiterung von Webseiten, basierend auf WordPress, sind seine Aufgaben. Seit seinem 16ten Lebensjahr ist technische Kommunikation seine Leidenschaft. Als Blogger, schreibt er derzeit Tutorials über WooCommerce für die deutsche Community. Facebook | GoogleInstagramTwitterWordpressYoutube

More posts by Adem Oezen

Join the discussion 22 Kommentare

  • Wagner sagt:

    Super DANKE, hab lange gesucht, es gibt auch Plugins, die Darstellungen ändern können, aber dann nicht mit allen Themes funktionieren, die erste Variante läuft prima ;o)

  • Orcun sagt:

    Sehr gut beschrieben, habe schon länger nach so etwas gesucht. Weiter so 🙂

  • Horst sagt:

    Hallo,

    große klasse. Danach habe ich schon lange gesucht und ich habe es sogar hinbekommen 🙂

    Aber eine Frage habe ich noch.
    Ich möchte gerne den Einheitspreis mit ab ausweisen statt dem kompletten von bis der Variablen. Wie mache ich das denn wohl?

    Viele Grüße

  • Horst sagt:

    Hi. Danke. Das sehe ich mir mal an.

    Ich nutze Woocommerce German Market. Da habe ich die Möglichkeit einen Preis pro Einheit, also einen Basispreis, anzugeben. Ansich würde es mir schon reichen, wenn ich den irgendwie ausweisen könnte.

    • Adem Oezen sagt:

      Mit Woocommerce German Market habe ich bisher leider noch keine Erfahrungen gemacht. Dennoch denke ich, das man dass im Produkt selber im Feld „Produktdaten“ einstellen kann – unter dem Reiter „Preis pro Einheit“. Ob der dann ausgewiesen oder angezeigt wird, kann ich dir nicht genau sagen.

  • Wagner sagt:

    Das Plugin ersetzt den kompletten Preis, ich glaube er meint, dass die Information extra zu sehen ist, also so in der Art.

    Saftflasche
    2,oo Euro
    (1 Euro/Liter)

    Oder hab ich das falsch verstanden?

  • Wagner sagt:

    Mhh ja klar sorry ich brauche ja bloß „(1 Euro/Liter)“ da reinschreiben…. mein Fehler ;o)

  • Horst sagt:

    Ja genau.

    Bei mir jetzt:

    ab: 12,00 € 1 Euro/Liter

    Ich möchte aber dort stehen haben:

    ab 1 Euro/Liter

    Also der eigentliche Preis soll komplett weg.

    Ich weiß, es ist ne Krücke, aber ich weiß mir nicht anders zu helfen.

    LG

    • Adem Oezen sagt:

      Naja es gibt eine Lösung mit einem CSS-Befehl. span.amount {display: none;}den mal in deine CSS-Datei einbinden oder falls du mit einem Child arbeitest dort einfügen.Ansonsten bietet das JetPack Plugin ein Modul an, der dann unter Design > CSS bearbeiten zu finden ist, welches ich gerne bevorzuge… Dort einfügen und der Preis verschwindet 😉

  • Horst sagt:

    cool. Danke 🙂

    Mit nem Child würde ich gerne arbeiten, aber ich schnalle das nicht 😉

  • Lena sagt:

    Jippy! Es hat geklappt! Und das obwohl ich kein Plan von php habe 😀 Danke!

  • Peter sagt:

    Prima… das funktioniert perfekt.
    Eigentlich habe ich aber nach einer Möglichkeit gesucht, den Versandpreis maximal zu deckeln, so wie hier:
    https://gist.github.com/ChromeOrange/56ce4571836429af330d
    beschrieben geht es leider nicht…
    Hat jemand eine Idee wie das gelöst werden könnte?

  • Peter sagt:

    Hallo Adem,
    danke für die schnelle Antwort. Habe ich gerade entsprechend deiner Anleitung versucht, leider ging es nicht auf deutsch…
    aber unabhängig von der Sprache, scheint es mir mit der Erweiterung nicht möglich Versandkosten so zu steuern, das z.B.
    ein produkt zu je ein Euro versendet wird und, wenn der Kunde 5 oder mehr des jeweiligen produkts bestellt, die Versandkosten 5 Euro nicht überschreiten.
    Also auch bei 20 Produkten lediglich die 5 Euro Versandkosten anfallen.
    Eine Totale Deckelung sozusagen…
    Ratlos
    LG. P

  • mic sagt:

    Hallo,

    vielen Dank für die Anleitung!
    Tatsächlich wird auf meiner Website (Virtue-Theme mit WooCommerce) „von … bis“ durch „ab:“ ersetzt. Lieber wäre es mir, wenn hinter dem ab kein : (Doppelpunkt) steht.
    Dazu habe ich dann bei sprintf( __( ‚ab: %1$s‘, ‚woocommerce‘ ) den Doppelpunkt hinter „ab“ gelöscht. Resultat: Der Preis wird doppelt angezeigt, einmal durchgestrichen.
    Wie kann ich das Problem lösen.

    Gruß
    mic

  • Ina C sagt:

    Hallo Adem,
    bei mir klappt es auch … fast.
    Bei mir steht jetzt immer noch:

    ab: €39,99-ab: €59,99

    Wie bekomme ich den Teil „-ab: €59,99“ weg?

    Danke im Voraus!

  • Christian sagt:

    Hallo, tolle Sache. Kann man es auch so gestalten? -> „Ab 10.00 bis 15.00 EURO“ Schöne Grüße Christian

  • falk sagt:

    Hallo,

    super funktioniert!

    Allerdings:

    ab:183,00 € – 441,00 €

    Kann ich den 2. Preis irgendwie entfernen?

    Danke

Kommentar absenden