So machen Sie ein WordPress-Theme WooCommerce Ready

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.

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.

Ü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?