Wie man WooCommerce -Produktseiten anpassen

Schlüsselpunkte

• WooCommerce -Produktseitenanpassung verwendet Operationen und Filterhaken, um die Themendatei direkt zu ändern, ohne die Marke der Vorlagendatei zu ändern.
• Passen Sie die Produktseite an, indem Sie die Datei single-product.php und die Vorlage im Thema kopieren. Alle Änderungen werden in einer Kopie vorgenommen, um sicherzustellen, dass benutzerdefinierte Änderungen beim Aktualisieren des Themas und des Plug-Ins nicht beeinflusst werden.
• Erstellen Sie eine benutzerdefinierte Produktseite oder Produktkategorie, indem Sie die benutzerdefinierten Vorlagen für diese Seiten anpassen und sicherstellen, dass die neuen Produkte oder Kategorien, die Sie hinzugefügt werden, am Ende der content-single-product.php -Datei stehen.
• Verwenden Sie Plugins wie Elementor und Beaver Builder, um WooCommerce-Produktseiten ohne Codierungskenntnisse anzupassen.

Bei der Planung eines WooCommerce -Store müssen Sie viele Fragen im Voraus beantworten, die den zukünftigen Erfolg des Geschäfts ernsthaft beeinflussen. Das Store Setup ist eine ernsthafte Herausforderung, da es nach Abschluss immer schwierig ist, das Geschäft Setup und Design zu ändern. Um die WooCommerce -Produktseite anzupassen, müssen Sie die verfügbaren Optionen in diesem Artikel berücksichtigen.

Nachdem der Laden online geht, ist die nächste Herausforderung das Chaos auf der Produktseite. WooCommerce Eine einzelne Produktseite enthält viele Elemente, die nicht direkt zum benutzerdefinierten Design und Setup des Geschäfts beitragen. Zwei gängige Schuldige sind Produktkategorien und Sternenbewertungen. Nicht jeder Store muss diese beiden Elemente auf einer einzelnen Produktseite anzeigen. In ähnlicher Weise müssen auch andere Elemente neu positioniert werden, um das benutzerdefinierte Design des Geschäfts anzupassen.

Alle diese Herausforderungen können leicht mit WooCommerce -Operationen und Filterhaken gelöst werden. Ich habe diese kurze Liste erstellt, um zu demonstrieren, was Sie auf der Produktseite anpassen können.

Benutzerdefinierte WooCommerce -Produktseite

Das erste, was Sie vielleicht tun möchten, ist, das Produkt in einer anderen Vorlage anzuzeigen als das Standard. Die Datei

sollte geladen werden, die die Vorlagendatei steuert, in der Produktinformationen im vorderen Ende angezeigt werden. single-product.php

Die übliche Praxis (normalerweise empfohlen) zum Anpassen von Vorlagenseiten für übergeordnete Themen und Plugins besteht darin, Vorlagen im Thema zu kopieren. Nehmen Sie jetzt nur noch alle Änderungen in der Kopie vor. Wenn Sie das Thema und das Plugin aktualisieren, bleiben Ihre benutzerdefinierten Änderungen gleich.

Mehrere Plugins und Themen bieten eine große Anzahl benutzerdefinierter Aktionen und Filterhaken, die eine direkte Änderung von Themendateien ermöglichen. Der Vorteil von all dem besteht darin, dass Sie die Tags der Vorlagendatei nicht ändern müssen. Das Ergebnis ist ein sauberer Code ohne unordentliche Datei -Duplikation.

Ich werde

verwenden, um Vorlagendateien aufzurufen, die das Format der Produktinformationen steuern und wie Produktinformationen auf der Produktseite angezeigt werden. In ähnlicher Weise ist single-product.php eine Produktvorlage, die die Änderung der Informationen und des Stils der Produktseite ändern kann. Öffnen Sie nun content-single-product.php und fügen Sie den folgenden Code hinzu, um die Vorlage für eine einzelne Produktseite zu ändern: single_template

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

以及以下包含在模板 _include 中的代码
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}

Erstellen Sie benutzerdefinierte WooCommerce -Produkte/Kategorie

Zu diesem Zeitpunkt gehe ich davon aus, dass Sie einen aktiven WooCommerce -Store haben und mit dem Prozess der Einrichtung von Produktseiten und Produktkategorien sehr vertraut sind. Es gibt immer Situationen, in denen Sie Ihre Produktseite oder Ihre Produktkategorie anpassen müssen. Dies erfolgt durch Anpassen der benutzerdefinierten Vorlagen für diese Vorlagen.

Die WooCommerce -Vorlagendatei

einstellen

Denken Sie nun daran, dass bei Verwendung der Datei content-single-product.php sie so ändern, dass alle von Ihnen hinzugefügten Produkte oder Kategorien am Ende der Datei liegen sollten. Eine weitere gute Angewohnheit ist es, es zu nennen, damit es auffällt und leicht zu identifizieren ist. Wenn Sie beispielsweise eine Kategorie namens "Bücher" haben, ändern Sie den Dateinamen in content-single-product-books.php. Diese einfache Änderung sorgt dafür, dass Sie sofort die richtigen Dateien für eine bestimmte Kategorie identifizieren können. Diese Datei wird verwendet, um verschiedene Änderungen vorzunehmen (Hinzufügen oder Entfernen von Seitenleisten, Änderungen in Schleifen usw.), um sicherzustellen, dass die Seite der Produkt- oder Produktkategorie Ihren Anforderungen vollständig entspricht.

Der nächste Job besteht darin, die single-product.php -Datei zu ändern. Diese Datei enthält eine Schleife, die feststellt, welche Vorlagen geladen werden sollen, um das Produkt anzuzeigen.

Ich werde einen IF -Zustand hinzufügen, der überprüft, ob das Produkt in eine bestimmte Kategorie fällt, und dann die relevante single-product.php in der benutzerdefinierten Vorlage lädt. Jetzt müssen die Datei nicht umbenannt werden. Um Code hinzuzufügen, öffnen Sie die Datei und finden Sie den folgenden Code -Snippet:

woocommerce_get_template_part( 'content', 'single-product' );

Sie müssen es durch den folgenden Code ersetzen:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

Finden Sie im Code Ihre Kategorie und ersetzen Sie sie durch die Kategorie -Slug Ihrer Wahl. Zusätzlich müssen Sie content-single-product.php durch den neuen Namen der Datei ersetzen. Verwenden Sie das oben verwendete Beispiel, wobei die Kategorie -Schnecke "Bücher" ist und content-single-product.php in content-single-product-books.php umbenannt wird. Zu diesem Zeitpunkt sieht der Code so aus:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

Zu diesem Zeitpunkt wurden alle Dateien erfolgreich bearbeitet und/oder umbenannt. Der nächste Schritt besteht darin, diese Dateien in den WooCommerce -Store hochzuladen. Um sicherzustellen, dass alles gut läuft, stellen Sie sicher, dass ein Unterordner namens /woocommerce/ im Themenverzeichnis steht. Denken Sie daran, dass diese beiden Dateien (content-single-product.php und single-product.php) im selben Ordner liegen. Es ist am besten, die Codeelemente in diesem Ordner des Themas zu ändern, damit Sie schwierige Debugging -Fehler verhindern können, d. H. Überschreiben der ursprünglichen WooCommerce -Datei.

Der letzte Schritt besteht darin, die Produkt- und Produktkategorienseiten zu überprüfen, um sicherzustellen, dass alle im benutzerdefinierten Vorlagencode vorgenommenen Änderungen perfekt angewendet und perfekt angezeigt werden.

Schlussfolgerung

Erlernen des Anpassens der Seite WooCommerce -Produkt- und Produktkategorienseite ist eine Frage des Hinzufügens und Änderns von Haken. Es ist wichtig zu verstehen, dass all diese Änderungen direkt beeinflussen, wie diese beiden Seiten am vorderen Ende des Geschäfts dargestellt werden. Wenn Sie Hilfe beim Code oder einem anderen Aspekt dieser Idee benötigen, hinterlassen Sie bitte einen Kommentar und ich werde Ihnen antworten.

FAQs über das Anpassen von WooCommerce -Produktseiten

Was sind die grundlegenden Schritte, um meine WooCommerce -Produktseite anzupassen?

Anpassen Ihrer WooCommerce -Produktseite umfasst mehrere Schritte. Zunächst müssen Sie das WooCommerce -Plugin auf Ihrer WordPress -Website installieren und aktivieren. Navigieren Sie dann zu WooCommerce -Einstellungen und wählen Sie die Registerkarte Produkte aus. Hier können Sie die Anzeigeeinstellungen der Produktseite anpassen. Sie können auch Plugins wie Subthemen oder Elementor verwenden, um das Layout und das Design Ihrer Produktseite weiter anzupassen. Denken Sie daran, immer Änderungen anzunehmen, bevor sie online gestellt werden.

Kann ich meine WooCommerce -Produktseite ohne Codierung anpassen?

Ja, Sie können Ihre WooCommerce -Produktseite ohne Codierungswissen anpassen. Es stehen mehrere Plugins zur Verfügung, wie Elementor und Beaver Builder, die eine Drag & Drop-Schnittstelle für eine einfache Anpassung bieten. Mit diesen Tools können Sie Layouts ändern, Elemente hinzufügen oder löschen und das Design Ihrer Produktseite in nur wenigen Klicks einstellen.

Wie füge ich meiner WooCommerce -Produktseite benutzerdefinierte Felder hinzu?

benutzerdefinierte Felder können zu Ihrer WooCommerce -Produktseite mit Plugins wie erweiterten benutzerdefinierten Feldern oder WooCommerce -benutzerdefinierten Feldern hinzugefügt werden. Mit diesen Plugins können Sie Ihrer Produktseite zusätzliche Informationen hinzufügen, z. B. Größendiagramme, Lieferinformationen oder Produktvideos. Sobald das Plugin installiert und aktiviert ist, können Sie benutzerdefinierte Felder erstellen und zu Ihrer Produktseite hinzufügen.

Wie kann ich das Layout meiner WooCommerce -Produktseite ändern?

Mit einem Unterthemen- oder Seitenbuilder-Plugin können Sie das Layout Ihrer WooCommerce-Produktseiten ändern. Mit diesen Tools können Sie Elemente auf Produktseiten neu ordnen, neue Abschnitte hinzufügen oder unnötige Elemente löschen. Sie können auch die Breite der Produktseite anpassen, die Position des Produktbildes ändern oder eine Seitenleiste hinzufügen, um zusätzliche Informationen zu erhalten.

Wie füge ich meiner WooCommerce -Produktseite Produktvarianten hinzu?

Produktvariationen können zu Ihrer WooCommerce -Produktseite über den Produktdatenabschnitt in den WooCommerce -Einstellungen hinzugefügt werden. Hier können Sie unterschiedliche Variationen für Ihr Produkt erstellen, z. B. Größe, Farbe oder Material. Jede Variante kann ihren eigenen Preis, einen eigenen SKU und einen eigenen Bestandsstatus haben. Sie können jeder Variante auch Bilder hinzufügen, um den Kunden zu helfen, ihre Auswahl intuitiv zu verstehen.

Wie kann ich die mobile Reaktionsfähigkeit meiner WooCommerce -Produktseite verbessern?

reaktionsschnelle Themen oder Plug-Ins für mobile Optimierung können verwendet werden, um die mobile Reaktionsfähigkeit von WooCommerce-Produktseiten zu verbessern. Diese Tools stellen sicher, dass Ihre Produktseiten unabhängig von der Bildschirmgröße auf allen Geräten gut angezeigt und ausgeführt werden. Sie können auch den WordPress Customizer verwenden, um die mobile Ansicht der Produktseite anzupassen.

Wie füge ich meiner WooCommerce -Produktseite eine benutzerdefinierte Produktbeschreibung hinzu?

Benutzerdefinierte Produktbeschreibungen können Ihrer WooCommerce -Produktseite im Abschnitt Produktdaten der WooCommerce -Einstellungen hinzugefügt werden. Hier können Sie eine detaillierte Beschreibung des Produkts schreiben, einschließlich seiner Funktionen, Vorteile und Spezifikationen. Sie können auch HTML verwenden, um Ihre Beschreibung zu formatieren und Links, Bilder oder Videos hinzuzufügen.

Wie füge ich meiner WooCommerce -Produktseite Kundenbewertungen hinzu?

Kundenbewertungen können zu Ihrer WooCommerce -Produktseite im Abschnitt Produktdaten der WooCommerce -Einstellungen hinzugefügt werden. Hier können Sie Bewertungen für Ihr Produkt aktivieren. Sie können auch Bewertungen verbessern, indem Sie Plugins wie Yith WooCommerce Advanced Review oder WooCommerce Product Review Pro verwenden, z. B. Hinzufügen von Kommentarenerinnerungen, Sternbewertungen oder Kommentarfilter.

Wie optimieren Sie meine WooCommerce -Produktseite für SEO?

Optimierung Ihrer WooCommerce -Produktseite für SEO enthält mehrere Schritte. Zunächst müssen Sie einen eindeutigen und beschreibenden Produkttitel und eine eindeutige Produkttitel und eine Beschreibung mit relevanten Schlüsselwörtern schreiben. Sie können Produktbildern auch Meta -Tags und alternativen Text hinzufügen. Darüber hinaus können Sie SEO-Plugins wie Yoast SEO verwenden, um Ihre Produktseiten weiter zu optimieren, z. B. das Erstellen von SEO-freundlichen URLs, das Hinzufügen von Schema-Tags oder das Generieren von XML-Sitemaps.

Wie füge ich meiner WooCommerce -Produktseite verwandte Produkte hinzu?

verwandte Produkte können zu Ihrer WooCommerce -Produktseite im Produktdatenabschnitt der WooCommerce -Einstellungen hinzugefügt werden. Hier können Sie die Registerkarte Linkprodukte auswählen und relevante Produkte in den Upsell- oder Cross -Verkaufsfeldern hinzufügen. Sie können auch Plugins wie WooCommerce -verwandte Produkte oder Yith Woocommerce verwenden, die häufig zusammen kaufen, um verwandte Produkte dynamischer und ansprechenderer anzuzeigen.

Das obige ist der detaillierte Inhalt vonWie man WooCommerce -Produktseiten anpassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!