Hvordan lage et WordPress Theme WooCommerce Ready

Gjør WordPress Theme WooCommerce din kompatibel med tesene Nyttige utdrag

Så du vil legge til en butikk til temaet ditt – kjempebra! WooCommerce er et godt valg. teknisk sett ALLE temaene er “WooCommerce Compatible” fordi det er en plugin. I teorien skal enhver plugin fungere med et hvilket som helst WordPress-tema (som er kodet riktig).


Selv som temautvikler kan det være lurt å finpusse utdataene fra WooCommerce for å passe bedre til ditt tema eller for å gi alternativer til sluttbrukere som ikke er lett tilgjengelige i WooCommerce-innstillingene (for eksempel å endre antall kolonner i butikken). Nedenfor finner du noen nyttige utdrag som du kan bruke til å gi “bedre” støtte for WooCommerce i ditt tema og / eller for å endre ting for ditt spesifikke design.

Viktig: Mange av tekstutdragene nedenfor bruker funksjoner som bare er tilgjengelige i WooCommerce. Så sørg for at disse tekstutdragene ikke bare blir dumpet nederst ifunksjonene.php-filen i et tema som er opprettet for distribusjon. Hvis du skal dele temaet ditt med andre eller selge det, må du huske å plassere tekstutdragene i deres egen fil som er lastet bare når WooCommerce-pluginen er aktiv.

Sjekk om WooCommerce er aktivert

I temaene mine ønsker jeg å definere en tilpasset konstant som kan brukes til å sjekke om WooCommerce er aktivert på denne måten. Jeg kan ta med filer eller kjøre funksjoner bare når WooCommerce er aktiv (se viktig melding ovenfor hvis du ikke har gjort det ennå).

// Legg til en ny konstant som kommer tilbake hvis WooCommerce er aktiv
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Kontroller om WooCommerce er aktiv
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Gjør noe...
// Slik som å inkludere en ny fil med alle Woo-redigeringene dine.
}

Erklære WooCommerce-støtte

Dette er den første og viktigste kodestykket du legger til temaet ditt som “aktiverer” WooCommerce-støtte og forhindrer advarsler fra plugin som forteller sluttbrukeren at temaet ikke er kompatibelt.

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

Fjern WooCommerce CSS

Personlig overstyrer jeg heller WooCommerce-stiler for å forhindre eventuelle problemer med tredjeparts WooCommerce-plugins. Hvis du vil fjerne alle WooCommerce-stiler, er det imidlertid veldig enkelt.

Følgende utdrag er for å fjerne ALLE WooCommerce-stiler:

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

Dette utdraget er et eksempel på betinget fjerning av spesifikke CSS-stiler:

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

Aktiver WooCommerce produktgalleri, zoom og lysboks (v3.0 +)

I WooCommerce 3.0 introduserte de et nytt produktgalleri, zoom og lightbox. Disse må alle være aktivert via “add_theme_support” hvis du vil bruke dem i temaet ditt.

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

Fjern butikkens tittel

Mange temaer har allerede funksjoner for å vise arkivtitler, så denne koden fjerner den ekstra tittelen fra WooCommerce, noe som er bedre enn å skjule det via CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Endre arkivtittelen for butikken

Hvis temaet ditt bruker arkivtittelen () eller get_archive_title () -funksjonene for å vise tittelen på arkivene dine, kan du enkelt finjustere det via et filter for å hente navnet på produktsiden i stedet for butikkarkivtittelen.

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

Endre antall produkter som vises per side i butikken

Brukes til å endre hvor mange produkter som vises per side i butikken og produktarkiv (kategorier og tagger).

// Alter WooCommerce butikkinnlegg per side
funksjon wpex_woo_posts_per_page ($ cols) {
retur 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Endre antall kolonner som vises i butikken per rad

Jeg forstår ikke hvorfor WooCommerce fungerer på denne måten, men du kan ikke bare endre filteret ‘loop_shop_columns’, du må også legge til de unike klassene i karosseriet for at kolonnene skal fungere. Mens Woo Shortcodes har en div-innpakning med de riktige klassene butikksidene ikke har, er det derfor vi trenger to funksjoner.

// Endre butikkskolonner
funksjon wpex_woo_shop_columns ($ kolonner) {
retur 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Legg til riktig karosseriklasse for butikkskolonner
funksjon wpex_woo_shop_columns_body_class ($ klasser) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ klasser [] = 'kolonner-4';
}
returner $ klasser;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Endre neste og forrige paginasjonspiler

Dette utdraget lar deg finjustere pagineringspilene på butikken for å matche de som er i temaet ditt.

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

Endre OnSale-merketeksten

Spesielt nyttig på nettsteder som bruker et annet språk eller for å fjerne utropstegnet som jeg ikke er en stor tilhenger av.

funksjon wpex_woo_sale_flash () {
komme tilbake ''. esc_html __ ('Salg', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Endre miniatyrkolonner for produktgalleri

Det kan være lurt å endre antall kolonner for miniatyrbildene for ett produktgalleri avhengig av oppsettet, og denne funksjonen vil gjøre nettopp det.

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

Endre antall viste relaterte produkter

Brukes til å endre antall produkter som vises for relaterte produkter på den ene produktsiden.

// Angi relaterte produkter til å vise 4 produkter
funksjon 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');

Endre antall kolonner per rad for relaterte & up-selger seksjoner på produkter

Akkurat som i butikken hvis du vil endre antallet kolonner for relaterte og up-sell produkter på de enkelte produktsidene, må du filtrere kolonnene og også endre karosseriklassene tilsvarende.

// Filtrer opp-selger kolonner
funksjon wpex_woo_single_loops_columns ($ kolonner) {
retur 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

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

// Filtrer kroppsklasser for å legge til kolonneklasse
funksjon 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');

Legg til en dynamisk handlekoblings- og vognkostnad på menyen

Denne kodebiten vil legge til en WooCommerce-vognvare til menyen din som viser kostnadene for varene i handlekurven din. I tillegg hvis nettstedet ditt har Font-Awesome aktivert, vil det vise et lite handleposeikon. Viktig: Disse funksjonene må ikke pakkes inn i en is_admin () betinget fordi de er avhengige av AJAX for å oppdatere kostnadene, du må sørge for at funksjonene er tilgjengelige når is_admin () returnerer sann og usann.

// Legg lenken til handlekurven til menyen
funksjon wpex_add_menu_cart_item_to_menus ($ elementer, $ args) {

// Forsikre deg om at du endrer 'wpex_main' til menyposisjonen din !!!!
if ($ args-> theme_location === 'wpex_main') {

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

if (is_cart ()) {
$ css_class. = 'aktuelle menyelement';
}

$ varer. = '
  • '; $ elementer. = wpex_menu_cart_item (); $ varer. = '
  • '; } returner $ varer; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funksjon returnerer koblingen til hovedmenyen funksjon 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 (); } annet { $ url = wc_get_page_permalink ('butikk'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('beløp', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; returnere $ output; } // Oppdater kurvlenke med AJAX funksjon 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');

    Konklusjon

    WooCommerce fungerer som standard med alle temaer, men det er veldig enkelt å legge til litt ekstra støtte for plugin slik at det passer bedre til temaet ditt. Jeg skrev faktisk dette innlegget mens jeg kodet temaet vårt i New York WordPress Blog & Shop, så de fleste av disse tweaksene er inkludert i temaet vårt. Eller hvis du heller vil at du kan kjøpe temaet for å se på hvordan alt ble gjort (se filene på wpex-new-york / inc / woocommerce) – det kan være en enklere måte å lære deg å legge til på riktig måte tilpasset støtte for WooCommerce-plugin ved å se på et allerede kodet tema.

    Er det andre tekstutdrag du tror hører hjemme på denne listen, eller kan du være nyttig når du utvikler 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