Beste WooCommerce-Code-Snippets für WordPress

Veröffentlicht: 2023-05-12

Möchten Sie die besten WooCommerce-Code-Snippets für WordPress kennenlernen? Wenn Sie planen, Ihren Online-Shop zu optimieren und weitere Funktionen hinzuzufügen, lesen Sie diesen Artikel weiter. Dieser Leitfaden zeigt Ihnen eine Reihe von Codefragmenten, die Sie kennen sollten.

Aber sehen wir uns zunächst an, was ein Code-Snippet ist und warum wir eines verwenden müssen.

Was ist ein Code-Snippet?

Ein Code-Snippet ist ein kleiner Codeabschnitt, der eine bestimmte Aufgabe oder Funktion auf einer Website oder einem Programm ausführt. Es wird häufig verwendet, um die Website/das Tool anzupassen und die Funktionen zu verbessern.

Sie können Codeausschnitte in jeder Programmiersprache schreiben, deren Komplexität von einer einfachen einzeiligen Funktion bis hin zu einer mehrzeiligen Funktion oder einem mehrzeiligen Algorithmus reicht. Darüber hinaus können Sie sie auch online in Codebibliotheken, Foren und Programmierblogs finden und sie werden häufig von Entwicklern geteilt und an ihre spezifischen Bedürfnisse angepasst.

Die Verwendung von Codefragmenten kann Zeit und Aufwand sparen. Es ist jedoch wichtig, die Funktionsweise des Codes zu verstehen und sicherzustellen, dass er sicher ist und keine Schwachstellen verursacht. Darüber hinaus ist es bei der Verwendung von Codefragmenten aus externen Quellen unerlässlich, deren Lizenz- und Namensnennungsanforderungen zu prüfen, um Urheberrechtsverletzungen zu vermeiden.

Warum WooCommerce-Codefragmente zu WordPress hinzufügen?

Wenn Sie WooCommerce-Code-Snippets für WordPress verwenden, profitieren sowohl der Eigentümer als auch die Entwickler davon.

Sie können beispielsweise WooCommerce-Codefragmente verwenden, um neue Funktionen hinzuzufügen oder bestehende Funktionen eines Online-Shops zu ändern. Dies kann dazu beitragen, das Benutzererlebnis zu verbessern und den Umsatz zu steigern.

Sie können beispielsweise ein Code-Snippet verwenden, um eine benutzerdefinierte Produktsortierungsoption hinzuzufügen oder den Checkout-Prozess so zu ändern, dass er besser an die Bedürfnisse eines bestimmten Unternehmens passt.

Außerdem kann die Verwendung von WooCommerce-Code-Snippets für WordPress effizienter sein als die Installation und Konfiguration eines separaten Plugins, da dadurch gezieltere Änderungen möglich sind und potenzielle Konflikte mit anderen Plugins oder Themes vermieden werden.

Darüber hinaus können WooCommerce-Code-Snippets dazu beitragen, die Sicherheit und Leistung eines Online-Shops zu verbessern. Durch das Hinzufügen von benutzerdefiniertem Code zur Datei „functions.php“ oder einer separaten Plugin-Datei können Entwickler sicherstellen, dass der Code für die spezifischen Anforderungen der Website optimiert ist.

Schließlich können Codeausschnitte eine kostengünstigere Lösung darstellen als die Beauftragung eines Entwicklers. Auch wenn einige Anpassungen möglicherweise komplexere Entwicklungsarbeiten erfordern, können Sie viele Änderungen mithilfe einfacher Codefragmente aus dem Internet erreichen.

Allerdings kann schlecht geschriebener Code Fehler und Sicherheitslücken verursachen. Wir empfehlen daher, den Code in einer Staging-Umgebung zu testen und zu verstehen, bevor Sie ihn einer Website hinzufügen.

Bewahren Sie außerdem eine Sicherungskopie der Dateien und der Datenbank der Website auf, um Ihre harte Arbeit zu sichern.

So fügen Sie WooCommerce-Codefragmente zu WordPress hinzu

Sie können WooCommerce-Codefragmente in wenigen einfachen Schritten zu WordPress hinzufügen:

  • Öffnen Sie die Datei „functions.php“: In der Datei „functions.php“ finden Sie die meisten WordPress-Codefragmente. Es befindet sich normalerweise im Theme-Ordner. Sie können über das WordPress-Dashboard oder einen FTP-Client darauf zugreifen.
  • Fügen Sie das Code-Snippet hinzu: Kopieren Sie das gewünschte Snippet und fügen Sie es in die Datei „functions.php“ ein. Stellen Sie sicher, dass Sie es an der richtigen Stelle, z. B. am Ende der Datei, nach vorhandenem Code hinzufügen.
  • Speichern Sie die Änderungen: Sobald Sie das Code-Snippet hinzugefügt haben, speichern Sie die Änderungen in der Datei „functions.php“. Dadurch wird der gerade eingegebene Code aktiviert.
  • Testen Sie die Funktionalität: Nachdem Sie das Code-Snippet hinzugefügt haben, testen Sie die neue Funktionalität, um sicherzustellen, dass sie wie vorgesehen funktioniert.

Wenn Sie das Code-Snippet jedoch nicht zur Datei „functions.php“ des übergeordneten Themes hinzufügen möchten, können Sie ein benutzerdefiniertes untergeordnetes Theme erstellen. Auf diese Weise verursachen die Theme-Updates keine Probleme.

Beste WooCommerce-Code-Snippets für WordPress

Jetzt haben wir erfahren, warum und wie man WooCommerce-Code-Snippets für WordPress hinzufügt. Kommen wir als Nächstes zu den besten WooCommerce-Codefragmenten, die für Ihre allgemeinen Anforderungen ausgewählt wurden.

Kurz gesagt, die Codes, die wir teilen werden, werden Ihnen dabei helfen:

  • Hinzufügen einer benutzerdefinierten Produktregisterkarte
  • Fügen Sie einem Theme WooCommerce-Unterstützung hinzu
  • Fügen Sie WooCommerce eine benutzerdefinierte Währung hinzu
  • Zeigen Sie den Link „Mein Konto“ in einer Vorlage an
  • Bestellungen automatisch abschließen
  • Ändern Sie die Anzahl der im Shop angezeigten Produkte
  • Suche deaktivieren
  • Ändern Sie den Text der Schaltfläche „Zum Warenkorb hinzufügen“.
  • Passen Sie den Titel der Shop-Seite an

Schauen wir uns jeden Code genauer an.

1) Fügen Sie eine benutzerdefinierte Produktregisterkarte hinzu

Das Hinzufügen einer benutzerdefinierten Produktregisterkarte in WooCommerce ist eine großartige Möglichkeit, zusätzliche Informationen zu Ihren Produkten anzuzeigen. Hier ist also ein Codeausschnitt, mit dem Sie einen hinzufügen können:

 // Benutzerdefinierte Produktregisterkarte hinzufügen

add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab' );
Funktion add_custom_product_tab( $tabs ) {
$tabs['custom_tab'] = array(
'title' => __( 'Benutzerdefinierte Registerkarte', 'woocommerce' ),
'Priorität' => 50,
'callback' => 'custom_product_tab_content'
);

return $tabs;

}

// Benutzerdefinierter Inhalt der Produktregisterkarte

Funktion custom_product_tab_content() {
echo '<h2>Benutzerdefinierte Produktregisterkarte</h2>';
echo '<p>Benutzerdefinierter Inhalt kommt hierher.</p>';
}

Dieser Code fügt der Produktseite eine neue Registerkarte „Benutzerdefinierte Registerkarte“ mit einer Priorität von 50 hinzu. Darüber hinaus können Sie den Titel und den Inhalt der benutzerdefinierten Produktregisterkarte entsprechend Ihren Anforderungen ändern. Die Rückruffunktion custom_product_tab_content zeigt den Inhalt der Registerkarte an. Sie können den Code an Ihre Bedürfnisse anpassen.

2) Deklarieren Sie die WooCommerce-Unterstützung in einem Drittanbieter-Theme

Wenn Sie ein Theme eines Drittanbieters verwenden, das standardmäßig keine WooCommerce-Unterstützung bietet, können Sie das Problem beheben, indem Sie den folgenden Codeausschnitt zur Datei „functions.php“ Ihres Website-Themes hinzufügen:

 // WooCommerce-Unterstützung zum Theme hinzufügen

Funktion mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Quelle: Mittel.

3) Hinzufügen einer benutzerdefinierten Währung zu WooCommerce

Wenn Sie WooCommerce eine benutzerdefinierte Währung hinzufügen möchten, können Sie den folgenden Codeausschnitt verwenden:

 // Benutzerdefinierte Währung zu WooCommerce hinzufügen

Funktion add_my_currency( $currencies ) {
$currencies['ABC'] = __( 'Meine Währung', 'woocommerce' );
$currencies zurückgeben;
}

add_filter( 'woocommerce_currencies', 'add_my_currency' );
Funktion add_my_currency_symbol( $currency_symbols ) {
$currency_symbols['ABC'] = '$'; // Ändern Sie ABC in Ihren benutzerdefinierten Währungscode und $ in Ihr Währungssymbol.
return $currency_symbols;
}

add_filter( 'woocommerce_currency_symbols', 'add_my_currency_symbol' );

Hier verwenden wir zwei Filter – woocommerce_currencies und woocommerce_currency_symbols , um unsere benutzerdefinierte Währung und ihr Symbol hinzuzufügen. Zunächst fügen Sie den Namen und Code Ihrer Währung zur Liste der verfügbaren Währungen hinzu. Zweitens können Sie das Währungssymbol für den benutzerdefinierten Währungscode hinzufügen.

4) Zeigen Sie den Link „Mein Konto“ in einer Vorlagendatei an

Um meinen Kontolink in einer Vorlagendatei in WooCommerce anzuzeigen, können Sie den folgenden Codeausschnitt verwenden:

 <?php if ( is_user_logged_in() ) : ?>

<a href="<?php echo esc_url( wc_get_account_endpoint_url( 'dashboard' ) ); ?>"><?php esc_html_e( 'Mein Konto', 'woocommerce' ); ?></a>

<?php sonst: ?>

<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php esc_html_e( 'Anmelden / Registrieren', 'woocommerce' ); ?></a>

<?php endif; ?>

Dieser Code prüft mit der Funktion is_user_logged_in() , ob der Benutzer angemeldet ist.

Wenn der Benutzer angemeldet ist, wird mit der Funktion wc_get_account_endpoint_url( 'dashboard' ) ein Link zum Dashboard angezeigt. Wenn der Benutzer jedoch nicht angemeldet ist, wird mit der Funktion wc_get_page_permalink( 'myaccount' ) ein Link zur Seite „Mein Konto“ angezeigt.

Sie können diesen Code zu jeder Vorlagendatei in Ihrem WooCommerce-Theme hinzufügen, in der Sie den Link zu meinem Konto anzeigen möchten. Sie können es beispielsweise zu Ihrer header.php-Datei hinzufügen, um den Link im Header Ihrer Website anzuzeigen.

5) Bestellungen automatisch abschließen

Wenn Sie Bestellungen in WooCommerce automatisch abschließen möchten, können Sie das folgende Code-Snippet verwenden:

 // Bestellungen automatisch vervollständigen
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );

Funktion custom_woocommerce_auto_complete_order( $order_id ) {
if ( ! $order_id ) {
zurückkehren;
}

$order = wc_get_order( $order_id );
$order->update_status( 'abgeschlossen' );
}

Quelle: StackOverflow

Dieser Code fügt der Funktion woocommerce_thankyou einen Aktions-Hook hinzu, der ausgelöst wird, wenn eine Bestellung abgeschlossen ist. Wenn dieser Hook aktiviert ist, wird die Funktion custom_woocommerce_auto_complete_order ausgeführt.

Die Funktion prüft zunächst, ob die Variable $order_id gesetzt ist. Wenn es nicht gesetzt ist, wird es zurückgegeben. Andernfalls greift es über die Funktion wc_get_order() auf das Auftragsobjekt zu.

Schließlich verwendet es die Methode update_status() , um den Bestellstatus auf „abgeschlossen“ zu setzen.

Bitte beachten Sie, dass die automatische Vervollständigung von Bestellungen möglicherweise nicht für alle Produkte oder Unternehmen geeignet ist. Daher ist es wichtig, Ihre spezifischen Bedürfnisse zu berücksichtigen, bevor Sie diesen Code aktivieren.

6) Ändern Sie die Anzahl der pro Seite angezeigten Produkte

Wenn Sie die Anzahl der pro Seite angezeigten Produkte in WooCommerce ändern möchten, können Sie das folgende Code-Snippet verwenden:

 // Produkte pro Seitenzahl ändern
add_filter( 'loop_shop_per_page', 'custom_loop_shop_per_page', 22 );
Funktion custom_loop_shop_per_page( $cols ) {
$cols = 14; // Ändern Sie diese Zahl auf die gewünschte Anzahl an Produkten pro Seite.
return $cols;

}

Dieser Code fügt der Funktion „loop_shop_per_page“ einen Filter hinzu. Dadurch wird die Anzahl der pro Seite in WooCommerce angezeigten Produkte gesteuert. Anschließend wird die Funktion „custom_loop_shop_per_page“ ausgeführt, die die aktuelle Anzahl der Spalten als Parameter übernimmt.

In der Funktion können Sie auch die Variable $cols auf die gewünschte Anzahl an Produkten pro Seite setzen (in diesem Beispiel 14). Schließlich erhalten Sie die aktualisierte Anzahl der Spalten.

Eine Änderung der Anzahl der pro Seite angezeigten Produkte kann sich auf die Benutzererfahrung und die Ladezeit der Seite auswirken. Daher ist es wichtig, Ihre spezifischen Bedürfnisse zu berücksichtigen, bevor Sie diese Einstellung ändern.

7) Deaktivieren Sie die Suche

Um die Suche in WordPress zu deaktivieren, können Sie den folgenden Codeausschnitt verwenden:

 // Suche deaktivieren
Funktion fb_filter_query( $query, $error = true ) {
if ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;

// zum Fehler
if ( $error == true )
$query->is_404 = true;
}
}

add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Quelle: StackOverflow

Dieser Code verwendet eine benutzerdefinierte Funktion namens custom_disable_search() , um die Suchfunktion in WordPress zu deaktivieren. Hier fügen Sie der Funktion parse_query einen Aktions-Hook hinzu, der ausgelöst wird, wenn eine Suchabfrage ausgeführt wird.

In der Funktion wird geprüft, ob die aktuelle Abfrage eine Suchabfrage ist (is_search()); Wenn dies der Fall ist, wird die Eigenschaft is_search des Abfrageobjekts auf null gesetzt. Außerdem wird die Abfragevariable s auf null gesetzt, wodurch die Suchabfrage effektiv deaktiviert wird.

Schließlich fügt dieses Code-Snippet einen Filter zu get_search_form hinzu, um das Suchformular auf Ihrer WordPress-Site auszublenden.

8) Ändern Sie den Text der Schaltfläche „Zum Warenkorb hinzufügen“.

Um den Text der Schaltfläche „In den Warenkorb“ in WooCommerce zu ändern, können Sie den folgenden Codeausschnitt verwenden:

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );

Funktion custom_add_to_cart_text() {
return __( 'Jetzt kaufen', 'woocommerce' );
}

Quelle: Njengah

Dieser Code fügt zwei Filter zu den Funktionen woocommerce_product_single_add_to_cart_text und woocommerce_product_add_to_cart_text hinzu, die den Text der Schaltfläche „In den Warenkorb“ in WooCommerce steuern. Anschließend wird die Funktion custom_add_to_cart_text() ausgeführt, die den aktualisierten Schaltflächentext zurückgibt.

Wir verwenden die Funktion __() , um auf den „Jetzt kaufen“-Text zuzugreifen, der in der WooCommerce-Übersetzungsdatei definiert ist. Wenn Sie den Text ändern möchten, ersetzen Sie „Jetzt kaufen“ durch den gewünschten Text.

9) Ersetzen Sie den Titel der Shop-Seite in WooCommerce

Um den Titel der Shop-Seite in WooCommerce zu ersetzen, können Sie das folgende Code-Snippet verwenden:

 add_filter( 'woocommerce_page_title', 'custom_shop_page_title' );
Funktion custom_shop_page_title( $page_title ) {
if( 'shop' == $page_title ) {
return __( 'New Shop Title', 'woocommerce' );
}

return $page_title;
}

Dieser Code fügt der Funktion woocommerce_page_title einen Filter hinzu, der den Titel der WooCommerce-Shop-Seite steuert. Anschließend wird die Funktion „custom_shop_page_title()“ ausgeführt, die prüft, ob der Seitentitel „Shop“ lautet und, wenn ja, den aktualisierten Titel („Neuer Shop-Titel“) zurückgibt.

Dieses Code-Snippet verwendet die Funktion __() , um auf den übersetzten Text für den aktualisierten Titel der Shop-Seite zuzugreifen, der in der WooCommerce-Übersetzungsdatei definiert ist. Wenn Sie den Text jedoch ändern möchten, ersetzen Sie „Neuer Shop-Titel“ durch den gewünschten Text.

Abschluss

Die Verwendung von WooCommerce-Code-Snippets für WordPress ist eine leistungsstarke Möglichkeit, Ihren Online-Shop anzupassen und neue Funktionen hinzuzufügen. Wenn Sie beispielsweise das Erscheinungsbild Ihres Shops oder den Checkout-Prozess ändern oder neue Funktionen hinzufügen möchten, können Code-Snippets Ihnen dabei helfen, Ihre Ziele zu erreichen.

Um ein Code-Snippet hinzuzufügen, fügen Sie den Code in die Datei „functions.php“ Ihres untergeordneten Themes ein oder erstellen Sie ein benutzerdefiniertes Plugin. Bedenken Sie jedoch, dass eine Änderung des Codes Ihrer Website unbeabsichtigte Folgen haben kann. Wir empfehlen daher immer, ein Backup Ihrer Website zu erstellen, bevor Sie Änderungen vornehmen.

Mit den oben bereitgestellten Codes können Sie einen fantastischen WooCommerce-Shop mit vielen Anpassungen betreiben. Um es zusammenzufassen: Wir haben Snippets für geteilt

  • Hinzufügen einer benutzerdefinierten Produktregisterkarte
  • Fügen Sie einem Theme WooCommerce-Unterstützung hinzu
  • Fügen Sie WooCommerce eine benutzerdefinierte Währung hinzu
  • Zeigen Sie den Link „Mein Konto“ in einer Vorlage an
  • Bestellungen automatisch abschließen
  • Ändern Sie die Anzahl der im Shop angezeigten Produkte
  • Suche deaktivieren
  • Ändern Sie den Text der Schaltfläche „Zum Warenkorb hinzufügen“.
  • Passen Sie den Titel der Shop-Seite an

Sie können je nach Ihren Anforderungen einen Code auswählen und damit arbeiten.

Wir hoffen, dass Sie diesen Artikel nützlich fanden und es Ihnen Spaß gemacht hat, ihn zu lesen. Wenn Sie möchten, teilen Sie diesen Beitrag bitte mit Ihren Freunden und Bloggerkollegen in den sozialen Medien. Sie können auch unser Blog-Archiv durchstöbern, um weitere WordPress/WoCommerce-Anleitungen zu erfahren.

Müssen wir diesem Leitfaden weitere Auszüge hinzufügen?

Lass es uns unten in den Kommentaren wissen.

Ähnliche Artikel, die Ihnen gefallen könnten:

  • So filtern Sie WooCommerce-Produkte nach Attributen
  • Beste WooCommerce-Spenden-Plugins
  • Beste WooCommerce-Lizenzmanager-Plugins