Ehitad oma teemat ja soovid integreerida poodi? Tehniliselt töötab WooCommerce iga teemaga, kuna see on lihtsalt plugin. Aga „töötab" ei tähenda „näeb õige välja": tootevõre laguneb, küljeribad triivivad paigast ja vaikimisi stiilid põrkavad sinu omadega kokku.

Probleem on sügavam kui mõni CSS-i reegel. Alates WooCommerce 3.3-st saab teema, millel pole deklareeritud tuge, lihtsustatud renderduse lühikoodide kaudu ja hoiatuse administraatori paneelis. Sa kaotad täieliku kontrolli paigutuse üle.

Allpool on kasutusvalmis koodijupid, mis katavad kõike alates toe deklareerimisest kuni reaalajas ostukorvini menüüs. Igaüht on testitud praeguse WooCommerce'i versiooniga ja need on jaotatud osadeks alustaladest peenhäälestuseni.

💡 Kiirülevaade:

• Esmalt peab teema selgesõnaliselt deklareerima WooCommerce'i toe; ilma selleta ei aktiveeru malli ülekirjutused ja mõned funktsioonid
• Paiguta kood eraldi faili (näiteks inc/woocommerce.php), mis laaditakse ainult siis, kui plugin on aktiivne
• Poevõre seadistamine nõuab kahte filtrit: üks muudab veergude arvu, teine lisab body elemendile klassi
• Tootegalerii, suum, lightbox ja liugur lubatakse eraldi add_theme_support väljakutsete kaudu
• Ostukorvi menüüs tuleb uuendada AJAX-i abil; kasuta add_to_cart_fragments filtrit

1. Alustalad: toe deklareerimine ja plugina aktiivsuse kontrollimine

Esiteks ja ennekõike peab teema WooCommerce'ile selgesõnaliselt ütlema: „Ma toetan sind." Ilma selleta ei aktiveeri plugin malli ülekirjutusi ja kuvab administraatori paneelis hoiatuse. Alates WooCommerce 3.3-st saab teema, millel pole deklareeritud tuge, lihtsustatud renderduse lühikoodide kaudu. See töötab, kuid piirab sinu kontrolli paigutuse üle.

1
add_action( 'after_setup_theme', function() {
2
    add_theme_support( 'woocommerce' );
3
} );

Oluline on kasutada after_setup_theme konksu, mitte init, nagu soovitab WooCommerce'i dokumentatsioon. Alates versioonist 3.3+ saad edastada võre seaded otse:

1
add_action( 'after_setup_theme', function() {
2
    add_theme_support( 'woocommerce', array(
3
        'thumbnail_image_width' => 150,
4
        'single_image_width'    => 300,
5
        'product_grid'          => array(
6
            'default_rows'    => 3,
7
            'min_rows'        => 2,
8
            'max_rows'        => 8,
9
            'default_columns' => 4,
10
            'min_columns'     => 2,
11
            'max_columns'     => 5,
12
        ),
13
    ) );
14
} );

Need parameetrid määravad vaikeväärtused kohandajale (WooCommerce → Tootepildid / Tootekataloog) ja säästavad kasutajaid võre käsitsi seadistamise vaevast.

Plugina aktiivsuse kontrollimine

Kui levitad teemat, ei saa sa lihtsalt WooCommerce'i koodijuppe functions.php lõppu loopida, sest need põhjustavad fataalse vea, kui plugin pole aktiivne. Kood peaks laadima ainult siis, kui WooCommerce töötab:

1
define( 'MYTHEME_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );
2
 
3
if ( MYTHEME_WOOCOMMERCE_ACTIVE ) {
4
    require_once get_template_directory() . '/inc/woocommerce.php';
5
}

Konstanti hinnatakse üks kord ja seejärel saad oma teemas kõikjal kutsed mässida if ( MYTHEME_WOOCOMMERCE_ACTIVE ) sisse. See on puhtam kui iga kord class_exists või is_plugin_active välja kutsumine.

2. WooCommerce'i stiilide haldamine

WooCommerce'iga tuleb kaasa kolm CSS-faili: woocommerce-general, woocommerce-layout ja woocommerce-smallscreen. Ideaalis ei eemalda sa neid, vaid kirjutad oma teemas üle. Nii ei lähe katki kolmandate osapoolte WooCommerce'i laiendused, mis neile klassidele tuginevad. Aga kui kirjutad kõike nullist ja soovid täielikku kontrolli, siis siin on, kuidas need eemaldada.

Eemalda kõik stiilid korraga:

1
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Või eemalda valikuliselt:

1
function mytheme_remove_woo_styles( $styles ) {
2
    unset( $styles['woocommerce-general'] );
3
    unset( $styles['woocommerce-layout'] );
4
    unset( $styles['woocommerce-smallscreen'] );
5
    return $styles;
6
}
7
add_filter( 'woocommerce_enqueue_styles', 'mytheme_remove_woo_styles' );

Praktikas on teine variant levinum: eemaldad woocommerce-layout (protsendipõhine võre), kuid jätad alles woocommerce-general (nupud, teavitused, vormid) ja kirjutad need oma CSS-iga kõrgema spetsiifilisuse abil valikuliselt üle.

3. Poepoogede seadistamine

Kui palju tooteid kuvada

loop_shop_per_page filter kontrollib toodete arvu poepoel ja arhiivides (kategooriad, sildid):

1
function mytheme_woo_posts_per_page( $cols ) {
2
    return 12;
3
}
4
add_filter( 'loop_shop_per_page', 'mytheme_woo_posts_per_page' );

Veergude arv võres

Siin on vaja kahte filtrit. Ainult loop_shop_columns kasutamisest ei piisa: erinevalt WooCommerce’i lühikoodidest (millel on columns-N klassiga ümbris) ei ole poelehtedel seda klassi. Seega lisame selle body elemendile:

1
function mytheme_woo_shop_columns( $columns ) {
2
    return 4;
3
}
4
add_filter( 'loop_shop_columns', 'mytheme_woo_shop_columns' );
5
 
6
function mytheme_woo_shop_columns_body_class( $classes ) {
7
    if ( is_shop() || is_product_category() || is_product_tag() ) {
8
        $classes[] = 'columns-4';
9
    }
10
    return $classes;
11
}
12
add_filter( 'body_class', 'mytheme_woo_shop_columns_body_class' );

Nüüd saad CSS-is kirjutada selektoreid nagu .columns-4 ul.products li.product ja need rakenduvad konkreetselt poe ruudustikule.

Poe pealkiri

WooCommerce kuvab poelehel vaikimisi pealkirjaks „Shop". Kui sinu teema juba arhiivipealkirju käsitleb, jääb see duplikaat ette:

1
add_filter( 'woocommerce_show_page_title', '__return_false' );

Kui kasutad funktsiooni the_archive_title(), saad pealkirja asendada poelehe nimega (mis on määratud halduspaneelis):

1
function mytheme_woo_archive_title( $title ) {
2
    if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
3
        $title = get_the_title( $shop_id );
4
    }
5
    return $title;
6
}
7
add_filter( 'get_the_archive_title', 'mytheme_woo_archive_title' );

4. Tootegalerii: suum, lightbox ja liugur

Alates WooCommerce 3.0-st võeti kasutusele uus tootegalerii, mis põhineb FlexSlideril, PhotoSwipe’il ja jQuery Zoomil. Versioonides 3.0-3.2 on see vaikimisi keelatud ja nõuab selgesõnalist lubamist. Alates versioonist 3.3 on galerii lubatud teemade puhul, mis ei ole WooCommerce’i teemad, ja keelatud teemade puhul, mis deklareerivad toe; vajalikud komponendid lubad ise:

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

Saad lubada ainult osa funktsioone: näiteks liugur ja suum jah, kuid asendada lightbox’i oma Fancyboxi lahendusega. Iga direktiiv laadib oma skriptid, seega ära luba seda, mida sa ei vaja.

Galerii pisipiltide veergude arv (peamise toote pildi all):

1
function mytheme_woo_product_thumbnails_columns() {
2
    return 4;
3
}
4
add_action( 'woocommerce_product_thumbnails_columns', 'mytheme_woo_product_thumbnails_columns' );

5. Seotud tooted ja ristmüük/lisamüük

Tootelehel kuvab WooCommerce plokid „Seotud tooted" ja „Sulle võib meeldida ka" (lisamüük). Nende arvu ja ruudustikku seadistatakse eraldi.

Kui palju seotud tooteid kuvada:

1
function mytheme_woo_related_posts_per_page( $args ) {
2
    $args['posts_per_page'] = 4;
3
    return $args;
4
}
5
add_filter( 'woocommerce_output_related_products_args', 'mytheme_woo_related_posts_per_page' );

Lisamüügi ja seotud toodete plokkide veerud (sama lugu nagu poe ruudustikuga): muudame nii veerge kui ka klassi body elemendil:

1
function mytheme_woo_single_loops_columns( $columns ) {
2
    return 4;
3
}
4
add_filter( 'woocommerce_up_sells_columns', 'mytheme_woo_single_loops_columns' );
5
 
6
function mytheme_woo_related_columns( $args ) {
7
    $args['columns'] = 4;
8
    return $args;
9
}
10
add_filter( 'woocommerce_output_related_products_args', 'mytheme_woo_related_columns', 10 );
11
 
12
function mytheme_woo_single_loops_columns_body_class( $classes ) {
13
    if ( is_singular( 'product' ) ) {
14
        $classes[] = 'columns-4';
15
    }
16
    return $classes;
17
}
18
add_filter( 'body_class', 'mytheme_woo_single_loops_columns_body_class' );

Pane tähele, et woocommerce_output_related_products_args filtril on kaks erineva prioriteediga filtrit: mytheme_woo_related_posts_per_page (vaikimisi 10) muudab väärtust posts_per_page ja mytheme_woo_related_columns (prioriteet 10) muudab väärtust columns. Need ei lähe omavahel vastuollu, sest töötavad sama $args massiivi erinevate võtmetega.

6. Lehekülgede jaotus ja allahindluse märk

Saad asendada lehekülgede jaotuse nooled oma teema ikoonidega:

1
function mytheme_woo_pagination_args( $args ) {
2
    $args['prev_text'] = '<i class="fa fa-angle-left"></i>';
3
    $args['next_text'] = '<i class="fa fa-angle-right"></i>';
4
    return $args;
5
}
6
add_filter( 'woocommerce_pagination_args', 'mytheme_woo_pagination_args' );

Asenda Font Awesome'i klassid oma ikooniklasside või otse SVG-dega.

Müügimärgise tekst (Sale!) on lihtne üle kirjutada. See on kasulik teistes keeltes saitide puhul või lihtsalt hüüumärgi eemaldamiseks:

1
function mytheme_woo_sale_flash() {
2
    return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
3
}
4
add_filter( 'woocommerce_sale_flash', 'mytheme_woo_sale_flash' );

Teiste keelte puhul asenda 'Sale' oma tõlkega. Tõlge võetakse automaatselt kasutusele, kui sul on selle keele jaoks WooCommerce'i MO-failid olemas.

7. Dünaamiline ostukorv menüüs

See on ilmselt kõige nõutum element igas poe kujunduses: ostukorvi ikoon navigatsioonis koos jooksva kogusummaga. Teostus koosneb kolmest osast: elemendi lisamine menüüsse, ostukorvi HTML-i genereerimine ja AJAX-uuendus.

1
// Adding the link to the menu
2
function mytheme_add_menu_cart_item( $items, $args ) {
3
    if ( $args->theme_location === 'primary' ) {
4
        $css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
5
        if ( is_cart() ) {
6
            $css_class .= ' current-menu-item';
7
        }
8
        $items .= '<li class="' . esc_attr( $css_class ) . '">';
9
        $items .= mytheme_menu_cart_item();
10
        $items .= '</li>';
11
    }
12
    return $items;
13
}
14
add_filter( 'wp_nav_menu_items', 'mytheme_add_menu_cart_item', 10, 2 );
15
 
16
// Cart HTML
17
function mytheme_menu_cart_item() {
18
    $cart_count  = WC()->cart->cart_contents_count;
19
    $css_class   = 'wpex-menu-cart-total wpex-cart-total-' . intval( $cart_count );
20
    $url         = $cart_count ? WC()->cart->get_cart_url() : wc_get_page_permalink( 'shop' );
21
    $html        = WC()->cart->get_cart_total();
22
    $html        = str_replace( 'amount', '', $html );
23
 
24
    return '<a href="' . esc_url( $url ) . '" class="' . esc_attr( $css_class ) . '">'
25
           . '<span class="cart-icon"></span>'
26
           . wp_kses_post( $html )
27
           . '</a>';
28
}
29
 
30
// AJAX fragment update
31
function mytheme_menu_cart_link_fragments( $fragments ) {
32
    $fragments['.wpex-menu-cart-total'] = mytheme_menu_cart_item();
33
    return $fragments;
34
}
35
add_filter( 'add_to_cart_fragments', 'mytheme_menu_cart_link_fragments' );

Kriitiline punkt: **ära mähi neid funktsioone **is_admin() sisse. Ostukorvi AJAX-päringud tulevad läbi admin-ajax.php ja kui funktsioon pole administraatori kontekstis saadaval, siis hinna uuendamine menüüs lihtsalt ei tööta. Asenda theme_location oma menüü identifikaatoriga (näites primary).

8. Alternatiivne lähenemine: woocommerce.php mall

Eespool kirjeldatud konksud on kõige paindlikum ja uuenduskindlam meetod. Kuid kui sul on vaja kogu poe ja tootelehe ümbrist radikaalselt ümber teha, on olemas tee läbi eraldi malli.

Loo oma teema juurkausta woocommerce.php fail (koopia page.php-st) ja asenda peamine tsükkel woocommerce_content() väljakutsega:

1
<?php
2
get_header(); ?>
3
 
4
<div id="primary" class="content-area">
5
    <main id="main" class="site-main">
6
        <?php woocommerce_content(); ?>
7
    </main>
8
</div>
9
 
10
<?php get_footer();
11

See meetod on lihtsam, kuid sellel on oma hind: üks mall kõigi WooCommerce'i lehtede jaoks (pood, kategooriad ja toote detail). Peenhäälestus (erinevad ruudustikud, erinevad küljeribad eri lehtedel) muutub raskemaks. Vali see lähenemine ainult siis, kui sinu praegune teema tõesti ei sobi WooCommerce'iga märgendi tasandil ja sa oled valmis piirangutega leppima.

⁉️🤔 Korduma kippuvad küsimused

Kas WooCommerce'i vaikimisi stiilide eemaldamine on kohustuslik?

Ei ole kohustuslik. Turvalisem lähenemine on need alles jätta ja oma teemas suurema spetsiifilisusega selektorid üle kirjutada. See säilitab ühilduvuse laiendustega, mis tuginevad standardsetele WooCommerce'i klassidele. Täielik eemaldamine (__return_empty_array) on õigustatud ainult siis, kui ehitad poeteemat nullist ja tead kindlalt, et ükski kolmanda osapoole plugin ei lisa WooCommerce'i jaoks stiilitud elemente. Enamikul juhtudel piisab, kui keelata valikuliselt woocommerce-layout (protsendipõhine ruudustik läheb vastuollu tänapäevaste teemade flexbox'i ja grid'idega), jättes alles woocommerce-general ja woocommerce-smallscreen ning kirjutades need CSS-i kaskaadi kaudu hoolikalt üle. See annab puhta ruudustiku ilma ühilduvust kaotamata.

Miks ei tööta veergude arvu muutmine poes?

Sest ainult loop_shop_columns filtrist ei piisa. WooCommerce kasutab ruudustiku toimimiseks ümbrisel klasse .columns-N ja need lisatakse automaatselt ainult lühikoodidele ([products columns="4"]). Poe lehtedel ja arhiivides seda ümbrist ei ole, seega pead lisama klassi body elemendile body_class kaudu. Kaks filtrit 3. jaotisest lahendavad selle probleemi täielikult.

loop_shop_columns filter muudab PHP muutujat, mille WooCommerce mallile edastab, kuid CSS-ruudustik sõltub ümbrise klassist. Ilma columns-4 klassita body elemendil ei ole sinu ul.products li.product stiilidel konteksti selektorit ja need kas ei rakendu või tabavad kõiki tootenimekirju üle kogu saidi.

Kas ma pean pärast WooCommerce'i uuendust teema uuesti üles ehitama?

Kui kasutad konkse (kõik selle artikli näidiskoodid), siis ei pea. Konksud muutuvad äärmiselt harva. Kui kirjutad üle malle (faile kataloogist woocommerce/templates/), siis jah, pead pärast iga suuremat uuendust võrdlema oma koopiaid kehtivate versioonidega. Just seetõttu soovitab ametlik dokumentatsioon eelistatud kohandamismeetodina konkse.

Konksud on leping. WooCommerce garanteerib nende stabiilsuse versioonide vahel. Mallid on teostus, mis võib igal ajal muutuda: lisatakse uusi tegevusi, märgend muutub, klassid nimetatakse ümber. Viie aasta jooksul, mil need konksud on olemas olnud (loop_shop_columns ja woocommerce_output_related_products_args), ei ole nende signatuur kordagi muutunud, samas kui faili content-product.php on sama perioodi jooksul kümneid kordi uuendatud.

Kas ma saan kasutada is_admin(), et kaitsta ostukorvi funktsioone?

Ei, ja see on levinud lõks. WooCommerce'i AJAX-päringuid (lisa ostukorvi, uuenda kogust) töödeldakse läbi admin-ajax.php; selles kontekstis tagastab is_admin() väärtuse true. Kui mähid ostukorvi funktsioonid tingimusse if ( ! is_admin() ), lakkavad AJAX-i fragmendiuuendused (add_to_cart_fragments) töötamast ja ostukorvi ikoonil olev kogusumma ei muutu ilma lehe uuesti laadimiseta.

! is_admin() sisse mähkimist tuleks kasutada ainult asjade puhul, mis ei tohiks administraatoris töötada (esikülje HTML-väljund), kuid AJAX-i töötleja funktsioonid peavad alati saadaval olema. 7. jaotise koodi puhul ära üldse is_admin() kasuta. WooCommerce ise kutsub vajalikke tagasikutseid läbi oma AJAX-i töötleja ja see piirang lõhub loogika.

Kuidas lisada WooCommerce'i tuge plokiteemale (FSE)?

Plokiteemade puhul ei ole toe deklareerimine muutunud: sama add_theme_support('woocommerce'). Kuid konksude ja PHP-mallide ülekirjutamise asemel töötad saidiredaktoris: WooCommerce pakub plokke (Tooted, Tooteotsing, Ostukorv, Kassa), mille sisestad mallidesse Appearance → Editor kaudu. Peenhäälestus toimub theme.json ja CSS-muutujate abil.

Plokiteemad muudavad lähenemist põhimõtteliselt: sa ei kirjuta paigutuse jaoks PHP-konkse, vaid paned lehti visuaalselt kokku valmis WooCommerce'i plokkidest. Kuid alus (add_theme_support failis functions.php) jääb samaks. Peenhäälestuste jaoks, mida plokkidega teha ei saa (näiteks kohandatud tekst nupul „Lisa ostukorvi"), töötavad selle artikli vanad head filtrid ka FSE-teemades.

Milline strateegia oma projekti jaoks valida

Kui täiustad olemasolevat teemat, alusta 1. ja 2. sammust: deklareeri tugi ja seadista ruudustik. Enamikul juhtudel piisab sellest, et pood näeks korralik välja. Seejärel lisa ainult need parandused, mis lahendavad konkreetseid probleeme: katkine galerii, inetu lehitsemine, puuduv ostukorv menüüs.

Kui kirjutad teemat nullist müügiks või levitamiseks, läbi kogu nimekiri. Iga punkt lisab midagi, mida kasutajad ootavad poeteemalt „karbist välja võttes": kohandatav ruudustik, suum toodetel, reaalajas uuenev ostukorvi ikoon. Pane kood faili inc/woocommerce.php ja laadi see konstandi alusel. Nii töötab teema võrdselt hästi nii blogi kui ka poena.

Lähtepunkt on alati sama:

1
add_action( 'after_setup_theme', function() {
2
    add_theme_support( 'woocommerce' );
3
} );

Kaheksa rida. Kõik muu on detailid, mis eristavad „ühilduvat" teemat „spetsiaalselt ehitatud" teemast.