So bearbeiten Sie die WooCommerce-Produktseite programmgesteuert

Veröffentlicht: 2021-01-09

Suchen Sie nach Möglichkeiten, die Produktseite in Ihrem E-Commerce-Shop anzupassen? In dieser Anleitung zeigen wir Ihnen, wie Sie die WooCommerce-Produktseite programmgesteuert bearbeiten.

Anpassen der Produktseite

Auch wenn Sie alles in Ihrem Geschäft anpassen können, sind die beiden Hauptseiten, auf denen die meisten Anpassungen in WooCommerce vorgenommen werden, die Shop-Seite und die Produktseite. Wer seinen Umsatz ankurbeln und den Beginn des Kaufprozesses optimieren will, muss an beidem arbeiten. Wir haben bereits gesehen, wie die Shop-Seite angepasst wird, daher zeigen wir Ihnen heute, wie Sie die Produktseite programmgesteuert (mit Code) bearbeiten .

Ein ordentliches Design, das sich darauf konzentriert, das beste Kundenerlebnis zu bieten, hilft Ihnen, den gesamten Kaufprozess zu verbessern und Ihre Konversionsraten zu steigern. Es gibt zwei Möglichkeiten, die Produktseite anzupassen:

  • Mit Plugins
  • Programmatisch

Auch wenn einige Plugins Ihnen helfen können, kann es ein langer Prozess sein, dasjenige zu finden, das alle gewünschten Funktionen hat. Wenn Sie also über einige grundlegende Entwicklerkenntnisse verfügen, ist es eine hervorragende Option , die WooCommerce-Produktseite programmgesteuert zu bearbeiten . Sie können nicht nur die Installation von Tools von Drittanbietern vermeiden, sondern haben auch viel mehr Flexibilität, um alles anzupassen, was Sie wollen.

Wenn Sie die Produktseite mit Plugins und Seitenerstellern anpassen möchten, lesen Sie diese Anleitung.

So bearbeiten Sie die WooCommerce -Produktseite programmgesteuert

In diesem Abschnitt erfahren Sie, wie Sie die WooCommerce-Produktseite für einzelne Produkte bearbeiten. Wir behandeln die folgenden Themen.

  1. Haken verwenden
    1. Elemente entfernen
    2. Elemente neu anordnen
    3. Fügen Sie neue Elemente hinzu
    4. Wenden Sie bedingte Logik an
      1. Angemeldeter Benutzer und Benutzerrolle
      2. Produkt-IDs und Taxonomien
    5. Produktregisterkarten bearbeiten
    6. Unterstützung für variable Produkte
  2. WooCommerce-Vorlagendateien überschreiben
    1. Bearbeiten Sie die Metainformationen
    2. Wechseln Sie zu einer benutzerdefinierten Vorlage für eine bestimmte Produktkategorie
      1. Bearbeiten Sie die single-product.php-Datei
      2. Erstellen Sie eine neue content-single-product.php-Datei
      3. Erstellen Sie eine benutzerdefinierte Vorlage, indem Sie Ihre neue content-single-product.php-Datei bearbeiten
  3. Anpassen der Produktseite mit CSS-Skripten

WooCommerce-Produktseitenlayout

Bevor wir mit dem Tutorial beginnen, werfen wir einen Blick auf die Standardproduktseite in WooCommerce für einzelne Produkte und identifizieren jedes Element. Achten Sie auf die verschiedenen Abschnitte in der Vorlage und darauf, wie die Informationen organisiert sind, da wir später in der Anleitung darauf verweisen. WooCommerce-Einzelproduktseite Es gibt zwei WooCommerce-Hauptdateien, die für die Ausgabe der Produktseite verantwortlich sind.

  1. single-product.php : Es erstellt die erforderliche Vorlage für das aktuelle Layout
  2. content-single-product.php : Diese Datei druckt den Inhalt in der Vorlage

Beide Dateien können mit einem Child-Theme überschrieben werden. Dies ist gängige Praxis, um WooCommerce-Vorlagendateien zu überschreiben. Sie sollten jedoch versuchen, WooCommerce-Hooks zu verwenden, anstatt Vorlagendateien zu überschreiben, da dies eine der bewährten Methoden ist, die WordPress beim Anpassen Ihrer Website empfiehlt.

Andererseits müssen Sie für komplexe Aufgaben, die Funktionen oder Objekte enthalten, möglicherweise die Vorlagendateien bearbeiten. Durch die Kombination beider Techniken sollten Sie in der Lage sein, nahezu jede gewünschte Anpassung zu erreichen. In diesem Tutorial zeigen wir Ihnen also, wie Sie die WooCommerce-Produktseite mit beiden Methoden bearbeiten.

Bevor wir beginnen, stellen Sie sicher, dass Sie ein untergeordnetes Thema erstellen, um Ihre Skripte zu testen, oder verwenden Sie ein Plugin, um eines zu generieren. Sehen wir uns einige praktische Beispiele an, damit Sie lernen können, wie jede dieser Techniken funktioniert, um Ihr Geschäft optimal zu nutzen.

1) Bearbeiten Sie die WooCommerce-Produktseite mit Hooks

HINWEIS : Wenn Sie mit WooCommerce-Hooks und ihrer Verwendung nicht vertraut sind, lesen Sie diese Anleitung.

1.1) Entfernen Sie Elemente von einzelnen Produktseiten

Es gibt mehrere WooCommerce-Hooks, mit denen Sie jedes Element auf einer einzelnen Produktseite entfernen können. Jeder von ihnen arbeitet mit einer Gruppe spezifischer Elemente, daher müssen Sie den richtigen Hook, die richtige WooCommerce-Callback-Funktion und den richtigen Prioritätswert verwenden.

Wenn Sie beispielsweise den Titel aller Produktseiten entfernen möchten, verwenden Sie das folgende Skript in der Datei functions.php Ihres Child-Themes.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Alle Hooks und die zugehörigen Parameter finden Sie hier oder in den Kommentaren in der Datei content-single-product.php des WooCommerce-Plugins. Sehen wir uns nun einige andere Beispielskripts an, um verschiedene Elemente zu entfernen und die Produktseite anzupassen.

 // Titel entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// Bewertungssterne entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// Produktmeta entfernen 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// Beschreibung entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// Bilder entfernen
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// verwandte Produkte entfernen
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// Registerkarten für zusätzliche Informationen entfernen
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Elemente neu anordnen

Das Neuordnen der Elemente der Produktseite ist ganz einfach. Zuerst müssen Sie den Haken auf die gleiche Weise entfernen, wie wir es zuvor getan haben, und dann müssen Sie ihn mit einer anderen Prioritäts-/Bestellnummer erneut hinzufügen. Das folgende Skript verschiebt beispielsweise die Produktbeschreibung direkt unter den Titel:

 // Reihenfolge der Beschreibung ändern
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Wie Sie sehen, entfernen wir die Aktion und fügen sie dann mit einer anderen Priorität (6 statt 20) wieder hinzu. Warum haben wir eine Priorität/Reihenfolge von 6 gewählt? Wir wissen, dass das Titelelement einen Prioritätswert von 5 hat, sodass wir den Prioritätswert kennen, den wir unserem benutzerdefinierten Hook zuweisen müssen, um das Callback-Element direkt nach dem Titel anzuzeigen (6).

Mit den Informationen, die wir Ihnen in Punkt 1.1 zur Verfügung gestellt haben, können Sie dasselbe mit beliebigen Hooks und Callbacks tun und sie in einer beliebigen Reihenfolge platzieren.

1.3) Neue Elemente hinzufügen

Wenn Sie die WooCommerce-Produktseite anpassen müssen, indem Sie neue Inhalte hinzufügen, müssen Sie möglicherweise die Vorlagendateien überschreiben. Sie können jedoch auch den folgenden Hook verwenden, um neue Inhalte hinzuzufügen:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Herzlichen Glückwunsch, Sie haben gerade einen Link hinzugefügt!</a></h4>');
}
);

woocommerce_before_single_product_summary Anpassung der Hook-Produktseite Alternativ können Sie Ihre eigene Funktion erstellen:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
Funktion QuadLayers_callback_function(){
    printf('
    <h1>Hallo!</h1>
    <div><h5>Willkommen auf meiner benutzerdefinierten Produktseite</h5>
    <h4><a href="?link-to-somewere">Link zu Somewere!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

woocommerce_after_single_product_summary Produktseitenanpassung

1.4) Bedingte Logik auf einer einzelnen Produktseite

Wir haben bereits gesehen, wie Sie bedingte Felder auf der Checkout-Seite hinzufügen, aber Sie können sie auch auf der Produktseite hinzufügen. Sie können bedingte Logik erstellen, um die gewünschten Anforderungen zu erfüllen, indem Sie eine der nativen Funktionen von WordPress verwenden. Schauen wir uns ein paar Beispiele an.

1.4.1) Angemeldeter Benutzer und Benutzerrolle

user_is_logged_in() ist eine standardmäßige WordPress-Funktion, die verwendet wird, um Website-Besucher zu validieren. Darüber hinaus können wir die Funktion wp_get_current_user() verwenden, um alle Informationen zum angemeldeten Benutzer abzurufen. Im folgenden Skript fügen wir einfach einige Inhalte hinzu, je nachdem, ob der Benutzer angemeldet ist und welche Rolle er hat, aber Sie können Ihre benutzerdefinierten Funktionen für komplexere Funktionalitäten hinzufügen

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
Funktion QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    printf ('<h1>Hallo ' .$user->user_nicename.'!</h1>');
    $rollen = ( array ) $user->rollen;
        if($roles[0]=='Administrator'){
            echo "<h4><b>Du bist $roles[0]</h4></b>";
        }     
    } 
    anders {
    Array zurückgeben ();
    }     
}
1.4.2) Produkt-IDs und Taxonomien

Ebenso können wir die Produkt-ID und/oder Produktkategorien abrufen. Der Unterschied besteht darin, dass wir das globale WP-Objekt $post verwenden, um die ID zu erhalten, und die Funktion get_the_terms() , um die Produktkategorien zu erhalten.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
Funktion QuadLayers_get_product_taxonomies(){ 
    globaler $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
    if($terms_string=='Poster'){
        Echo "
<h1>Das ist einer unserer besten $terms_string</h1>"; echo "<h2>Produkt-ID: $post->ID"; } }

Das obige Skript gibt eine einzelne Kategorie zurück. Wenn Sie mehrere Kategorien oder Tags abrufen müssen, müssen Sie eine komplexere Funktion erstellen. Sie müssen Taxonomien durchlaufen, bevor Sie Ihre Bedingungen anwenden, wie unten gezeigt:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
Funktion QuadLayers_get_multiple_taxonomies(){
    globaler $post;
    $args = array( 'taxonomy' => 'product_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $count = count($terms);
 if ($count > 0) {
        echo '<div class="custom-content"><h4>Tag-Liste:</h4><ul>';
        foreach ($terms als $term) {echo '<li>'.$term->name.'</li>';}
        echo "</ul></div>";
    }
}

1.5) Produktregisterkarten bearbeiten

Der Filter-Hook woocommerce_product_tabs ermöglicht es uns, im Abschnitt „ Zusätzliche Informationen “ eine neue Registerkarte zu entfernen, hinzuzufügen, neu anzuordnen oder hinzuzufügen. Das folgende Skript entfernt die Registerkarte „Beschreibung“ und deren Inhalt, benennt die Registerkarte „Bewertungen“ um und setzt die Priorität von „Zusätzliche Informationen“ an die erste Stelle.

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
Funktion woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] ); // Entfernen Sie die Registerkarte "Beschreibung".
    $tabs['rezensionen']['titel'] = __( 'Bewertungen' ); // Umbenennen der Registerkarte "Bewertungen".
    $tabs['zusätzliche_informationen']['priorität'] = 5; // Zusätzliche Informationen zuerst
    gib $tabs zurück;
}

Bearbeiten Sie die WooCommerce-Produktseite programmgesteuert - Passen Sie die Produktregisterkarten an Um den Inhalt einer Registerkarte zu bearbeiten, müssen Sie eine Callback-Funktion wie diese verwenden:

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

Funktion woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Benutzerdefinierter Beschreibungsrückruf
	gib $tabs zurück;
}
Funktion woo_custom_description_tab_content() {
	Echo '
<h2>Benutzerdefinierte Beschreibung</h2>
'; echo 'Hier ist eine benutzerdefinierte Beschreibung'; }

Auf ähnliche Weise können wir wie folgt eine neue Registerkarte erstellen:

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
Funktion woo_new_product_tab( $tabs ) {	
	// Fügt die neue Registerkarte hinzu	
	$tabs['test_tab'] = array(
		'title' => __( 'Neuer Produkt-Tab', 'woocommerce' ),
		'Priorität' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	gib $tabs zurück;
}
Funktion woo_new_product_tab_content() {
	echo '<h2>Neuer Produkt-Tab</h2><p>Hier ist der Inhalt Ihres neuen Produkt-Tabs</p>.'; 
}

In diesem Beispiel haben wir gerade eine neue Registerkarte mit dem Namen „Neue Produkt-Registerkarte“ erstellt. So sieht es im Frontend aus.

1.6) Unterstützung für variable Produkte

Produktvariationen sind eine Standardfunktion von WooCommerce und Sie können variable Produkte ohne jegliche Anpassung erstellen und verwenden. Sie müssen jedoch die WooCommerce-Richtlinien befolgen, um eine benutzerdefinierte Lösung mit Produktvariationen kompatibel zu machen.

Es ist wichtig zu beachten, dass jede benutzerdefinierte Lösung in die gesamte Website und nicht in eine einzelne Seite integriert werden muss. In Anbetracht dessen können wir also einige der verfügbaren Hooks für variable Produkte verwenden. Diese Hooks werden nur ausgelöst, wenn sie sich auf einer variablen Produktseite befinden.

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) Passen Sie die Produktseite an, indem Sie WooCommerce-Vorlagendateien überschreiben

Die zweite Alternative zum programmatischen Bearbeiten der WooCommerce-Produktseite besteht darin, die Vorlagendateien zu überschreiben. Da diese Methode etwas riskanter ist als die vorherige, empfehlen wir Ihnen, vor dem Start ein vollständiges Backup Ihrer Website zu erstellen. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie diese Anleitung zum Sichern einer WordPress-Site.

Das Überschreiben von WooCommerce-Vorlagendateien ähnelt dem Überschreiben jeder anderen Datei in Ihrem untergeordneten Design. Um zu vermeiden, dass Ihre Anpassungen verloren gehen, wenn Sie Ihr Design aktualisieren, empfehlen wir Ihnen, ein untergeordnetes Design zu erstellen oder eines dieser Plugins zu verwenden, wenn Sie keines haben.

2.1) Bearbeiten Sie die Meta-Informationen

Um die Metainformationen zu bearbeiten, müssen wir die Vorlagendatei überschreiben, die für den Druck der entsprechenden Daten verantwortlich ist. Die meta.php -Datei, die sich im WooCommerce-Plugin befindet, folgt diesem Pfad: woocommerce/templates/single-product/meta.php

Bearbeiten Sie nun Ihr Child-Theme-Dateiverzeichnis und erstellen Sie einen WooCommerce-Ordner. Erstellen Sie dann darin einen weiteren Ordner namens single-product und fügen Sie dort die Datei meta.php ein: Child_theme/woocommerce/single-product/meta.php

Danach sollten Sie in der Lage sein, die meta.php -Datei zu bearbeiten und Ihre Änderungen im Frontend zu sehen. Die folgende meta.php Beispieldatei wird:

  • Ändern Sie die Bezeichnung der SKU in ID
  • Ändern Sie die Tags in Veröffentlicht unter
  • Entfernen Sie das Kategorielabel
 globales $Produkt;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Veröffentlicht unter:', 'Veröffentlicht unter:', count( $product->get_tag_ids () ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Wechseln Sie zu einer benutzerdefinierten Vorlage für eine bestimmte Produktkategorie

Lassen Sie uns nun eine komplexere Aufgabe versuchen. Wir überschreiben die einzelne Produktvorlage nur, wenn das aktuelle Produkt zu einer bestimmten Kategorie gehört.

2.2.1) Bearbeiten Sie die single-product.php-Datei

Kopieren Sie zuerst die Datei single-product.php und fügen Sie sie in Ihren untergeordneten Themenordner im WooCommerce-Verzeichnis ein:

Child_theme/woocommerce/single-product.php

Öffnen Sie dann die Datei und prüfen Sie Zeile 37: wc_get_template_part('content','single-product');

So kommt die Datei content-single-product.php zum Einsatz und druckt alle Elemente des aktuellen Produkts, um die Schleife zu vervollständigen und das Layout zu erstellen.

Wir wollen diese Datei nur überschreiben, wenn das Produkt zur angegebenen Kategorie gehört, also löschen wir Zeile 37: wc_get_template_part( 'content', 'single-product' ); und ersetzen Sie es durch das folgende Skript:

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categories = wp_list_pluck( $terms, 'slug' );
			
				if ( in_array( 'posters', $categories ) ) {
					wc_get_template_part( 'content', 'single-product-posters' );
				} anders {
					wc_get_template_part( 'content', 'single-product' );
				}

Beachten Sie, dass wir die von WooCommerce bereitgestellten Beispielprodukte verwenden, daher gibt es eine Kategorie namens „ Poster “, die wir für dieses Beispiel verwenden. Ersetzen Sie einfach „ Poster “ durch eine bestehende Produktkategorie Ihrer Website.

Denken Sie daran, dass Sie den Slug aller Ihrer Produktkategorien im Haupt- WordPress-Dashboard > Produkte > Kategorien finden können.

2.2.2) Erstellen Sie eine neue Datei content-single-product.php

Jetzt müssen wir eine neue Datei erstellen, die die Standarddatei content-single-product.php . Diese Datei hat die Kategorie Slug in ihrem Namen.

Sehen Sie sich das obige Beispiel an, um zu sehen, wie die Datei content-single-product-posters.php aufgerufen wird. Dies ist wichtig, da der Name der Datei mit dem Code im vorherigen Schritt übereinstimmen muss, sodass Ihre Datei content-single-product-/*YOURCATEGORYSLUG*/.php sollte.

Auf diese Weise wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) die Datei content-single-product-YOURCATEGORY.php und überschreibt die standardmäßige WooCommerce-Vorlagendatei.

Fügen Sie einfach die Standarddatei content-single-product.php in den WooCommerce-Ordner Ihres Child-Themes ein, benennen Sie sie gemäß den oben erläuterten Anweisungen um und nehmen Sie einige Editionen vor, um sie zu testen.

2.2.3) Erstellen Sie eine benutzerdefinierte Vorlage, indem Sie Ihre neue content-single-product.php Datei bearbeiten

Dies ist eine Beispielproduktseite, die nur angezeigt wird, wenn das aktuelle Produkt zur Kategorie „ Poster “ gehört. Sie werden sehen, dass wir einige Inhalte hinzugefügt, Elemente hinzugefügt und entfernt, sie neu geordnet und einige Shortcodes ausgeführt haben.

Obwohl es sich um ein einfaches Beispiel handelt, gibt es Ihnen eine Vorstellung davon, was Sie auf einer Vorlagenseite tun können, und ermöglicht es Ihnen, neue Möglichkeiten zu erkunden.

 // Elemente der Produktzusammenfassung entfernen
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Benutzerdefinierter Inhalt
		printf('<h1>Das ist der <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>Eine vollständig angepasste Produktseite für Produkte der Kategorie "Poster"</h4>');
		// Beschreibung
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//Miniaturansicht
		do_action( 'woocommerce_before_single_product_summary' );
				
		//Meta hinzufügen
		do_action( 'woocommerce_single_product_summary');
		// Shortcodes
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Kontakt:</h3>".do_shortcode('[wpforms]'); echo "<h3>Weitere Poster:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Wenn wir nun das Frontend überprüfen, sehen wir Folgendes: So bearbeiten Sie die WooCommerce-Produktseite programmgesteuert – Produktseitenvorlage für eine bestimmte Taxonomie Beachten Sie, dass wir das globale Post-Objekt verwenden. var_dump($post); um Ihnen alle verfügbaren Informationen zum aktuellen Produkt anzuzeigen. Sie können alle Daten verwenden, so wie wir es im Beispielskript mit der Beschreibung des Produkts getan haben: $post->post_excerpt .

3) Passen Sie die Produktseite mit CSS-Skript an

Eine weitere praktische und einfache Möglichkeit , die WooCommerce-Produktseite (und jede andere Seite) programmgesteuert zu bearbeiten, ist die Verwendung von CSS-Code . Dies hilft Ihnen dabei, die Produktseite zu gestalten und ihr das Erscheinungsbild Ihres Unternehmens zu verleihen.

    1. Zuerst musst du in deinem Child-Theme eine neue Datei mit der Erweiterung .css erstellen, damit du dort deine CSS-Skripte hinzufügen kannst. Wir empfehlen Ihnen, es single-product.css oder ähnlich zu benennen, damit es leicht zu finden ist.
    2. Legen Sie die Datei dann im Hauptordner des untergeordneten Designs auf der gleichen Ebene wie die Dateien functions.php und style.css .
    3. Fügen Sie danach das folgende Skript in die Datei functions.php Ihres Child-Themes ein und ersetzen Sie ggf. den Namen Ihrer CSS-Datei.
 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      Funktion load_custom_product_style() {
        if ( is_product() ) {
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
        }
	  }

Die Bedingung if(is_product()) prüft, ob die aktuelle Seite eine Produktseite ist. Dadurch wird verhindert, dass die CSS-Datei unnötig geladen wird, wenn es sich nicht um eine Produktseite handelt.

4. Nachdem Sie dieses Snippet hinzugefügt haben, sollten Sie in der Lage sein, den Stil der Produktseiten zu bearbeiten, indem Sie Ihre benutzerdefinierten CSS-Regeln zu Ihrer CSS-Datei hinzufügen.

Obwohl diese Methode recht einfach ist und Ihnen eine schnelle und einfache Lösung bietet, ist sie für einige Fälle möglicherweise nicht ideal. Da CSS vom Frontend aus bearbeitet werden kann, kann ein Benutzer, wenn er weiß, wie man die Browser-Entwicklertools verwendet, jedes versteckte Element durch Bearbeiten des CSS leicht sichtbar machen.

Bearbeiten Sie die WooCommerce-Einzelproduktseite mit CSS

Sehen wir uns ein paar weitere Beispiele für Änderungen an, die Sie mit etwas CSS auf der Produktseite vornehmen können.

Um die folgenden Skripte anzuwenden, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Anpassen > Zusätzliches CSS.

Ändern Sie die Schriftgröße des Titels

Dadurch wird die Schriftgröße Ihrer Seitenprodukttitel auf 32 geändert. Passen Sie einfach den Code an, um die gewünschte Größe auszuwählen.

 .woocommerce div.product .product_title { 
        Schriftgröße: 32px; 
}
Ändern Sie die Titelfarbe

Sie können auch die Farbe des Titels Ihrer Produktseite anpassen. Verwenden Sie dazu einfach den folgenden Code und passen Sie die Farbe an. Für dieses Beispiel verwenden wir Orange. Wir empfehlen Ihnen, einen Hex-Code-Selektor wie diesen zu verwenden, um die gewünschte Farbe auszuwählen.

 .woocommerce div.product .product_title { 
            Farbe: #FFA500; 
}
Ändern Sie die Farbe der Schaltfläche „Jetzt kaufen“.

Ebenso können Sie die Farbe der Schaltfläche „Jetzt kaufen“ ändern. In diesem Beispiel verwenden wir Dodger Blue, aber Sie können jede andere gewünschte Farbe auswählen, indem Sie den Code anpassen.

 .woocommerce div.produkt .button { 
        Hintergrund: #1E90FF; 
}

Fazit

Zusammenfassend ist die Anpassung Ihres Online-Shops der Schlüssel, um sich von Ihren Mitbewerbern abzuheben. Produktseiten gehören zu den wichtigsten Seiten in jedem Geschäft, und Sie können viel tun, um das Kundenerlebnis zu verbessern und Ihren Umsatz zu steigern.

Auch wenn Sie dafür Plugins verwenden könnten, empfehlen wir Ihnen , die WooCommerce-Produktseite programmgesteuert zu bearbeiten, wenn Sie über Programmierkenntnisse verfügen. Es bietet Ihnen viel Flexibilität, um jedes Element Ihres Geschäfts anzupassen, ohne dass zusätzliche Tools installiert werden müssen. In diesem Leitfaden haben wir gesehen, wie Sie die Produktseite auf drei verschiedene Arten anpassen können:

  • Haken verwenden
  • Überschreiben von WooCommerce-Vorlagen
  • Mit CSS-Skripten

Wenn möglich, sollten Sie versuchen, WooCommerce-Hooks zu verwenden, anstatt Vorlagendateien zu überschreiben. Es ist eine der Best Practices, die WordPress empfiehlt, und es ist weniger riskant. Für komplexe Aufgaben, die Funktionen oder Objekte enthalten, müssen Sie jedoch möglicherweise die Vorlagendateien bearbeiten. Wenn Sie es schaffen, beide Techniken zu kombinieren, können Sie alles, was Sie möchten, in Ihrem Geschäft anpassen.

Werfen Sie abschließend einen Blick auf das vollständige untergeordnete Thema, das alle Beispielskripte enthält, die wir in diesem Tutorial verwendet haben. Weitere Informationen zum Anpassen Ihres Shops finden Sie in den folgenden Anleitungen:

  • Erfahren Sie, wie Sie WooCommerce-Vorlagendateien anpassen
  • So passen Sie die WooCommerce-Shop-Seite an
  • Passen Sie die Schaltfläche „Zum Warenkorb hinzufügen“ in WooCommerce an
  • So entfernen Sie WooCommerce-bezogene Produkte
  • So bearbeiten Sie den WooCommerce Checkout (Codierung & Plugins)

Hatten Sie Probleme mit unserem Tutorial? Lassen Sie es uns im Kommentarbereich unten wissen und wir werden unser Bestes tun, um Ihnen zu helfen.