• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
Logo

CITROWEB Webdesign

Erste Wahl für Ihren Onlineauftritt

  • Home
  • Leistungen
    • Webdesign, Webentwicklung und Beratung
    • Online-Shops mit WooCommerce
    • Technische Unterstützung für WooCommerce-Shops
    • Suchmaschinenmarketing
      • SEO: Ihr Webauftritt erhält mehr relevante Besucher
      • SEA: Suchmaschinenwerbung für Ihren Webauftritt
    • Webhosting
  • Blog
  • Kontakt aufnehmen

Blog

WooCommerce-Produktseite ohne Registerkarten (Tabs), sondern alles untereinander

11. November 2021

Es geht um diese Tabs, die auf der Produktseite angezeigt werden
Es geht um diese Tabs, die auf der Produktseite angezeigt werden

Um die Tabs (Beschreibung, Zusätzliche Informationen und Bewertungen) auf der Produktseite in WooCommerce zu entfernen bzw. alle Informationen untereinander zu platzieren nutzen wir folgenden ein kurzes Code-Snippet.

Im Standard zeigt WooCommerce separate Tabs für Beschreibung, Zusätzliche Informationen und Bewertungen auf der Produktseite an. Manchmal ist es sinnvoll aus Usability-Gründen auf Tabs zu verzichten. Amazon und andere große Shop zeigen auch den Inhalt untereinander statt in Tabs. Der Ansatz kommt aus dem mobile-Bereich und wir haben uns mittlerweile sehr daran gewöhnt. Es ist nicht verkehrt sich an den großen zu orientieren, da sie oft bereits viel in die Optimierung ihrer Auftritte gesteckt haben und die potentiellen Besucher sich bereits daran gewöhnt haben.

function woocommerce_output_product_data_tabs() {
	$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
	
	if ( empty( $product_tabs ) ) return;
	
	echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
	foreach ( $product_tabs as $key => $product_tab ) {
		echo '<div id="tab-' . esc_attr( $key ) . '">';
		if ( isset( $product_tab['callback'] ) ) {
			call_user_func( $product_tab['callback'], $key, $product_tab );
		}
		echo '</div>';
	}
	echo '</div>';
}
Tabs auf der Produktseite in Woocommerce untereinander

Wie hier im Beispiel zu sehen, stehen alle Informationen untereinander und die Tab-Leiste (wie oben dargestellt) ist nicht sichtbar.

Das verschafft dem Besucher oder der Besucherin die Übersicht über alle Informationen auf einen Blick.

Was gefällt Ihnen besser mit Tabs oder untereinander?

Alternative Lösung

Alternativ gibt es noch diese Lösung bei gist.github.com. Diese hat den Nachteil, dass die leeren DIVs trotzdem angezeigt werden, auch wenn kein Inhalt da ist. Das lässt sich in dem Code natürlich auch lösen. Bei der o. g. Lösung werden Tab-Inhalte nur eingebunden, wenn sie auch verfügbar sind.

Kategorie: Entwicklung, WordPress

WooCommerce-Produktbeschreibung (full product description) als Meta-Description in WordPress

9. November 2021

Mithilfe von YOAST ist es möglich die Produktbeschreibung als Meta-Description anzuzeigen. Das geht über den programmatischen Weg wie folgt:

Folgenden Code als Snippet in functions.php des Themes oder mithilfe eines Plugins einfügen.

// callback für Ersetzung in YOAST SEO 
function get_fullDescription() {
    global $post;
    return $post != null ? $post->post_content : "";
}

// Registriere eigene YOAST-Variablenersetzung
function register_custom_yoast_variables() {
    wpseo_register_var_replacement( '%%fulldes%%', 'get_fullDescription', 'advanced', 'Full Description' );
}

// YOAST-Variablenersetzung bekannt machen
add_action('wpseo_register_extra_replacements', 'register_custom_yoast_variables');

Danach unter WordPress -> SEO -> Darstellung in Suchergebnissen -> Produkte %%fulldes%% unter Meta description eintragen. Speichern nicht vergessen!

YOAST SEO - Darstellung in Suchergebnissen Produkte
Unter SEO -> Darstellung in Suchergebnissen -> Produkte -> Meta description %%fulldes%% eintragen. YOAST ersetzt die Variable durch den Variablennamen.

Nun wird aber die komplette Beschreibung verwendet. Schöner wäre jedoch die Längenvorgabe für Meta-Descriptions der Suchmaschinen zu beachten. Diese liegt bei maximal 160 Zeichen.

Dazu benötigen wir zwei weitere Funktionen. Mit der untenstehenden Funktion replaceHtmlTags ersetzen wir ggf. vorhandene HTML-Tags in der Beschreibung, denn die möchten wir in unserer Meta-Description nicht haben. Mit der zweiten Funktion wordTruncate erreichen wir die Längenvorgabe. Der Code sorgt dafür, dass nicht einfach nur nach 160 Zeichen getrennt wird und damit evtl. mitten im Wort abgeschnitten wird, sondern es wird nach dem letzten Wort abgeschnitten das noch innerhalb der 160 Zeichen liegt.

function replaceHtmlTags($string) {
	return preg_replace("/<.*?>/", "", $string);
}

function wordTruncate($string, $desired_max_width) {
  $parts = preg_split('/([\s\n\r]+)/u', $string, -1, PREG_SPLIT_DELIM_CAPTURE);
  $parts_count = count($parts);

  $length = 0;
  $last_part = 0;
  for (; $last_part < $parts_count; ++$last_part) {
    $length += strlen($parts[$last_part]);
    if ($length > $desired_max_width) { break; }
  }

  return implode(array_slice($parts, 0, $last_part));
}

Die Routine get_fullDescription aus dem Code oben wird nochmal etwas modifiziert und sieht damit so aus:

// callback für Ersetzung in YOAST SEO 
function get_fullDescription() {
    global $post;
    return wordTruncate(replaceHtmlTags($post->post_content), 160);
}

Der vollständige Code sieht somit so aus:

// callback für Ersetzung in YOAST SEO 
function get_fullDescription() {
    global $post;
    return wordTruncate(replaceHtmlTags($post->post_content), 160);
}

// Registriere eigene YOAST-Variablenersetzung
function register_custom_yoast_variables() {
    wpseo_register_var_replacement( '%%fulldes%%', 'get_fullDescription', 'advanced', 'Full Description' );
}

// YOAST-Variablenersetzung bekannt machen
add_action('wpseo_register_extra_replacements', 'register_custom_yoast_variables');

function replaceHtmlTags($string) {
	return preg_replace("/<.*?>/", "", $string);
}

function wordTruncate($string, $desired_max_width) {
  $parts = preg_split('/([\s\n\r]+)/u', $string, -1, PREG_SPLIT_DELIM_CAPTURE);
  $parts_count = count($parts);

  $length = 0;
  $last_part = 0;
  for (; $last_part < $parts_count; ++$last_part) {
    $length += strlen($parts[$last_part]);
    if ($length > $desired_max_width) { break; }
  }

  return implode(array_slice($parts, 0, $last_part));
}

Somit haben wir ohne die kostenpflichtige YOAST SEO WooCommerce – Erweiterung erreicht, die Produktbeschreibung als Meta-Description anzuzeigen.

WooCommerce-Kurzbeschreibung als Meta-Description

Möchte man hingegen die Kurzbeschreibung als Meta-Description nutzen, bietet YOAST SEO die Funktion in der kostenfreien Version an, wenn auch etwas versteckt.

Um die Kurzbeschreibung als Meta-Description zu verwenden so tragen wir unter SEO -> Darstellung in Suchergebnissen -> Produkte die Variable %%wc_shortdesc%% ein.

Viel Erfolg bei Ihrem SEO-Projekt!

Haben Sie weitere Fragen oder benötigen Sie Unterstützung, gerne unterstütze ich Sie. Schreiben Sie mir ganz unverbindlich oder rufen Sie an.

CITROWEB kontaktieren

Kategorie: SEO, WooCommerce, WordPress

Lösung für Google Search Console – Warnung: Feld „brand“ fehlt

28. Oktober 2021

Feld "brand" fehlt

Wenn man einen Shop mit WooCommerce betreibt hat man sicherlich schon die nebenstehende Meldung in Google Search Console unter Verbesserungen -> Produkte entdeckt.

Standardmäßig fügt das WooCommerce-Plugin für WordPress das „Brand“-Schema nicht zu WooCommerce Produktseiten hinzu. Das bedeutet, dass es eine Lücke im WooCommerce-Schema gibt.

Auf verschiedenen Support-Threads auf WordPress.org und Github heißt es, das lässt sich durch einen Kauf eines WooCommerce-Plugin lösen. Bei etwas so Grundlegendem wie diesem kann man zu Recht sehr frustriert sein.

Letztlich lautet die Rechtfertigung von WooCommerce, dass es sich hierbei nicht um essenzielle Teile von Schema handelt – sie erzeugen nur Warnungen in der Google Search Console, aber keine Fehler. Theoretisch sind sie also keine große Sache.

Wenn Sie jedoch diese Lücke schließen möchten, haben Sie mehrere Möglichkeiten. Es gibt „Schema-Plugins“, die Ihnen helfen, dies zu flicken – das Yoast SEO WooCommerce – Plugin füllt die Lücken für Sie – aber es ist ein bisschen übertrieben dafür ca. 70 Euro pro Jahr auszugeben. Es sei denn man hat oder benötigt es aus einem anderen wichtigen Grund. Dann hilft diese Anleitung weiter.

Viele Menschen meiden codebasierte Lösungen denn sie müssen „gewartet“ werden und gehen regelmäßig kaputt. Für eine E-Commerce-Website mit der Sie Geld verdienen, ist das also nicht so toll!

Code zur Behebung von Google Search Console – Warnung für Feld „brand“

Mit dem Code Snippets Plugin lassen sich kleine Code-Schnippsel wie der folgende in die Seite integrieren. Profis haben für solche Anpassungen ein separates Plugin oder nutzen die functions.php ihres Themes.

/*
* Füge "Brand"-Schema in die Strukturierten Daten ein
*/
function custom_woocommerce_structured_data_product ($data) {
	global $product;
	$data['brand'] = ['@type' => 'Brand', 'name' => 'Meine Marke'];
	return $data;
}
add_filter( 'woocommerce_structured_data_product', 'custom_woocommerce_structured_data_product' );

Sind Sie der Hersteller Ihrer Produkte oder führen Sie nur Waren von einer Marke, so können sie hier Ihre Marke statt „Meine Marke“ (Hochkommata müssen bleiben) einfügen.

Alternativ lässt sich die Marke auch aus der Eigenschaft Marke (Brand) mit $product->get_attribute(‚pa_brand‘) auslesen.

Das Code-Snippet sähe dann so aus:

/*
* Füge "Brand"-Schema in die Strukturierten Daten ein
*/
function custom_woocommerce_structured_data_product ($data) {
	global $product;
        $data['brand'] = ['@type' => 'Brand', 'name' => $product->get_attribute('pa_brand') ?? null];
	return $data;
}
add_filter( 'woocommerce_structured_data_product', 'custom_woocommerce_structured_data_product' );

Ich nutze bei einem Kunden eine Produkteigenschaft Hersteller. Deshalb setze ich das Feld „Brand“ mit dem Hersteller mit dem Befehl $product->get_attribute(‚pa_hersteller‘).

Um den Erfolg zu testen nutzen Sie das praktische Online-Tool von Google: Strukturierte Daten testen.

Kategorie: Google Search Console, SEO, WooCommerce

Genesis Visual Hook Guide

2. Oktober 2021

Der Genesis Visual Hook Guide zeigt eine Übersicht wo sich die visuellen Hooks befinden. Das ist nützlich beim Aufbau einer Webseite.

Genesis Visual-Hook-Guide

Der Visual Hook Guide befindet sich hier.

Kategorie: Entwicklung, Genesis-Framework

Wrap-DIVs (.wrap) in Genesis entfernen

2. Oktober 2021

.wrap-DIVs im DOM

Genesis fügt in sämtliche HTML-Elemente der Seite .wrap-DIVs ein um z.B. zentrierte Ausrichtung zu ermöglichen.

Es empfiehlt sich die DOM-Tiefe zu verringern um die Hygiene-Faktoren einer Seite zu verbessern. Benötigt man die .wrap-DIVs nicht, so gibt es hier Potential um die DOM-Tiefe zu verringern. Die wrapper-DIVs (.wrap) können einfach programmatisch entfernt werden.

Um die .wrap-DIVs von allen Seitenelementen zu entfernen, wird folgender Code benötigt:

remove_theme_support( 'genesis-structural-wraps' );

Um die .wrap-DIVs für alle Elemente außer für den Header zu entfernen, sieht der Code wie folgt aus:

add_theme_support( 'genesis-structural-wraps', array( 'header' ) );

Eine Übersicht über alle Elemente finden Sie hier.

Kategorie: Entwicklung, Genesis-Framework

Anzahl der ähnlichen Produkte in WooCommerce ändern

17. September 2021

Anzahl der ähnlichen Produkte in WooCommerce ändern

Unterhalb der Produktbeschreibung zeigt WooCommerce ähnliche Produkte an. Die Anzahl lässt sich mit folgendem Code einstellen:

add_filter( 'woocommerce_output_related_products_args', 'iphf_change_number_related_products', 10 );
function iphf_change_number_related_products( $args ) {
	$args['posts_per_page'] = 5; // Anzahl der ähnlichen Produkte
	$args['columns'] = 5; // Anzahl der Produkte pro Zeile
	return $args;
}

Kategorie: Entwicklung, WooCommerce

  • « Go to Previous Page
  • Seite 1
  • Interim pages omitted …
  • Seite 12
  • Seite 13
  • Seite 14
  • Seite 15
  • Seite 16
  • Go to Next Page »

Haupt-Sidebar

  • How to remove dashicons in WordPress frontend?
  • How do I create a website (homepage) with ChatGPT?
  • Can I create a website (homepage) with ChatGPT?
  • iOS restrictions re: bringing up the keyboard on programmatic focus
  • iOS restrictions re: bringing up the keyboard on programmatic focus
  • Remove user listing from WP-JSON
  • Benutzerauflistung aus WP-JSON entfernen
  • What does „Video is not the main content of the page“ mean?
  • Was hat es mit „Das Video ist nicht der Hauptinhalt der Seite“ auf sich?
  • Remove WordPress logo from toolbar
  • Efficient onboarding simplified: LearnSuite – the cloud application for digital onboarding
  • Wir stellen vor: LearnSuite – Die Cloudanwendung für digitales Onboarding
  • Howto: How do I create a website (homepage) with ChatGPT?
  • Howto: Wie erstelle ich mit ChatGPT eine Website (Homepage)?
  • Can I create a website (homepage) with ChatGPT?
  • Kann ich mit ChatGPT eine Website (Homepage) erstellen?
  • Set noindex nofollow via .htaccess HTTP header
  • Über .htaccess X-Robots-Tag noindex nofollow setzen
  • How to remove WordPress Dashicons in frontend?
  • Wie lassen sich Dashicons im WordPress-Frontend entfernen?
  • DSGVO (3)
  • GDPR (3)
  • Genesis Framework (10)
  • Genesis-Framework (9)
  • Google Search Console (4)
  • Google Search Console (4)
  • Linux (3)
  • Linux (3)
  • mobile (3)
  • Mobile (3)
  • Network (1)
  • Netzwerk (1)
  • SEO (5)
  • SEO (5)
  • Trends (3)
  • Trends (4)
  • Uncategorized (3)
  • Web development (1)
  • Web hosting (1)
  • Webentwicklung (1)
  • Webhosting (1)
  • WooCommerce (9)
  • WooCommerce (9)
  • WordPress (24)
  • WordPress (23)

Footer

Logo




© 2026 CITROWEB
  • Datenschutz
  • Impressum