Gerade im Bekleidungsbereich, aber natürlich auch in vielen anderen Branchen, gibt es unzählige Bezeichnungen für Farben: cognac, bordeaux, apricot, taupe und wie sie alle heißen. Bei der Produktbeschreibung, dem Titel und natürlich auch bei der Variantenwahl ist es wichtig, dass die Farbe genau bezeichnet wird. Zum einen damit es zum Produktbild passt und zum anderen, damit der Kunde weiß, was er bei der Lieferung zu erwarten hat.
Doch bei Produktfiltern gilt hier: weniger ist mehr. Ein Shop mit vielen Produkten beinhaltet viele Farbwerte – und dabei gibt es zu manchen Farben oft nur einzelne Produkte. Dem Kunden alle diese Werte zum Filtern anzubieten und darauf zu hoffen, dass er sich gut zurechtfinden wird, wird ihn mehr verwirren als helfen. Doch genau das machen die meisten Shopsysteme. Die Farbfilter basieren auf den Farbwerten, die der Variante oder dem Produkt zugeordnet sind.
Wäre es daher nicht gut, wenn mehrere Farbwerte zu einem Farbton zusammengefügt werden könnten – z.B. cognac, hellbraun, dunkelbraun und rostbraun zu Braun und bordeaux, weinrot, dunkelrot zu rot? Der Gedanke ist gut, doch wie sieht es mit der Umsetzung aus? Genau das dachte ich mir auch und habe daher nach einer Lösung gesucht, um dies für einen WooCommerce-Shop umzusetzen.
Farbfilter mittels Zusatzfeld(er) neu definieren
Um einen neuartigen Farbfilter zu definieren, ist es zunächst notwendig, jedem Produkt sowie seinen Varianten (sofern es diese gibt) ein Zusatzfeld mitzugeben – ich nenne es hier ‚Filterfarbe‘. Dieses wird, neben der standardmäßigen Produkteigenschaft ‚Farbe‘, zusätzlich belegt und kann jeden beliebigen Farbwert enthalten.
Zum Hinzufügen eines Zusatzfeldes verbindest Du dich am Besten via FTP mit deinem Server und suchst in deinen Themedateien nach der functions.php oder Du loggst dich in deinen Shop ein und gehst in der Navigation auf Design -> Theme Editor und suchst dir dann die functions.php deines Themes heraus. Wichtig hierbei ist, dass Du unbedingt ein sog. Childtheme angelegt hast, da sonst deine Änderungen bei einem Update verloren gehen.
In diese Datei fügst Du folgenden Code ein:
// additional color field for variations
add_action( 'woocommerce_variation_options_pricing', 'add_custom_color_field_to_variations', 10, 3 );
function add_custom_color_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'filter_color[' . $loop . ']',
'class' => 'short',
'label' => 'Filterfarbe',
'value' => get_post_meta( $variation->ID, 'filter_color', true )
)
);
}
add_action( 'woocommerce_save_product_variation', 'save_custom_color_field_to_variations', 10, 2 );
function save_custom_color_field_to_variations( $variation_id, $i ) {
$custom_field = $_POST['filter_color'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'filter_color', esc_attr( $custom_field ) );
}
// additional color field for single product
add_action( 'woocommerce_product_options_pricing', 'add_custom_color_field_to_product', 10, 3 );
function add_custom_color_field_to_product() {
woocommerce_wp_textarea_input(
array(
'id' => 'filter_color',
'label' => 'Filterfarbe',
'placeholder' => ''
)
);
}
add_action( 'woocommerce_process_product_meta', 'save_custom_color_field_to_product', 10, 2 );
function save_custom_color_field_to_product( $post_id ) {
$custom_field = $_POST['filter_color'];
if ( isset( $custom_field ) ) update_post_meta( $post_id, 'filter_color', esc_attr( $custom_field ) );
}
Der erste Teil fügt das Zusatzfeld zu Einzelprodukten hinzu, der zweite Teil zu den Variationen in variablen Produkten.
Dieses Feld muss nun natürlich befüllt werden. Am Besten legst Du dir eine Liste mit deinen bestehenden Farbwerten und deren Zuordnungen im neuen Filter an, damit neue Produkte schnell zugeordnet werden können. In unserem Beispiel ist auf Umlaute und Sonderzeichen zu achten, da ansonsten das Filtern später nicht funktioniert. So wird aus grün gruen und weiß weiss.
Erstellung des Farbfilters
Nachdem Du nun alle Vorkehrungen auf Produktseite getroffen hast, muss der Filter natürlich noch im Shop eingefügt werden. Hierzu nutze ich das Plugin Product Filter for WooCommerce, welches Du für 29$ auf Codecanyon kaufen kannst. Du kannst natürlich auch einen anderen Filter benutzen, wichtig ist hierbei aber, dass dieser einen sog. Meta(Key/Value)-Filter integriert hat.
Nachdem Du das Plugin installiert und aktiviert hast, findest Du unter WooCommerce -> Einstellungen den Tab Product Filter. Hier befinden sich alle Einstellungsmöglichkeiten. Zunächst legst Du dir am Besten im Tab ‚Filter Presets‘ ein neues Filter Preset an, sofern der Filter nur auf bestimmten Kategorieseiten angezeigt werden soll (in unserem Beispiel für die Kategorie Handytaschen). Für alle Kategorien bleibst Du einfach beim Preset Default.
Zu dem gewählten Preset fügst Du nun einen Meta-Filter hinzu, indem Du diesen über das Dropdown auswählst und mit Klick auf ‚Add Item‘ einfügst.
Als nächstes gibst Du diesem Filter einen Namen, z.B. ‚Farbe‘ und fügst im Feld Meta Key die Bezeichnung ‚filter_color‘ hinzu. Das ist die ID des Feldes, das Du vorher zum Produkt hinzugefügt hast und so heißt damit das Feld in der Datenbank. Bei Meta Compare lässt Du das ‚=‘ stehen und bei Meta Type ‚char‘, da es sich bei den Werten um Buchstabenfolgen handelt. Bei einem Farbfilter ist es für den Kunden wichtig, dass er gleichzeitig nach mehreren Farben suchen kann. Daher solltest Du das Feld ‚Multiselect‘ aktivieren.
Damit der Filter weiß, nach was er filtern soll, müssen nun noch die Farbwerte angelegt werden. Hierzu klickst Du auf das Icon mit dem Zahnrad neben dem Titel des Filters und gelangst so zum Terms Manager. Jeder Farbwert muss über ‚Add Term‘ manuell hinzugefügt werden. Die Bezeichnungen und Einstellungen entnimmst Du Besten aus dem nachfolgenden Bild:
Wenn Du damit fertig bist, schließe das Fenster mit dem ‚X‘ und vergiss nicht, denn Filter noch abzuspeichern. Solltest Du mit dem ‚Default‘-Preset gearbeitet haben, bist Du fertig und dein Filter wird in jeder deiner Shopkategorien angezeigt. In unserem Beispiel möchten wir den Filter aber nur in einer bestimmten Kategorie haben. Um dies zu erreichen, müssen wir noch im Tab ‚Presets Manager‘ über ‚Add Item‘ die Kategorie und das vorher ertellte Filter-Preset einfügen.
Wenn Du damit fertig bist, schließe das Fenster mit dem ‚X‘ und vergiss nicht, denn Filter noch abzuspeichern. Solltest Du mit dem ‚Default‘-Preset gearbeitet haben, bist Du fertig und dein Filter wird in jeder deiner Shopkategorien angezeigt. In unserem Beispiel möchten wir den Filter aber nur in einer bestimmten Kategorie haben. Um dies zu erreichen, müssen wir noch im Tab ‚Presets Manager‘ über ‚Add Item‘ die Kategorie und das vorher ertellte Filter-Preset einfügen. In unserem Beispiel ist der Filter damit für die Handytaschen fertig. Wenn Du ihn in Aktion sehen willst, dann schau mal bei den Handytaschen vorbei 🙂
