Kako napraviti WordPress temu WooCommerce spremna

Učinite svoju WordPress temu WooCommerce kompatibilnom s tezama korisnim isječcima

Dakle, želite dodati trgovinu svojoj temi – fenomenalno! WooCommerce je odličan izbor. tehnički gledano SVI teme su “WooCommerce Compatible” jer je dodatak. Teoretski bi svaki dodatak trebao raditi s bilo kojom WordPress temom (koja je ispravno kodirana).


Kao programer tema, možda biste htjeli prilagoditi izlaz WooCommerce-a kako biste bolje odgovarali vašoj temi ili pružiti opcije krajnjim korisnicima koje nisu lako dostupne u postavkama WooCommercea (poput promjene broja stupaca u trgovini). Ispod ćete pronaći neke korisne isječke pomoću kojih možete pružiti “bolju” podršku za WooCommerce u svojoj temi i / ili za izmjenu stvari za vaš specifični dizajn.

Važno: Mnogi donji isječci koriste funkcije dostupne samo u WooCommerceu. Stoga provjerite da se ovi isječci ne nalaze samo na dnu vaše datoteke datoteke files.php u temi stvorenoj za distribuciju. Ako ćete dijeliti svoju temu s drugima ili je prodati, svakako isječke stavite u svoju datoteku učitanu samo kad je aktivni dodatak WooCommerce.

Provjerite je li WooCommerce omogućena

U svojim temama volim definirati prilagođenu konstantu pomoću koje se može provjeriti je li WooCommerce omogućena na ovaj način mogu uključiti datoteke ili pokrenuti funkcije samo kada je WooCommerce aktivna (pogledajte važnu poruku gore ako još niste).

// Dodajte novu konstantu koja vraća vrijednost true ako je WooCommerce aktivna
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Provjera je li WooCommerce aktivna
ako (WPEX_WOOCOMMERCE_ACTIVE) {
// Učini nešto...
// Kao što je uključivanje nove datoteke sa svim vašim Woo izmjenama.
}

Izjavite podršku za WooCommerce

Ovo je prvi i najvažniji komad koda koji se dodaje vašoj temi koji “omogućuje” WooCommerce podršku i sprečava upozorenja iz dodatka koji govore krajnjem korisniku da tema nije kompatibilna.

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

Uklonite WooCommerce CSS

Osobno radije prevladavam WooCommerce stilove kako bih spriječio moguće probleme s dodacima WooCommerce treće strane. Međutim, ako želite ukloniti sve stilove WooCommerce, to je vrlo jednostavno.

Sljedeći isječak je za uklanjanje SVIH stilova WooCommerce:

// Uklonite sve Woo stilove
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Ovaj je isječak primjer uvjetnog uklanjanja određenih CSS stilova:

funkcija wpex_remove_woo_styles ($ stilovi) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
vratiti $ stilove;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Omogući WooCommerce Galeriju proizvoda, Zoom i Lightbox (v3.0 +)

U WooCommerce 3.0 su predstavili novu galeriju proizvoda, zoom i lightbox. Sve one moraju biti omogućene putem “add_theme_support” ako ih želite koristiti u svojoj temi.

add_theme_support ('wc-proizvod-galerija-klizač');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('wc-proizvod-galerija-lightbox');

Uklonite naziv trgovine

Mnogo tema već ima funkcije za prikaz naslova arhiva, tako da ovaj kôd uklanja dodatni naslov iz WooCommercea, što je bolje nego ga sakriti preko CSS-a.

add_filter ('woocommerce_show_page_title', '__return_false');

Izmijenite naslov arhive za trgovinu

Ako vaša tema koristi funkciju archive_title () ili get_archive_title () za prikaz naslova svoje arhive, jednostavno je možete podešavati filtrom tako da dobijete naziv stranice vašeg proizvoda umjesto naslova arhiva trgovine.

funkcija wpex_woo_archive_title ($ naslov) {
if (is_shop () && $ shop_id = wc_get_page_id ('trgovina')) {
$ title = get_the_title ($ shop_id);
}
vratiti $ naslov;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Promijenite broj proizvoda koji se prikazuju na stranici u trgovini

Koristi se za izmjenu broja proizvoda na stranici u trgovini i arhivi proizvoda (kategorije i oznake).

// Alter WooCommerce prodavaonica po stranici
funkcija wpex_woo_posts_per_page ($ cols) {
povratak 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Promijenite broj stupaca prikazanih u trgovini po retku

Ne razumijem zašto WooCommerce djeluje na ovaj način, ali ne možete samo promijeniti filtar ‘loop_shop_column’, morate dodati i jedinstvene klase u oznaku tijela kako bi stupci radili. Iako Woo kratke šifre imaju omot div s točnim klasama na stranicama trgovina, zato su nam potrebne dvije funkcije.

// Alter shop stupovi
funkcija wpex_woo_shop_column ($ stupci) {
povratak 4;
}
add_filter ('loop_shop_column', 'wpex_woo_shop_column');

// Dodajte ispravnu klasu tijela za stupce trgovine
funkcija wpex_woo_shop_column_body_class ($ klasa) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ klase [] = 'stupci-4';
}
vratiti $ klase;
}
add_filter ('body_class', 'wpex_woo_shop_column_body_class');

Promijenite sljedeće i prethodne strelice za stranice

Ovaj isječak će vam omogućiti da podesite strelice za stranicu za stranicu na trgovini kako biste odgovarali onima u vašoj temi.

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

Promijenite tekst oznake OnSale

Posebno je korisno na web lokacijama koje koriste drugi jezik ili za uklanjanje uskličnika za koje nisam veliki obožavatelj.

funkcija wpex_woo_sale_flash () {
povratak ''. esc_html __ ('Prodaja', 'woocommerce'). '„;
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Promijenite stupce sličica Galerije proizvoda

Možda želite promijeniti broj stupaca za sličice galerije pojedinačnih proizvoda ovisno o vašem izgledu i ova će funkcija učiniti upravo to.

funkcija wpex_woo_product_thumbnails_column () {
povratak 4;
}
dodavanje ('woocommerce_product_thumbnails_column', 'wpex_woo_product_thumbnails_column');

Izmijenite broj prikazanih povezanih proizvoda

Koristi se za izmjenu broja prikazanih proizvoda za srodne proizvode na jednoj stranici proizvoda.

// Postavljanje povezanih proizvoda na prikaz 4 proizvoda
funkcija 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');

Promijenite broj stupaca u retku za povezane i prodajne odjeljke na proizvodima

Baš poput trgovine, ako želite pravilno promijeniti broj stupaca za srodne i prodajne proizvode na pojedinim stranicama proizvoda, morate filtrirati stupce i također promijeniti klase karoserije u skladu s tim.

// Filtriranje prodajnih stupaca
funkcija wpex_woo_single_loops_column ($ stupci) {
povratak 4;
}
add_filter ('woocommerce_up_sells_column', 'wpex_woo_single_loops_column');

// Filtriranje povezanih argova
funkcija wpex_woo_related_column ($ args) {
$ args ['stupci'] = 4;
return $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_column', 10);

// Filtriranje klasa tijela za dodavanje klase stupca
funkcija wpex_woo_single_loops_column_body_class ($ predavanja) {
ako (is_singular ('proizvod')) {
$ klase [] = 'stupci-4';
}
vratiti $ klase;
}
add_filter ('body_class', 'wpex_woo_single_loops_column_body_class');

Dodajte dinamičnu vezu i košaricu košaricu na svoj izbornik

Ovaj isječak će na vaš izbornik dodati stavku košarice WooCommerce koja prikazuje cijenu predmeta u vašoj košarici. Uz to ako je na vašoj web lokaciji omogućen Font-Awesome prikazat će se malu ikonu košarice. Važno: Ove funkcije ne smiju biti umotane u uvjet is_admin () jer se oslanjaju na AJAX radi ažuriranja troškova. Morate biti sigurni da su funkcije dostupne kad is_admin () vrati true i false.

// Dodajte vezu u izbornik
funkcija wpex_add_menu_cart_item_to_menus ($ stavke, $ args) {

// Obavezno promjenite "wpex_main" na svoju lokaciju izbornika !!!!
if ($ args-> topic_location === 'wpex_main') {

$ css_class = 'izbornik-stavka izbornika-stavka-vrsta-košaricu-izbornik-stavka-vrsta-woocommerce-cart';

ako je (is_cart ()) {
$ css_class. = 'stavka trenutnog izbornika';
}

$ items. = '
  • „; $ items. = wpex_menu_cart_item (); $ items. = '
  • „; } vratiti $ predmete; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funkcija vraća poveznicu s glavnim izbornikom funkcija wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count); ako ($ cart_count) { $ url = WC () -> košaricu-> get_cart_url (); } else { $ url = wc_get_page_permalink ('trgovina'); } $ html = $ cart_extra = WC () -> košaricu-> get_cart_total (); $ html = str_replace ('iznos', '', $ html); $ output. = '„; $ output. = '„; $ output. = wp_kses_post ($ html); $ output. = '„; vratiti $ output; } // Ažuriraj vezu košarice s AJAX-om funkcija wpex_main_menu_cart_link_fragments ($ fragmenti) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); vrati $ fragmente; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Zaključak

    WooCommerce će prema zadanim postavkama raditi s bilo kojom temom, ali dodajte dodatnu podršku za dodatak kako bi on bolje odgovarao vašoj temi vrlo je lako napraviti. Zapravo sam napisao ovaj post dok sam kodirao temu New Yorka WordPress Blog & Shop, tako da je većina tih podešavanja uključena u našu temu. Ili ako biste radije mogli kupiti temu da biste pogledali kako je sve napravljeno (pogledajte datoteke na wpex-new-york / inc / woocommerce) – možda će vam to biti lakši način da naučite kako pravilno dodavati prilagođena podrška za WooCommerce dodatak gledanjem već kodirane teme.

    Postoje li neki drugi isječci za koje smatrate da pripadaju ovom popisu ili bi vam mogli biti od pomoći pri razvoju novih tema spremnih za WooCommerce.?

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