woocommerce-custom-fields-grundpreis

WooCommerce Grundpreisangabe

Grundpreise in WooCommerce mit Custom Fields

Was zumindest in Deutschland zu den rechtlichen Anforderungen gehört, bringt generell für den Kunden Transparenz: der Grundpreis. Viele Shopsysteme, die im deutschen Sprachraum schon stark verbreitet sind, berücksichtigen folgerichtig die Berechnung des Grundpreises. Bei WordPress WooCommerce gibt es das noch nicht. Deshalb stellen wir in diesem Tutorial die Schritte vor, die nötig sind, um mit Hilfe sog. Custom Fields in WooCommerce den Grundpreis bei Produkten darzustellen. Eine automatische Berechnung erfolg in unserem Beispiel nicht (das würde den Rahmen sprengen).

WooCommerce und Custom Fields

WordPress bietet die Möglichkeit, Posts (Beiträge) mit sog. Custom Fields zu erweitern. Das sind Zusatzinhalte, die zu einem Blogbeitrag ergänzt werden können. Die vorgefertigte Form gibt es mittlerweile unterhalb des WordPress Text Editors:

Custom Fields bei WordPress Posts
Custom Fields bei WordPress Posts

Da die WooCommerce Produkte ebenfalls eine Beitragsart sind (Post Type), lassen sich diese auch in ähnlicher Weise erweitern. Wir schauen uns das im konkreten Fall an einem Wein an.

WooCommerce variables Produkt mit Eigenschaften

Nehmen wir einen Wein und machen ihn direkt zu einem variablen Produkt. Als Variable setzen wir die Menge in Litern (l) fest und nehmen standardisierte Stufen von 0,5 Liter, 1 Liter und 1,5 Liter. Um das Szenario noch etwas komplexer zu machen, soll der Wein in rot und in weiss erhältlich sein. Es gibt also eine weitere Variable: die Farbe.

Unter Produkte => Eigenschaften legen wir also eine neue Eigenschaft Menge mit der o.g. Staffel an (als Typ: Auswahlfeld). Dann folgt die Farbe – auch als Auswahlfeld – mit den Bedingungen Rot und Weiss:

Woocommerce Produkteigenschaften
Woocommerce Produkteigenschaften

Jetzt erstellen wir das variable Produkt Wein und weisen ihm die Eigenschaften zu. Die Eigenschaften sollen sichtbar sein auf der Produktseite und wir werden sie für die Variationen verwenden:

Woocommerce variables Produkt

Die Variationen lassen wir von WooCommerce selbst erstellen, in dem wir alle Eigenschaften verknüpfen lassen.

WooCommerce Custom Field für variable Produkte

Ich folge der Beschreibung von Gerhard Potgieter und ändere nun folgende Dateien:

  • functions.php des aktiven WordPress Themes
  • Kopie der variable.php von WooCommerce

Zunächst müssen wir das Feld für die Variationen anlegen bzw. für jede Variation ein eigenes. Dazu kopieren Sie bitte diesen Code in die functions.php des aktiven WordPress Themes:

//Display Fields
add_action( 'woocommerce_product_after_variable_attributes', 'variable_fields', 10, 2 );
//JS to add fields for new variations
add_action( 'woocommerce_product_after_variable_attributes_js', 'variable_fields_js' );
//Save variation fields
add_action( 'woocommerce_process_product_meta_variable', 'variable_fields_process', 10, 1 );

function variable_fields( $loop, $variation_data ) {
?>	
	<tr>
		<td>
			<div>
					<label><?php _e( 'Grundpreis', 'woocommerce' ); ?></label>
					<input type="text" size="5" name="my_custom_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_my_custom_field'][0]; ?>"/>
			</div>
		</td>
	</tr>
<?php
}

function variable_fields_js() {
?>
<tr>\
		<td>\
			<div>\
					<label><?php _e( 'Grundpreis', 'woocommerce' ); ?></label>\
					<input type="text" size="5" name="my_custom_field[' + loop + ']" />\
			</div>\
		</td>\
	</tr>\
<?php
}

function variable_fields_process( $post_id ) {
	if (isset( $_POST['variable_sku'] ) ) :
		$variable_sku = $_POST['variable_sku'];
		$variable_post_id = $_POST['variable_post_id'];
		$variable_custom_field = $_POST['my_custom_field'];
		for ( $i = 0; $i < sizeof( $variable_sku ); $i++ ) :
			$variation_id = (int) $variable_post_id[$i];
			if ( isset( $variable_custom_field[$i] ) ) {
				update_post_meta( $variation_id, '_my_custom_field', stripslashes( $variable_custom_field[$i] ) );
			}
		endfor;
	endif;
}

Das obige Fragment ist fürs Backend verantwortlich. Es gibt uns die Möglichkeit, zusätzliche Daten im Backend – in unserem Fall den Grundpreis – zu pflegen. Ein kurzer Blick in die Variationen des Wein Produktes sollte folgendes Ergebnis liefern:

Woocommerce Grundpreis als custom field
Grundpreis als custom field in WooCommerce

 

Custom Fields im Frontend anzeigen

Bislang ist das Custom Field und sein Eintrag nur im Backend sichtbar. Das bringt nicht viel, denn die Kunden sollen später sehen, dass die 1,5 Liter Flasche den günstigsten Literpreis hat und dass die Halbliter-Flasche am teuersten ist – bezogen auf den Grundpreis.

[av_notification title=’Gewusst wie!› color=’green› border=» custom_bg=’#444444′ custom_font=’#ffffff› size=’large› icon_select=’no› icon=’ue800′ font=’entypo-fontello›] Durch eine entsprechende Darstellung kann der Grundpreis dabei helfen, die Warenkörbe zu erhöhen. Wenn grosse Gebinde günstiger sind, neigen viele Kunden dazu, mehr zu kaufen, als eigentlich geplant. Das funktioniert im stationären, wie im Online-Handel.
[/av_notification]

Zurück zur Darstellung im Frontend: kopieren Sie nun per FTP folgende Datei

/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php

in Ihr aktives Theme:

/wp-content/themes/IHR-THEME/woocommerce/single-product/add-to-cart/variable.php

Öffnen Sie die Kopie der variable.php in Ihrem Theme mit einem (HTML) Editor. Ab etwa Zeile 17 müsste diese FORM beginnen:

<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
	<?php if ( ! empty( $available_variations ) ) : ?>

Fügen Sie direkt danach folgende Kette ausneuem DIV, PHP und Java Script ein:

  <div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
<?php
$custom_data = array();
foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $custom_field = get_post_meta( $variation_object->ID, '_my_custom_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $custom_field
    );
endforeach;
?>
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    });
});
</script>

Speichern Sie die Datei und gehen Sie nun zum Produkt Wein zurück. Füllen die die Angaben der Variationen inklusive dem Feld «Grundpreis» aus, speichern und veröffentlichen Sie das Produkt. Das Ergebnis müsste je nach Theme nun so aussehen (Beispiel TwentyTwelve):

Woocommerce Grundpreis als custom field
Woocommerce Grundpreis als custom field

Ändert der Kunde nun die Gebindegrösse, wechselt auch das Custom Field und stellt den hinterlegten Grundpreis dar:

Woocommerce geänderter Grundpreis
Woocommerce geänderter Grundpreis bei anderer Menge

Wer mag, kann das Custom Field für den Grundpreis noch stylen und seinem Design anpassen. Verwenden Sie dazu folgendes CSS:

.selected-variation-custom-field {
    /* styles here */
}

 

 

18 Kommentare zu «WooCommerce Grundpreisangabe»

  1. Andreas Keller

    Kann ich das selbe Prinzip auch auf ein «einfaches Produkt» anwenden und was muss ich dabei beachten? Die oben beschriebene Variante ist ja für ein variables Produkt gedacht. Ansonsten super Beschreibung!

    Beste Grüße!

    1. Alexander Haiser

      Hallo Andreas,

      dazu musst du in jedem Fall die single.php bearbeiten und den Code entsprechend anpassen. Heute ist sowieso WooCommerce 2.3.5 aktuell, da muss ich auch erst schauen, welche Anpassungen im Detail fällig sind.
      Grüße
      Alex

      1. Hallo,
        gibt es hierzu mittlerweile eine Lösung? Ich stehe nämlich vor dem selben Problem. Meine ideale Lösung wäre für Single wie variable Produkte, wenn ich einen Code hätte, bei dem ich eine Zeile unterhalb des Preises auf der Produktseite den Text

        »
        Grundpreis X,XX €/Liter
        inkl. MwSt., zzgl. Versand (verlinkt)
        »
        hätte. Hast du da eine clevere Lösung? Wäre echt klasse!

        Danke schon jetzt und Gruß
        Martin

        1. Alexander Haiser

          Hallo Martin, leider hab ichs noch nicht auf der aktuellen WC Version getestet. Nach der letzten Updatewelle komme ich kaum mit der normalen Arbeit nach 😉 Aber Gerhard, dessen Vorlagen ich hier verwende, ist vielleicht schneller dran an deiner Lösung: https://gist.github.com/kloon/4228021

          Viele Grüße
          Alex

          1. Danke für die Antwort. Gerhards Skript sieht vielversprechend aus, allerdings muss ich mich da reinfriemeln. Mein php ist ziemlich rudimentär. Ich schau mal, ob ich damit weiterkomme.
            Danke nochmals.

          2. Eins muss ich noch fragen: Die Beschreibung oben für variable Produkte: Wie kann ich die für normale Produkte adaptieren?

        2. Hallo Martin,

          hast du inzwischen eine Lösung für den Grundpreis für ein Single Product gefunden? Ich stehe vor dem selben Problem.

          Bzgl. der Anzeige von Mwst. und Versand, das habe ich schon gelöst:

          Füge in der functions.php folgendes hinzu:

          /*———————————————————————————–*/
          /* zzgl. Versand Anzeige und MwSt. */
          /*———————————————————————————–*/

          add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10);

          function woocommerce_template_single_price() {

          //Anpassungen
          $mehrwertsteuerBefreit = «Mehrwertsteuerbefreit»; //Text wird angezeitg, wenn MwSt. = 0%
          $failSafe = «inkl. 19% MwSt.»; //Text wird angezeigt, wenn Ausgabe der MwSt fehlschlägt (z.B. wegen eines Updates)
          $versandText = «»; //Text zum Versand. Optional. Wird vor dem Link angezeigt. Optional.
          $versandLink = «http://www.deineDomain.de/Versandkosten/»; //Absoluter (!) Link zu Versandbedingungen. Optional.
          $versandLinkText = «Versandbedingungen»; //Verlinkter Text für Versandbedingungen. Optional.

          /*————– Unterhalb dieser Zeile sollte nichts angepasst werden müssen ————–*/
          global $product;

          //Preis anzeigen
          woocommerce_get_template(’single-product/price.php›);

          //MwSt.-Satz für Produkt raussuchen
          $_tax = new WC_Tax();
          $rates = array_shift($_tax->get_rates( $product->get_tax_class() ));

          //Den zugewiesenen MwSt-Satz anzeigen
          if (isset($rates[‘rate’])) {
          if ($rates[‘rate’] == 0) {
          //Alternativtext, wenn 0% MwSt.
          echo «».$mehrwertsteuerBefreit;
          } else {
          echo «inkl. «.round($rates[‘rate’]).»% MwSt. «;
          }
          } else {
          //FailSafe: Wenn irgendetwas schiefgeht, besser das anzeigen, als gar nichts.
          echo $failSafe;
          }

          // Angaben zu Versandkosten (Anm.: Hier könnte man auch automatisch die jeweiligen Versandkosten auslesen. So ist es aber einfacher und wird in den meißten Fällen genügen)
          echo $versandText;
          echo (‹zzgl. Versand‹);
          }

  2. Hallo Alexander

    Vielen Dank für die super Beschreibung! Leider wird bei mir immer noch die Preisspanne angezeigt und nicht der Grundpreis. Weisst du wie ich das ändern kann?

    Vielen Dank für deine Hilfe!

    Viele Grüsse,
    Daniel

    1. Alexander Haiser

      Hi Daniel,

      was meinst du mit Preisspanne? Das Custom Field ist eine manuelle Art, den Grundpreis anzuzeigen. Also erscheint in dem Feld nur etwas, wenn du auch was reingeschrieben hast. Möglicherweise sind mit der aktuellen WooCommerce Version 2.3.5 noch Anpassungen am Code oben notwendig. Der wurde erstellt für WC 2.x

      Grüße
      Alex

  3. Hallo… 🙂

    Ich biete seit kurzem in meinem (wordpress-) Shop Fotografien als variable Produkte an. Die Fotos lasse ich bei den herkömmlichen OnlineDruckereien entwickeln, rahmen, etc. – meine Preise sind also abhängig von denen der Druckereien. Ändern diese ihre Preise, muss ich sie auch in meinem Shop ändern. Meine Fotos werden – da alle im selben Grundformat 3:2 – in den selben Variationen zu den selben Preisen angeboten.

    Frage: gibt es im woocommerce Optionen, die es mir erlauben, Preise für ausgesuchte oder alle Variationen global für alle Produkte zu ändern? Oder zumindest per copy and paste die an einem Produkt geänderten Preise einfach auf andere Produkte zu übertragen?

    Jedes meiner Produkte einzeln zu modifizieren wäre ja ein unglaublicher ZeitAufwand… und letztlich ein immenser Hinkefuß des Woocommerce.

    Liebe Grüße,

    Mario

  4. Es gibt hier solche zahlreiche und interessante Fragen! Es ist immer angenehm gute Antworten zu bekommen. Vielen Dank für tolle und ausführliche Erklärung!

  5. Hallo Zusammen,

    bei mir wird zwar im Back-End der Grundpreis als ausführbares Feld im Formular angezeigt aber die Werte die ich darein schreibe werden nicht gespeichert und nicht im Front-End angezeigt. Woran kann dies liegen ?

    Gruß

    WooComBoy

  6. Hallo,

    genau diese Anleitung, habe ich gesucht. Allerdings scheint es nach den massigen Update, nicht mehr kompatibel zu sein. Das Eingabefeld im Backend wird zwar angezeigt, jedoch nicht gespeichert bzw. übernommen. Gibt es hierfür einen Lösungsvorschlag?

    Danke

      1. Ich hatte allen, die hier kommentiert haben am 29. April eine E-Mail geschickt. Wir können das gerne mit der aktuellen WooCommerce Version testen, aber leider nur im Rahmen eines Projektes, da wir momentan keine freien Ressourcen haben.

  7. Hallo, kann mir jemand sagen wie ich auf WooCommerce unter (Produkt Erstellen) die Mengenangabe auf Quadratmeter stellen kann.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert