So passen Sie WooCommerce-Vorlagen programmgesteuert an

Möchten Sie Vorlagen auf Ihrer Website bearbeiten? Diese Anleitung zeigt Ihnen , wie Sie WooCommerce-Vorlagen programmgesteuert anpassen, sowohl mit Hooks als auch mit Überschreiben .

Warum WooCommerce-Vorlagen bearbeiten?

Online-Shopping ist bequemer und schneller als der Gang in den stationären Handel, daher ist eCommerce in den letzten Jahren sehr beliebt geworden. Bei so viel Konkurrenz reicht es nicht, seinen WooCommerce-Shop einzurichten und seine Produkte online zu stellen. Sie müssen Wege finden, sich zu differenzieren und sich von der Masse abzuheben .

Eine der besten Möglichkeiten, dies zu tun, ist die Anpassung Ihres Shops. Neben der Änderung der Kopfzeile und der Bearbeitung wichtiger Seiten wie der Kasse oder der Shop-Seite können Sie auch die von Ihnen verwendeten Vorlagen anpassen. Es gibt nicht so viele Websites, die ihre Vorlagen bearbeiten, sodass Sie sich dadurch einen Vorteil gegenüber Ihren Mitbewerbern verschaffen können .

Wenn Sie über Programmierkenntnisse verfügen, wissen Sie wahrscheinlich, dass die Verwendung eines untergeordneten Themas beim Bearbeiten Ihres Shops empfohlen wird. In ähnlicher Weise bieten die in WordPress und WooCommerce integrierten Hooks viele Möglichkeiten, jede Website zu bearbeiten und neue Funktionen hinzuzufügen.

So passen Sie WooCommerce-Vorlagen programmgesteuert an

Es gibt zwei Möglichkeiten, WooCommerce-Vorlagen programmgesteuert anzupassen:

1. Mit Haken
2. Überschreiben der Vorlagen

Jede dieser Methoden dient unterschiedlichen Zwecken. Werfen wir einen genaueren Blick auf ihre Hauptunterschiede.

Vorlagendateien überschreiben oder Hooks verwenden?

Das Anpassen Ihres Shops mit Hooks ist eine empfohlene Vorgehensweise. Beim Anpassen von WooCommerce mit Hooks können jedoch Inkompatibilitätsprobleme auftreten. Für komplexere Anpassungen kann das Überschreiben von WooCommerce-Vorlagendateien eine bessere Option sein.

Es ist wichtig zu beachten, dass beim Überschreiben einer Vorlagendatei die Hooks, die an dieser Datei arbeiten, nicht mehr funktionieren. Jeder Hook zeigt auf eine bestimmte Datei, sodass Sie sie nicht verwenden können, wenn Sie dieselbe Datei bearbeiten, die den Hook auslöst.

Nehmen wir zum Beispiel die Datei single-product.php , um zu sehen, wie Hooks erstellt werden. Beachten Sie auch, wo sich die Haken vor und nach der Schlaufe befinden.

 if ( ! definiert( 'ABSPATH' ) ) {
        Ausfahrt; // Beenden bei direktem Zugriff
 }
 get_header( 'shop' ); ?>
 <?php
                /**
                 * Haken woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (gibt Eröffnungs-Divs für den Inhalt aus)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action( 'woocommerce_before_main_content' );
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'content', 'single-product' ); ?>
                <?php endwhile; // Ende der Schleife. ?>
        <?php
                /**
                 * woocommerce_after_main_content-Hook.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (gibt schließende Divs für den Inhalt aus)
                 */
                do_action( 'woocommerce_after_main_content' );
        ?>
        <?php
                /**
                 * woocommerce_sidebar-Hook.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action( 'woocommerce_sidebar' );
        ?>
 <?php
 get_footer( 'shop' );

Wenn Sie sich das Skript ansehen, werden Sie sehen, wie wir die Hooks auf do_action('name-of-the-hook'); Linien.

Angenommen, Sie haben den folgenden Hook in der Datei functions.php Ihres Child-Themes:

 add_action('woocommerce_after_main_content',function(){echo „benutzerdefinierter Inhalt nach einzelner Produktvorlagendatei“;});

Sie können denselben Inhalt wie folgt direkt in der Vorlagendatei wiederholen:

 <?php endwhile; // Ende der Schleife. ?>
        <?php
 Echo „benutzerdefinierter Inhalt nach einzelner Produktvorlagendatei“;
                /**
                 * woocommerce_after_main_content-Hook.
 do_action( 'woocommerce_after_main_content' );

Dadurch wird jedoch die do_action('woocommerce_after_main_content'); Funktion wird nutzlos, da Sie Ihren Code dort hinzugefügt haben, anstatt ihn mit dem Haken zu ziehen. Vielleicht möchten Sie also alle unnötigen Hooks in der Datei entfernen , indem Sie do_action('name-of-the-hook'); Abschnitte.

Denken Sie daran, dass, wenn Sie den woocommerce_after_main_content() Hook irgendwo anders auf Ihrer Website verwenden und Sie die do_action( 'name_of_your_hook' ); In dieser Datei funktioniert der Haken nicht mehr.

Nachdem Sie die Hooks und die unnötigen PHP-Tags entfernt haben, sollte Ihre Datei so aussehen:

 if ( ! definiert( 'ABSPATH' ) ) {
 Ausfahrt; // Beenden bei direktem Zugriff
 }
 get_header( 'shop' );
 while (have_posts()) :
 die Post();
 wc_get_template_part( 'content', 'single-product' );
 am Ende; // Ende der Schleife.
 do_action( 'woocommerce_sidebar' );
 get_footer( 'shop' );

HINWEIS : Das Entfernen von Hooks auf diese Weise kann sich auf Code von Drittanbietern wie Plugins und Designs auswirken, Fehler verursachen oder Ihre Website beschädigen. Es wird davon ausgegangen, dass Sie wissen, was Sie tun.

Passen Sie WooCommerce-Vorlagendateien an und überschreiben Sie sie

Das Überschreiben von WooCommerce-Vorlagendateien gibt Ihnen viel Flexibilität, um Ihren Shop anzupassen. Wie bereits erwähnt, müssen Sie jedoch verstehen, dass die Hooks, die an dieser Datei arbeiten, nicht mehr funktionieren, wenn Sie den Inhalt einer Vorlagendatei überschreiben. Darüber hinaus kann WooCommerce die Vorlagendateien von Zeit zu Zeit ändern. Wenn es also ein Update gibt und sie die Dateien ändern, stellen Sie möglicherweise fest, dass die von Ihnen bearbeitete Datei veraltet ist.

Was Sie beim Überschreiben von Vorlagen beachten sollten

Wenn Sie hier sind, haben Sie wahrscheinlich einige Programmierkenntnisse und wissen, wie man ein untergeordnetes Thema verwendet und installiert. Wenn dies nicht der Fall ist, lesen Sie unsere Anleitung zum Erstellen eines untergeordneten Designs oder verwenden Sie eines dieser Plugins.

Das Überschreiben von WooCommerce-Vorlagen ähnelt dem Überschreiben der Datei functions.php . Der Hauptunterschied besteht darin, dass Sie anstelle Ihrer Designdateien die Vorlagendateien von WooCommerce bearbeiten.

Dazu müssen Sie die gewünschte Vorlagendatei aus dem WooCommerce-Plugin-Vorlagenordner kopieren und in Ihr untergeordnetes Design im WooCommerce-Ordner einfügen. Wenn Sie der gleichen Struktur des WooCommerce-Vorlagenordners folgen, Dateinamen und Unterordner; Sie können Vorlagendateien überschreiben, sogar solche in Unterordnern.

Es gibt viele WooCommerce-Vorlagendateien und jede von ihnen ist für eine einzelne Aufgabe verantwortlich. Sie können die vollständige Liste der Vorlagendateien, die Sie bearbeiten können, sowie die Unterverzeichnisse und die Ordnerstruktur unter diesem Link überprüfen.

Wie Sie sehen können, befinden sich einige Dateien im Stammvorlagenordner sowie in mehreren Unterverzeichnissen. Sie können Dateien in jedem Unterverzeichnis auf die gleiche Weise anpassen, wie Sie Hauptdateien wie archive-product.php , single-product.php oder content-single-product.php . In ähnlicher Weise können Sie auch Dateien in den Ordnern „Warenkorb“, „Mein Konto“, „E-Mails“ oder „Checkout“ anpassen, wenn Sie denselben Ordnernamen und derselben Struktur wie in Ihrem untergeordneten Design folgen.

Wenn Sie also einige dieser Dateien anpassen möchten, würde Ihr untergeordnetes Thema in etwa so aussehen:

Sehen wir uns dennoch einige Beispiele an, wie Sie WooCommerce-Vorlagen anpassen können.

1. Shortcodes zur WooCommerce-Vorlage hinzufügen

Eine interessante Alternative ist die Verwendung von Shortcodes in Ihrem Code. Die meisten der vorhandenen Shortcodes sollten hier funktionieren, aber es ist auch üblich, einige nicht unterstützte Shortcodes außerhalb der offiziellen WooCommerce- und WordPress-Shortcodes zu finden.

Das folgende Skript fügt beispielsweise das Konto-Dashboard in alle einzelnen Produktseiten ein. Denken Sie daran, es in die single-product.php Datei einzufügen, die Sie in Ihrem Child-Theme erstellt haben.

 <?php
 if ( ! definiert( 'ABSPATH' ) ) {
 Ausfahrt; // Beenden bei direktem Zugriff
 }
 get_header( 'shop' );
 while (have_posts()) :
 die Post();
 wc_get_template_part( 'content', 'single-product' );
 am Ende; // Ende der Schleife.
 do_action( 'woocommerce_sidebar' );
 $t= '<div><h4>Mein Konto</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 echo $t;
 get_footer( 'shop' );

Und das ist das Ergebnis auf einer Live-Produktseite:

2. Inhalte für Kunden anzeigen, die dieses Produkt zuvor gekauft haben

Wenn Sie Kunden haben, die bereits ein Produkt bei Ihnen gekauft haben und wiederkommen, um dasselbe Produkt erneut zu kaufen, können Sie ihnen einen Rabattcode zur Verfügung stellen, um ihre Erfahrung zu verbessern und sie dazu zu bringen, immer wieder in Ihr Geschäft zurückzukehren.

Das folgende Skript zeigt Inhalte auf der Produktseite für wiederkehrende Kunden an, die dasselbe Produkt in der Vergangenheit gekauft haben. Noch einmal bearbeiten wir die Datei single-product.php :

 get_header( 'shop' );
 while (have_posts()) :
 die Post();
 wc_get_template_part( 'content', 'single-product' );
 am Ende; // Ende der Schleife.
 $aktueller_Benutzer = wp_get_aktueller_Benutzer();
 if ( wc_customer_bought_product( $aktueller_Benutzer->Benutzer-E-Mail, $aktueller_Benutzer->ID, $Produkt->get_id() ) ):
 echo '<div class="user-bought">&hearts; Hallo ' . $aktueller_Benutzer->Vorname . ', Sie haben dies schon einmal gekauft. Mit diesem Gutschein erneut kaufen: <b>PURCHASE_AGAIN_21</b></div>';
 endif;
 get_footer( 'shop' ); 

3. Entfernen Sie die Schaltfläche „In den Einkaufswagen“ basierend auf der Produktmenge und dem Gesamtpreis des Einkaufswagens

Ein weiteres interessantes Beispiel, wenn Sie Ihre WooCommerce-Vorlagen programmgesteuert anpassen möchten, ist das Hinzufügen der Warenkorb-Schaltfläche in Abhängigkeit von der Anzahl der Artikel, die der Kunde kauft, sowie dem Gesamtpreis des Warenkorbs.

In diesem Fall werden wir in die WooCommerce-Schleife gelangen, indem wir eine Datei verwenden, die sich im Schleifenordner im Vorlagenverzeichnis befindet. Erstellen Sie einfach eine neue add-to-cart.php Datei in einem Ordner namens loop im woocommerce- Ordner Ihres Child-Themes und fügen Sie dieses Skript ein:

 if ( ! definiert( 'ABSPATH' ) ) {
 Ausfahrt;
 }
 globales $Produkt;
 $count= WC()->cart->get_cart_contents_count();
 $total_price= WC()->cart->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 if($to_int>500){
 echo "Überschreitung des Limitbetrags für den gesamten Warenkorb";
 }
 elseif($count<10){
 echo apply_filters(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $product->add_to_cart_url() ),
 esc_attr( isset( $args['Menge'] ) ? $args['Menge'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$produkt,$args);
 }
 anders{
 echo "Mengenlimit überschritten";
 }

In diesem Fall fügen wir eine bedingte logische if() Anweisung hinzu, um zu prüfen, ob dem Warenkorb mehr als 10 Artikel hinzugefügt wurden und der Gesamtpreis des Warenkorbs nicht über 500 $ liegt.

Wie Sie sehen können, gelangen wir in den Geltungsbereich der WooCommerce-Klasse, indem wir das WooCommerce-Objekt auf diese Weise aufrufen: WC()->cart . Auf diese Weise können Sie basierend auf Ihren Bedingungen einige Informationen abrufen, um der Shop-Seite einen Warenkorb-Button hinzuzufügen oder nicht.

Hier ist das Ergebnis, wenn beide bedingten Einschränkungen angewendet werden:

Beachten Sie, dass dies nur auf der Hauptshopseite funktioniert. Sie müssen etwas mehr Code hinzufügen, wenn Sie dasselbe auf anderen Seiten tun möchten.

4. Bearbeiten Sie WooCommerce-E-Mail-Vorlagendateien

E-Mail-Vorlagen enthalten bereits nützliche Links zu Ihrer Website, aber einige Benutzer sind sich dessen möglicherweise nicht bewusst. Lassen Sie uns also einen Link zu den E-Mail-Vorlagen hinzufügen, über den sich Benutzer direkt von der erhaltenen E-Mail aus bei der Website anmelden können.

Wir fügen den Link in die Kopfzeile des E-Mail-Layouts ein, daher benötigen wir eine Kopie der Datei email-header.php , die sich im E-Mail-Ordner des Vorlagen-Unterverzeichnisses von WooCommerce befindet.

Erstellen Sie einen neuen Ordner in Ihrem Child-Theme und fügen Sie dort die gleichnamige Datei ein. Sie sehen die Startflaggen <!–header–> und <!–end header–> , und dort werden Sie den Link hinzufügen:

 <!-- Kopfzeile -->
 <table border="0" cellpadding="0" cellpacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Melden Sie sich bei Ihrem Konto an</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- Endheader →

Das ist es! Sie haben gerade die Header-Datei der WooCommerce-E-Mail-Vorlage bearbeitet. Auf die gleiche Weise können Sie alle E-Mail-Vorlagendateien bearbeiten, die sich in diesem Verzeichnis befinden. Weitere Informationen zum Testen Ihrer E-Mail-Vorlagen finden Sie in dieser vollständigen Anleitung.

Um eine Vorschau der Vorlagen anzuzeigen, empfehlen wir Ihnen, ein E-Mail-Vorschau-Plugin zu verwenden. Hier finden Sie einige der E-Mail-Plugins, die Sie verwenden können.

5. So wenden Sie den CSS-Stil auf WooCommerce-E-Mail-Vorlagen an

Eine weitere interessante Alternative besteht darin, den Stil Ihrer WooCommerce-Vorlagen programmgesteuert anzupassen. Nachdem Sie das HTML-Markup bearbeitet haben, können Sie den E-Mail-Vorlagen CSS-Stile hinzufügen. Da Inline-CSS keine empfohlene Vorgehensweise ist, müssen wir die Datei email-styles.php verwenden. Dies ist die Datei, die das CSS für die E-Mail-Vorlagen verarbeitet.

Um einen benutzerdefinierten CSS-Code auf E-Mails anzuwenden, kopieren Sie diese Datei aus den WooCommerce-Plugin-Ordnern und fügen Sie sie in den WooCommerce-Ordner Ihres Themes ein. Dies ist eine PHP-Datei, sodass Sie Variablen und Funktionen verwenden und Ihre eigene Logikanweisung erstellen und auf die Stile anwenden können:

 ein {
 Farbe: <?php echo esc_attr( $link_color ); ?>;
 Schriftstärke: normal;
 Textdekoration: unterstreichen;
 }

Und dies ist die benutzerdefinierte Linkauswahl:

 .my-link > a:nth-child(1){
 Farbe weiß;
 Schriftgröße: 14px;
 }

Fazit

Zusammenfassend ist das Bearbeiten von Vorlagendateien eine hervorragende Möglichkeit, sich von Ihren Mitbewerbern abzuheben und Ihren Kunden ein besseres Einkaufserlebnis zu bieten.

Es gibt zwei Möglichkeiten, WooCommerce-Vorlagen programmgesteuert anzupassen:

• Mit Haken
• Überschreiben der Vorlagen

Wir haben beide Methoden verglichen und Ihnen einige Beispiele gezeigt. Sie können die Skripte als Grundlage verwenden und herumspielen, um sie anzupassen und auf Ihr Geschäft anzuwenden.

Wenn Sie Probleme mit der Anleitung haben, teilen Sie uns dies in den Kommentaren unten mit und wir werden unser Bestes tun, um Ihnen zu helfen.