Spraw, aby Twój motyw WordPress był zgodny z WooCommerce za pomocą tych pomocnych fragmentów

Więc chcesz dodać sklep do swojego motywu – super! WooCommerce to świetny wybór. Z technicznego punktu widzenia WSZYSTKO Motywy są „kompatybilne z WooCommerce”, ponieważ jest to wtyczka. Teoretycznie każda wtyczka powinna działać z dowolnym motywem WordPress (który jest poprawnie zakodowany).


Jako programista motywów możesz jednak dostosować dane wyjściowe WooCommerce, aby lepiej pasowały do ​​Twojego motywu lub aby zapewnić użytkownikom końcowym opcje niedostępne w ustawieniach WooCommerce (takie jak zmiana liczby kolumn w sklepie). Poniżej znajdziesz kilka pomocnych fragmentów, których możesz użyć, aby zapewnić „lepszą” obsługę WooCommerce w Twoim motywie i / lub zmienić rzeczy pod kątem konkretnego projektu.

Ważny: Wiele poniższych fragmentów używa funkcji dostępnych tylko w WooCommerce. Upewnij się więc, że te fragmenty nie są po prostu zrzucane na dole pliku functions.php w kompozycji utworzonej do dystrybucji. Jeśli zamierzasz udostępnić swój motyw innym lub sprzedać, pamiętaj, aby umieścić fragmenty we własnym pliku ładowanym tylko wtedy, gdy wtyczka WooCommerce jest aktywna.

Sprawdź, czy WooCommerce jest włączone

W moich motywach lubię definiować niestandardową stałą, która może być używana do sprawdzania, czy WooCommerce jest włączona w ten sposób. Mogę dołączać pliki lub uruchamiać funkcje tylko wtedy, gdy WooCommerce jest aktywne (zobacz ważny komunikat powyżej, jeśli jeszcze tego nie zrobiłeś).

// Dodaj nową stałą, która zwraca true, jeśli WooCommerce jest aktywny
Zdefiniuj („WPEX_WOOCOMMERCE_ACTIVE”, class_exists („WooCommerce”));

// Sprawdzanie, czy WooCommerce jest aktywne
jeśli (WPEX_WOOCOMMERCE_ACTIVE) {
// Zrób coś...
// Na przykład dołączenie nowego pliku ze wszystkimi edycjami Woo.
}

Zadeklaruj wsparcie WooCommerce

Jest to pierwszy i najważniejszy fragment kodu, który należy dodać do motywu, który „włącza” obsługę WooCommerce i zapobiega ostrzeżeniom wtyczki informującym użytkownika końcowego, że motyw jest niezgodny.

działanie dodatkowe („after_setup_theme”, function () {
add_theme_support ('woocommerce');
});

Usuń WooCommerce CSS

Osobiście wolę przesłonić style WooCommerce, aby zapobiec możliwym problemom z wtyczkami WooCommerce innych firm. Jednak jeśli chcesz usunąć wszystkie style WooCommerce, jest to bardzo łatwe.

Poniższy fragment kodu służy do usuwania WSZYSTKICH stylów WooCommerce:

// Usuń wszystkie style Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Ten fragment kodu jest przykładem warunkowego usunięcia określonych stylów CSS:

funkcja wpex_remove_woo_styles ($ styles) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
zwraca style $;
}
add_filter („woocommerce_enqueue_styles”, „wpex_remove_woo_styles”);

Włącz galerię produktów WooCommerce, powiększenie i Lightbox (v3.0 +)

W WooCommerce 3.0 wprowadzili nową galerię produktów, zoom i lightbox. Wszystkie muszą być włączone poprzez „add_theme_support”, jeśli chcesz wykorzystać je w swoim motywie.

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

Usuń tytuł sklepu

Wiele motywów ma już funkcje do wyświetlania tytułów archiwów, więc ten kod usuwa dodatkowy tytuł z WooCommerce, co jest lepsze niż ukrywanie go za pomocą CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Zmień tytuł archiwum dla sklepu

Jeśli Twój motyw używa funkcji archive_title () lub get_archive_title () do wyświetlenia tytułu dla swoich archiwów, możesz go łatwo dostosować za pomocą filtra, aby zamiast tego pobrać nazwę strony produktu dla tytułu archiwum sklepu.

funkcja wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ title = get_the_title ($ shop_id);
}
zwróć $ tytuł;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Zmień liczbę produktów wyświetlanych na stronie w sklepie

Służy do zmiany liczby produktów wyświetlanych na stronie w sklepie i archiwach produktów (kategorie i tagi).

// Zmień posty w sklepie WooCommerce na stronę
funkcja wpex_woo_posts_per_page ($ cols) {
zwraca 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Zmień liczbę kolumn wyświetlanych w sklepie na wiersz

Nie rozumiem, dlaczego WooCommerce działa w ten sposób, ale nie możesz po prostu zmienić filtra „loop_shop_columns”, musisz także dodać unikalne klasy do tagu body, aby kolumny działały. Podczas gdy Skróty Woo mają opakowanie div z odpowiednimi klasami, których nie mają strony sklepu, dlatego potrzebujemy dwóch funkcji.

// Zmień kolumny sklepu
funkcja wpex_woo_shop_columns ($ columns) {
zwraca 4;
}
add_filter („loop_shop_columns”, „wpex_woo_shop_columns”);

// Dodaj poprawną klasę ciała dla kolumn sklepu
funkcja wpex_woo_shop_columns_body_class ($ classes) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'columns-4';
}
zwracać $ klas;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Zmień strzałki następnej i poprzedniej paginacji

Ten fragment pozwoli ci dostosować strzałki stronicowania w sklepie, aby pasowały do ​​tych w Twoim motywie.

funkcja wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '„;
$ args ['next_text'] = '„;
zwraca $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Zmień tekst odznaki OnSale

Szczególnie przydatny na stronach używających innego języka lub w celu usunięcia wykrzyknika, którego nie jestem wielkim fanem.

funkcja wpex_woo_sale_flash () {
powrót '„. esc_html __ („Wyprzedaż”, „woocommerce”). „„;
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Zmień kolumny miniatur galerii produktów

Możesz zmienić liczbę kolumn dla miniatur galerii pojedynczego produktu w zależności od układu, a ta funkcja to zrobi.

funkcja wpex_woo_product_thumbnails_columns () {
zwraca 4;
}
działanie dodatkowe („woocommerce_product_thumbnails_columns”, „wpex_woo_product_thumbnails_columns”);

Zmień liczbę wyświetlanych powiązanych produktów

Służy do zmiany liczby produktów wyświetlanych dla powiązanych produktów na stronie pojedynczego produktu.

// Ustaw powiązane produkty, aby wyświetlić 4 produkty
funkcja wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
zwraca $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Zmień liczbę kolumn w wierszu dla powiązanych i sprzedanych sekcji produktów

Podobnie jak w sklepie, jeśli chcesz odpowiednio zmienić liczbę kolumn dla powiązanych i sprzedawanych produktów na stronach pojedynczych produktów, musisz przefiltrować kolumny, a także odpowiednio zmienić klasy treści.

// Filtruj kolumny z wyższą sprzedażą
funkcja wpex_woo_single_loops_columns ($ columns) {
zwraca 4;
}
add_filter („woocommerce_up_sells_columns”, „wpex_woo_single_loops_columns”);

// Filtruj powiązane argumenty
funkcja wpex_woo_related_columns ($ args) {
$ args ['kolumny'] = 4;
zwraca $ args;
}
add_filter („woocommerce_output_related_products_args”, „wpex_woo_related_columns”, 10);

// Filtruj klasy treści, aby dodać klasę kolumny
funkcja wpex_woo_single_loops_columns_body_class ($ klas) {
if (is_singular („produkt”)) {
$ class [] = 'columns-4';
}
zwracać $ klas;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Dodaj dynamiczny link do koszyka i koszty koszyka do swojego menu

Ten fragment doda element koszyka WooCommerce do Twojego menu, który wyświetla koszt elementów w koszyku. Dodatkowo, jeśli Twoja witryna ma włączoną funkcję Font-Awesome, wyświetli małą ikonę torby na zakupy. Ważny: Te funkcje nie mogą być pakowane w warunek is_admin (), ponieważ polegają one na AJAX w celu aktualizacji kosztu, musisz upewnić się, że funkcje są dostępne, gdy is_admin () zwraca true i false.

// Dodaj link do koszyka do menu
funkcja wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Upewnij się, że zmieniłeś „wpex_main” na lokalizację menu !!!!
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. = '
  • „; $ items. = wpex_menu_cart_item (); $ items. = '
  • „; } zwrócić $ przedmiotów; } add_filter („wp_nav_menu_items”, „wpex_add_menu_cart_item_to_menus”, 10, 2); // Funkcja zwraca link do koszyka menu głównego funkcja 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 ('sklep'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('kwota', '', $ html); $ output. = '„; $ output. = '„; $ output. = wp_kses_post ($ html); $ output. = '„; zwraca $ wyjście; } // Zaktualizuj link do koszyka za pomocą AJAX funkcja wpex_main_menu_cart_link_fragments ($ fragments) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); zwrócić $ fragmenty; } add_filter („add_to_cart_fragments”, „wpex_main_menu_cart_link_fragments”);

    Wniosek

    WooCommerce domyślnie będzie współpracować z dowolnym motywem, ale dodanie dodatkowej obsługi wtyczki, aby lepiej pasowało do Twojego motywu, jest bardzo łatwe. Napisałem ten post, kodując nasz motyw WordPress Blog & Shop w Nowym Jorku, więc większość z tych poprawek znajduje się w naszym motywie. Lub jeśli wolisz, możesz kupić motyw, aby zobaczyć, jak wszystko zostało zrobione (zobacz pliki na stronie wpex-new-york / inc / woocommerce) – może to być łatwiejszy sposób, aby dowiedzieć się, jak poprawnie dodać niestandardowe wsparcie dla wtyczki WooCommerce, patrząc na już zakodowany motyw.

    Czy są jakieś inne fragmenty, które Twoim zdaniem należą do tej listy, czy byłyby pomocne przy opracowywaniu nowych motywów gotowych na WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me