Sådan gør du et WordPress-tema WooCommerce klar

Gør dit WordPress-tema WooCommerce kompatibelt med teser Nyttige uddrag

Så du vil tilføje en butik til dit tema – fantastisk! WooCommerce er et godt valg. Teknisk set ALLE temaer er “WooCommerce Compatible”, fordi det er et plugin. I teorien skal enhver plugin fungere med ethvert WordPress-tema (der er kodet korrekt).


Som temaudvikler vil du måske ønske at finpudse WooCommerce-output for bedre at passe til dit tema eller for at give indstillinger til dine slutbrugere, der ikke let er tilgængelige i WooCommerce-indstillingerne (f.eks. At ændre antallet af kolonner i butikken). Nedenfor finder du nogle nyttige uddrag, som du kan bruge til at give “bedre” support til WooCommerce i dit tema og / eller til at ændre ting til dit specifikke design.

Vigtig: Mange af uddragene nedenfor bruger kun funktioner, der er tilgængelige i WooCommerce. Så sørg for, at disse uddrag ikke bare dumpes i bunden af ​​din features.php-fil i et tema, der er oprettet til distribution. Hvis du vil dele dit tema med andre eller sælge, skal du sørge for at placere kodebøgerne i deres egen fil, der kun er indlæst, når WooCommerce-pluginet er aktivt.

Kontroller, om WooCommerce er aktiveret

I mine temaer vil jeg gerne definere en brugerdefineret konstant, der kan bruges til at kontrollere, om WooCommerce er aktiveret på denne måde. Jeg kan kun inkludere filer eller køre funktioner, når WooCommerce er aktiv (se vigtig meddelelse ovenfor, hvis du ikke har det endnu).

// Tilføj ny konstant, der returnerer sandt, hvis WooCommerce er aktiv
definere ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Kontrol, om WooCommerce er aktiv
hvis (WPEX_WOOCOMMERCE_ACTIVE) {
// Gør noget...
// Så som at inkludere en ny fil med alle dine Woo-redigeringer.
}

Angiv WooCommerce Support

Dette er det første og vigtigste stykke kode, der tilføjes til dit tema, som “aktiverer” WooCommerce-support og forhindrer advarsler fra plugin, der fortæller slutbrugeren, at temaet ikke er kompatibelt.

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

Fjern WooCommerce CSS

Personligt tilsidesætter jeg hellere WooCommerce-stilarter for at forhindre eventuelle problemer med tredjeparts WooCommerce-plugins. Hvis du imidlertid vil fjerne alle WooCommerce-stilarter, er det meget let.

Følgende kodestykke er til at fjerne ALLE WooCommerce-stilarter:

// Fjern alle Woo-stilarter
add_filter ('woocommerce_enqueue_style', '__return_empty_array');

Dette uddrag er et eksempel på betinget fjernelse af specifikke CSS-stilarter:

funktion wpex_remove_woo_style ($ stilarter) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
returner $ stilarter;
}
add_filter ('woocommerce_enqueue_style', 'wpex_remove_woo_style');

Aktivér WooCommerce-produktgalleri, Zoom & Lightbox (v3.0 +)

I WooCommerce 3.0 introducerede de et nyt produktgalleri, zoom og lightbox. Disse skal alle være aktiveret via “add_theme_support”, hvis du vil gøre brug af dem i dit tema.

add_theme_support ('wc-produkt-galleri-skyderen');
add_theme_support ('wc-produkt-galleri-zoom');
add_theme_support ('wc-produkt-galleri-lightbox');

Fjern butikstitel

En masse temaer har allerede funktioner til at vise arkivtitler, så denne kode fjerner den ekstra titel fra WooCommerce, hvilket er bedre end at skjule det via CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Ændre arkivtitlen til butikken

Hvis dit tema bruger arkivet_title () eller get_archive_title () -funktionerne til at vise titlen til dine arkiver, kan du let finjustere det via et filter for at få fat på navnet på din produktside i stedet for butikarkivets titel.

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

Skift antallet af produkter, der vises pr. Side i butikken

Bruges til at ændre, hvor mange produkter der vises pr. Side i butikken og produktarkiver (kategorier og tags).

// Alter WooCommerce shop-indlæg pr. Side
funktion wpex_woo_posts_per_page ($ cols) {
retur 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Skift antallet af kolonner, der vises i butikken pr. Række

Jeg forstår ikke, hvorfor WooCommerce fungerer på denne måde, men du kan ikke bare ændre filteret ‘loop_shop_columns’, du skal også tilføje de unikke klasser til body-mærket for at kolonnerne kan fungere. Mens Woo Shortcodes har en div-indpakning med de rigtige klasser, som shoppingsiderne ikke har, er det derfor, vi har brug for to funktioner.

// Ændre butikssøjler
funktion wpex_woo_shop_columns ($ kolonner) {
retur 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Tilføj korrekt karosseriklasse for butikssøjler
funktion wpex_woo_shop_columns_body_class ($ klasser) {
if (is_shop () || er_product_category () || er_product_tag ()) {
$ klasser [] = 'kolonner-4';
}
returner $ klasser;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Skift de næste og forrige pagineringspil

Dette uddrag giver dig mulighed for at finpudse pagineringspilene i butikken for at matche dem i dit tema.

funktion wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
returner $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Skift OnSale-badge-teksten

Især nyttigt på websteder, der bruger et andet sprog eller til at fjerne udråbsmærket, som jeg ikke er en stor fan af.

funktion wpex_woo_sale_flash () {
Vend tilbage ''. esc_html __ ('Salg', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Skift produktgalleriets miniaturekolonner

Det kan være nødvendigt at ændre antallet af kolonner for miniaturebillederne til det enkelte produktgalleri afhængigt af dit layout, og denne funktion gør netop det.

funktion wpex_woo_product_roomsnails_columns () {
retur 4;
}
add_action ('woocommerce_product_roomsnails_columns', 'wpex_woo_product_roomsnails_columns');

Ændr antallet af viste relaterede produkter

Bruges til at ændre antallet af produkter, der vises for relaterede produkter på den enkelte produktside.

// Indstil relaterede produkter til at vise 4 produkter
funktion wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
returner $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Skift antallet af kolonner pr. Række for relaterede & up-sells sektioner på produkter

Ligesom butikken, hvis du vil ændre antallet af kolonner for relaterede og up-sell produkter på de enkelte produktsider korrekt, skal du filtrere kolonnerne og også ændre karosseriklasser i overensstemmelse hermed.

// Filtrer op-sælger kolonner
funktion wpex_woo_single_loops_columns ($ kolonner) {
retur 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrelaterede argumenter
funktion wpex_woo_related_columns ($ args) {
$ args ['columns'] = 4;
returner $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrer kropsklasser for at tilføje kolonneklasse
funktion wpex_woo_single_loops_columns_body_class ($ klasser) {
if (is_singular ('produkt')) {
$ klasser [] = 'kolonner-4';
}
returner $ klasser;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Tilføj et dynamisk indkøbskurv & indkøbskurv til din menu

Dette kodestykke tilføjer en WooCommerce-indkøbsvognpost til din menu, der viser omkostningerne til elementerne i din kurv. Plus, hvis dit websted har Font-Awesome aktiveret, viser det et lille indkøbsposessymbol. Vigtig: Disse funktioner må ikke indpakkes i en is_admin () betinget, fordi de er afhængige af AJAX for at opdatere omkostningerne, du skal sikre dig, at funktionerne er tilgængelige, når is_admin () returnerer sandt og usant.

// Føj linket til indkøbskurv til menuen
funktion wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Sørg for at ændre 'wpex_main' til din menuplacering !!!!
if ($ args-> tema_lokation === 'wpex_main') {

$ css_class = 'menu-element menu-item-type-cart menu-item-type-woocommerce-cart';

if (is_cart ()) {
$ css_class. = 'aktuel-menu-vare';
}

$ varer. = '
  • '; $ varer. = wpex_menu_cart_item (); $ varer. = '
  • '; } returnere $ varer; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funktion returnerer linket til hovedmenukurv funktion 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 () -> indkøbsvogn-> get_cart_url (); } andet { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('beløb', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; returnere $ output; } // Opdater indkøbskurvets link med AJAX funktion wpex_main_menu_cart_link_fragments ($ fragmenter) { $ fragmenter ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); returner $ fragmenter; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Konklusion

    WooCommerce fungerer som standard med ethvert tema, men det er meget let at tilføje en vis ekstra support til plugin, så det bedre passer til dit tema. Jeg skrev faktisk dette indlæg, mens jeg kodede vores New York WordPress Blog & Shop-tema, så de fleste af disse justeringer er inkluderet i vores tema. Eller hvis du hellere kan købe temaet for at se på, hvordan alt blev gjort (se filerne på wpex-new-york / inc / woocommerce) – kan det være en lettere måde at lære, hvordan du korrekt tilføjer brugerdefineret support til WooCommerce-plugin ved at se på et allerede kodet tema.

    Er der andre tekstuddrag, som du synes hører til på denne liste, eller ville du være nyttigt, når du udvikler nye WooCommerce-klare temaer?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map