ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So machen Sie ein WordPress-Theme WooCommerce Ready
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So konvertieren Sie RAW in JPG
Wie man
Philips Hue Go Tischlampe im Test
Technische Bewertungen
Lenovo LOQ vs. Lenovo Legion: Was ist der Unterschied?
Gegen
Erste Eindrücke: Xiaomi Redmi Note 12 5G im Test
Technische Bewertungen
Xiaomi Redmi Note 12 Pro 5G vs. Note 12 Pro Plus 5G: Was ist der Unterschied?
Gegen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So machen Sie ein WordPress-Theme WooCommerce Ready
Tutorials

So machen Sie ein WordPress-Theme WooCommerce Ready

Zuletzt aktualisiert: November 18, 2021 4:14 pm
ThemeLocal vor 1 Jahr 10 Minuten Mindestlesezeit
Aktie
10 Minuten Mindestlesezeit
Aktie

Du möchtest also deinem Theme einen Shop hinzufügen – genial! WooCommerce ist eine gute Wahl. Technisch gesehen ALLE Themes sind „WooCommerce Compatible“, da es sich um ein Plugin handelt. Theoretisch sollte jedes Plugin mit jedem WordPress-Theme (das richtig codiert ist) funktionieren.

Contents
Überprüfen Sie, ob WooCommerce aktiviert istWooCommerce-Support erklärenWooCommerce-CSS entfernenWooCommerce-Produktgalerie, Zoom & Lightbox aktivieren (v3.0+)Entfernen Sie den Shop-TitelÄndern Sie den Archivtitel für The ShopÄndern Sie die Anzahl der angezeigten Produkte pro Seite im ShopÄndern Sie die Anzahl der im Shop angezeigten Spalten pro ZeileÄndern Sie die Pfeile für die nächste und vorherige SeitennummerierungÄndern Sie den OnSale-Badge-TextSpalten für Miniaturansichten der Produktgalerie ändernÄndern Sie die Anzahl der angezeigten verwandten ProdukteÄndern Sie die Anzahl der Spalten pro Zeile für verwandte und Up-Selling-Abschnitte bei ProduktenFügen Sie Ihrem Menü einen dynamischen Warenkorblink und Warenkorbkosten hinzuAbschluss

Als Theme-Entwickler möchten Sie jedoch möglicherweise die Ausgabe von WooCommerce optimieren, um sie besser an Ihr Theme anzupassen oder Ihren Endbenutzern Optionen bereitzustellen, die in den WooCommerce-Einstellungen nicht ohne weiteres verfügbar sind (z. B. die Anzahl der Spalten im Shop ändern). Nachfolgend finden Sie einige hilfreiche Snippets, die Sie verwenden können, um WooCommerce in Ihrem Theme „besser“ zu unterstützen und/oder Dinge für Ihr spezifisches Design zu ändern.

Wichtig: Viele der folgenden Snippets verwenden Funktionen, die nur in WooCommerce verfügbar sind. Stellen Sie also sicher, dass diese Snippets nicht einfach am Ende Ihrer Datei functions.php in einem für die Verteilung erstellten Thema abgelegt werden. Wenn Sie Ihr Theme mit anderen teilen oder verkaufen möchten, stellen Sie sicher, dass Sie die Snippets in einer eigenen Datei platzieren, die nur geladen wird, wenn das WooCommerce-Plugin aktiv ist.

Überprüfen Sie, ob WooCommerce aktiviert ist

In meinen Themes definiere ich gerne eine benutzerdefinierte Konstante, mit der überprüft werden kann, ob WooCommerce aktiviert ist.

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

WooCommerce-Support erklären

Dies ist der erste und wichtigste Code, der Ihrem Theme hinzugefügt wird, der die WooCommerce-Unterstützung „aktiviert“ und verhindert, dass die Warnungen des Plugins dem Endbenutzer mitteilen, dass das Theme nicht kompatibel ist.

add_action( 'after_setup_theme', function() {
	add_theme_support( 'woocommerce' );
} );

WooCommerce-CSS entfernen

Persönlich überschreibe ich eher WooCommerce-Stile, um mögliche Probleme mit WooCommerce-Plugins von Drittanbietern zu vermeiden. Wenn Sie jedoch alle WooCommerce-Stile entfernen möchten, ist dies sehr einfach.

Das folgende Snippet dient zum Entfernen ALLER WooCommerce-Stile:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Dieses Snippet ist ein Beispiel für das bedingte Entfernen bestimmter CSS-Stile:

function wpex_remove_woo_styles( $styles ) {
	unset( $styles['woocommerce-general'] );
	unset( $styles['woocommerce-layout'] );
	unset( $styles['woocommerce-smallscreen'] );
	return $styles;
}
add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

WooCommerce-Produktgalerie, Zoom & Lightbox aktivieren (v3.0+)

In WooCommerce 3.0 haben sie eine neue Produktgalerie, Zoom und Lightbox eingeführt. Diese müssen alle über „add_theme_support“ aktiviert werden, wenn Sie sie in Ihrem Theme verwenden möchten.

add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

Entfernen Sie den Shop-Titel

Viele Themes verfügen bereits über Funktionen zum Anzeigen von Archivtiteln, sodass dieser Code den zusätzlichen Titel aus WooCommerce entfernt, der besser ist, als ihn über CSS zu verbergen.

add_filter( 'woocommerce_show_page_title', '__return_false' );

Ändern Sie den Archivtitel für The Shop

Wenn Ihr Theme die Funktionen archive_title() oder get_archive_title() verwendet, um den Titel für Ihre Archive anzuzeigen, können Sie es einfach über einen Filter anpassen, um den Namen Ihrer Produktseite anstelle des Shop-Archivtitels zu verwenden.

function wpex_woo_archive_title( $title ) {
	if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
		$title = get_the_title( $shop_id );
	}
	return $title;
}
add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Ändern Sie die Anzahl der angezeigten Produkte pro Seite im Shop

Wird verwendet, um zu ändern, wie viele Produkte pro Seite im Shop und in den Produktarchiven angezeigt werden (Kategorien und Tags).

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 12;
}
add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Ändern Sie die Anzahl der im Shop angezeigten Spalten pro Zeile

Ich verstehe nicht, warum WooCommerce auf diese Weise funktioniert, aber Sie können nicht nur den Filter ‚loop_shop_columns‘ ändern, Sie müssen auch die eindeutigen Klassen zum Body-Tag hinzufügen, damit die Spalten funktionieren. Während die Woo Shortcodes einen div-Wrapper mit den richtigen Klassen haben, haben die Shop-Seiten keinen, deshalb brauchen wir zwei Funktionen.

// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
	return 4;
}
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Ändern Sie die Pfeile für die nächste und vorherige Seitennummerierung

Mit diesem Snippet können Sie die Paginierungspfeile im Shop so anpassen, dass sie denen in Ihrem Thema entsprechen.

function wpex_woo_pagination_args( $args ) {
	$args['prev_text'] = '<i class="fa fa-angle-left"></i>';
	$args['next_text'] = '<i class="fa fa-angle-right"></i>';
	return $args;
}
add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

Ändern Sie den OnSale-Badge-Text

Besonders nützlich auf Websites, die eine andere Sprache verwenden oder um das Ausrufezeichen zu entfernen, von dem ich kein großer Fan bin.

function wpex_woo_sale_flash() {
	return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Spalten für Miniaturansichten der Produktgalerie ändern

Möglicherweise möchten Sie die Anzahl der Spalten für die Miniaturansichten der einzelnen Produktgalerien abhängig von Ihrem Layout ändern, und diese Funktion wird genau dies tun.

function wpex_woo_product_thumbnails_columns() {
	return 4;
}
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Ändern Sie die Anzahl der angezeigten verwandten Produkte

Wird verwendet, um die Anzahl der Produkte zu ändern, die für verwandte Produkte auf der einzelnen Produktseite angezeigt werden.

// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
	$args['posts_per_page'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Ändern Sie die Anzahl der Spalten pro Zeile für verwandte und Up-Selling-Abschnitte bei Produkten

Genau wie im Shop müssen Sie, wenn Sie die Anzahl der Spalten für verwandte und Up-Selling-Produkte auf den einzelnen Produktseiten richtig ändern möchten, die Spalten filtern und auch die Body-Klassen entsprechend ändern.

// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
	return 4;
}
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
	$args['columns'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
	if ( is_singular( 'product' ) ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Fügen Sie Ihrem Menü einen dynamischen Warenkorblink und Warenkorbkosten hinzu

Dieses Snippet fügt Ihrem Menü einen WooCommerce-Warenkorb hinzu, der die Kosten der Artikel in Ihrem Warenkorb anzeigt. Wenn auf Ihrer Website Font-Awesome aktiviert ist, wird außerdem ein kleines Einkaufstaschensymbol angezeigt. Wichtig: Diese Funktionen dürfen nicht in eine is_admin()-Bedingung eingeschlossen werden, da sie auf AJAX angewiesen sind, um die Kosten zu aktualisieren. Sie müssen sicherstellen, dass die Funktionen verfügbar sind, wenn is_admin() true und false zurückgibt.

// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

	// Make sure your change 'wpex_main' to your Menu location !!!!
	if ( $args->theme_location === 'wpex_main' ) {

		$css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
		
		if ( is_cart() ) {
			$css_class .= ' current-menu-item';
		}

		$items .= '<li class="' . esc_attr( $css_class ) . '">';

			$items .= wpex_menu_cart_item();

		$items .= '</li>';

	}

	return $items;

}
add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 );

// Function returns the main menu cart link
function wpex_menu_cart_item() {

	$output = '';

	$cart_count = WC()->cart->cart_contents_count;

	$css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count );

	if ( $cart_count ) {
		$url  = WC()->cart->get_cart_url();
	} else {
		$url  = wc_get_page_permalink( 'shop' );
	}

	$html = $cart_extra = WC()->cart->get_cart_total();
	$html = str_replace( 'amount', '', $html );

	$output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">';

		$output .= '<span class="fa fa-shopping-bag"></span>';

		$output .= wp_kses_post( $html );

	$output .= '</a>';

	return $output;
}


// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
	$fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item();
	return $fragments;
}
add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Abschluss

WooCommerce funktioniert standardmäßig mit jedem Thema, aber das Hinzufügen von zusätzlicher Unterstützung für das Plugin, damit es besser zu Ihrem Thema passt, ist sehr einfach. Ich habe diesen Beitrag tatsächlich geschrieben, während ich unsere codiert habe New York WordPress Blog & Shop-Theme Daher sind die meisten dieser Optimierungen in unserem Thema enthalten. Oder wenn Sie lieber das Thema kaufen möchten, um zu sehen, wie alles gemacht wurde (siehe die Dateien unter wpex-new-york/inc/woocommerce) – es kann für Sie eine einfachere Möglichkeit sein, zu lernen, wie man richtig hinzufügt benutzerdefinierte Unterstützung für das WooCommerce-Plugin, indem Sie sich ein bereits codiertes Thema ansehen.

Gibt es andere Snippets, von denen Sie glauben, dass sie in diese Liste gehören oder die Sie bei der Entwicklung neuer WooCommerce-fähiger Themen hilfreich finden würden?

Verwandter Beitrag

So konvertieren Sie RAW in JPG

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

So beantworten Sie Anrufe mit AirPods mit Siri

So aktivieren Sie den Dunkelmodus bei NordVPN

So ändern Sie den Desktop-Hintergrund in Windows 11

MARKIERTE: ein, machen, Ready, Sie, WooCommerce, WordPressTheme
ThemeLocal November 18, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel 5 WordPress-Plugins zur Steigerung der Leserbindung
Nächster Artikel So branden Sie Ihre WordPress-Site
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)
Wie man
So ändern Sie den Desktop-Hintergrund in Windows 11
Wie man
So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)
Wie man
Philips Hue Go Tischlampe im Test
Technische Bewertungen
Die PS5-Preissenkung muss man gesehen haben, um es glauben zu können
Angebote
So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)
Wie man

También podría gustarte

Wie man

So konvertieren Sie RAW in JPG

vor 49 Minuten 2 Minuten Mindestlesezeit
Wie man

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

vor 11 Stunden 3 Minuten Mindestlesezeit
Wie man

So beantworten Sie Anrufe mit AirPods mit Siri

vor 15 Stunden 3 Minuten Mindestlesezeit
Wie man

So aktivieren Sie den Dunkelmodus bei NordVPN

vor 19 Stunden 2 Minuten Mindestlesezeit
Wie man

So ändern Sie den Desktop-Hintergrund in Windows 11

vor 23 Stunden 2 Minuten Mindestlesezeit
Angebote

Mit diesem Pixel 6a-Angebot erhalten Sie unbegrenzte Daten zum günstigen Preis

vor 23 Stunden 2 Minuten Mindestlesezeit
Wie man

So duplizieren Sie Fotos und Videos auf iPhone und iPad

vor 24 Stunden 2 Minuten Mindestlesezeit
Wie man

So beheben Sie eine ungenaue Apple Watch-Schrittverfolgung

vor 24 Stunden 6 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?