Rakennatko omaa teemaa ja haluat integroida siihen verkkokaupan? Teknisesti WooCommerce toimii minkä tahansa teeman kanssa, koska se on vain lisäosa. Mutta "toimii" ei tarkoita "näyttää oikealta": tuoteruudukko hajoaa, sivupalkit valuvat väärään paikkaan ja oletustyylit törmäävät omiesi kanssa.

Ongelma on syvemmällä kuin muutamassa CSS-säännössä. WooCommerce 3.3:sta alkaen teema, joka ei ole ilmoittanut tukea, saa yksinkertaistetun renderöinnin shortcodejen kautta ja varoituksen hallintapaneeliin. Menetät täyden hallinnan ulkoasusta.

Alla on valmiita koodinpätkiä, jotka kattavat kaiken tuen ilmoittamisesta live-ostoskoriin valikossa. Jokainen on testattu nykyisellä WooCommerce-versiolla ja järjestetty osioittain perustuksista hienosäätöön.

💡 Pikakatsaus:

• Teeman on ensin nimenomaisesti ilmoitettava WooCommerce-tuki; ilman tätä mallipohjien ohitukset ja jotkin ominaisuudet eivät aktivoidu
• Sijoita koodi erilliseen tiedostoon (esimerkiksi inc/woocommerce.php), joka latautuu vain, kun lisäosa on aktiivinen
• Kaupan ruudukon asettaminen vaatii kaksi suodatinta: toinen muuttaa sarakkeiden määrää, toinen lisää luokan body-elementtiin
• Tuotegalleria, zoomaus, lightbox ja liukusäädin otetaan käyttöön erillisillä add_theme_support-kutsuilla
• Ostoskorin valikossa on päivityttävä AJAXilla; käytä add_to_cart_fragments-suodatinta

1. Perusta: tuen ilmoittaminen ja lisäosan aktiivisuuden tarkistaminen

Ensimmäiseksi teeman on kerrottava WooCommercelle selvästi: "Tuen sinua." Ilman tätä lisäosa ei aktivoi mallipohjien ohituksia ja näyttää varoituksen hallintapaneelissa. WooCommerce 3.3:sta alkaen teema, joka ei ole ilmoittanut tukea, saa yksinkertaistetun renderöinnin shortcodejen kautta. Tämä toimii, mutta rajoittaa ulkoasun hallintaasi.

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

On tärkeää käyttää after_setup_theme-koukkua init-koukun sijaan, kuten WooCommercen dokumentaatio suosittelee. Versiosta 3.3+ alkaen voit välittää ruudukkoasetukset suoraan:

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
} );

Nämä parametrit asettavat oletusarvot muokkausnäkymälle (WooCommerce → Tuotekuvat / Tuoteluettelo) ja säästävät käyttäjät ruudukon manuaaliselta määrittämiseltä.

Lisäosan aktiivisuuden tarkistaminen

Kun jaat teemaa, et voi vain heittää WooCommerce-koodinpätkiä functions.php-tiedoston loppuun, koska ne aiheuttavat vakavan virheen, jos lisäosa ei ole aktiivinen. Koodin tulisi latautua vain, kun WooCommerce on käynnissä:

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

Vakio evaluoidaan kerran, ja sen jälkeen missä tahansa teemassasi voit kääriä kutsut ehtoon if ( MYTHEME_WOOCOMMERCE_ACTIVE ). Tämä on siistimpää kuin class_exists- tai is_plugin_active-funktion kutsuminen joka kerta.

2. WooCommercen tyylien hallinta

WooCommerce sisältää kolme CSS-tiedostoa: woocommerce-general, woocommerce-layout ja woocommerce-smallscreen. Ihannetapauksessa et poista niitä, vaan ohitat ne teemassasi. Näin kolmannen osapuolen WooCommerce-laajennukset, jotka luottavat näihin luokkiin, eivät hajoa. Mutta jos kirjoitat kaiken alusta ja haluat täyden hallinnan, tässä on ohje niiden poistamiseen.

Poista kaikki tyylit kerralla:

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

Tai poista valikoiden:

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' );

Käytännössä toinen vaihtoehto on yleisempi: poistat woocommerce-layout-tyylin (prosenttipohjainen ruudukko), mutta pidät woocommerce-general-tyylin (painikkeet, ilmoitukset, lomakkeet) ja ohitat ne valikoiden omalla CSS:lläsi käyttäen korkeampaa spesifisyyttä.

3. Kauppasivujen määrittäminen

Kuinka monta tuotetta näytetään

loop_shop_per_page-suodatin ohjaa tuotteiden määrää kauppasivulla ja arkistoissa (kategoriat, tagit):

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

Sarakkeiden määrä ruudukossa

Tässä tarvitaan kaksi filtteriä. Pelkkä loop_shop_columns ei riitä: toisin kuin WooCommerce-lyhytkoodeissa (joissa on columns-N-luokalla varustettu wrapperi), kauppasivuilla ei ole tätä luokkaa. Siksi lisäämme sen body-elementtiin:

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' );

Nyt CSS:ssä voit kirjoittaa valitsimia kuten .columns-4 ul.products li.product, ja ne kohdistuvat nimenomaan kaupan ruudukkoon.

Kaupan otsikko

WooCommerce näyttää oletuksena kauppasivun otsikkona "Shop". Jos teemasi käsittelee jo arkisto-otsikot, tämä tupla on tiellä:

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

Jos käytät the_archive_title()-funktiota, voit korvata otsikon kauppasivun nimellä (joka asetetaan hallintapaneelissa):

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. Tuotegalleria: zoom, lightbox ja liukusäädin

WooCommerce 3.0:sta alkaen esiteltiin uusi tuotegalleria, joka perustuu FlexSlideriin, PhotoSwipeen ja jQuery Zoomiin. Versioissa 3.0-3.2 se on oletuksena pois käytöstä ja vaatii erillisen käyttöönoton. Versiosta 3.3 alkaen galleria on käytössä teemoille, jotka eivät ole WooCommerce-teemoja, ja pois käytöstä teemoille, jotka ilmoittavat tukevansa sitä; otat tarvitsemasi komponentit käyttöön itse:

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

Voit ottaa käyttöön vain osan ominaisuuksista: esimerkiksi liukusäätimen ja zoomin, kyllä, mutta korvata lightboxin omalla Fancybox-ratkaisullasi. Jokainen direktiivi lataa omat skriptinsä, joten älä ota käyttöön mitä et tarvitse.

Gallerian pikkukuvien sarakemäärä (päätuotekuvan alla):

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

5. Samankaltaiset tuotteet ja ristiinmyynti/lisämyynti

Tuotesivulla WooCommerce näyttää "Samankaltaiset tuotteet" ja "Saatat pitää myös" (lisämyynti) -lohkot. Niiden määrä ja ruudukko määritellään erikseen.

Kuinka monta samankaltaista tuotetta näytetään:

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' );

Sarakkeet lisämyynti- ja samankaltaiset-lohkoille (sama juttu kuin kaupan ruudukossa): muutamme sekä sarakkeita että luokkaa body-elementissä:

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' );

Huomaa, että woocommerce_output_related_products_args-filtterissä on kaksi filtteriä eri prioriteeteilla: mytheme_woo_related_posts_per_page (oletus 10) muuttaa posts_per_page-arvoa ja mytheme_woo_related_columns (prioriteetti 10) muuttaa columns-arvoa. Ne eivät ole ristiriidassa, koska ne käsittelevät eri avaimia samassa $args-taulukossa.

6. Sivutus ja ale-merkki

Voit korvata sivutuksen nuolet teemasi ikoneilla:

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' );

Korvaa Font Awesome -luokat omilla kuvakeluokillasi tai suorilla SVG:illä.

Alennusmerkinnän teksti (Sale!) on helppo korvata. Tämä on hyödyllistä muunkielisillä sivustoilla tai jos haluat vain poistaa huutomerkin:

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' );

Muita kieliä varten korvaa 'Sale' omalla käännökselläsi. Käännös poimitaan automaattisesti, jos sinulla on WooCommercen MO-tiedostot kyseiselle kielelle.

7. Dynaaminen ostoskori valikossa

Tämä on luultavasti toivotuin elementti missä tahansa verkkokauppateemassa: ostoskorikuvake navigaatiossa, jossa näkyy tämänhetkinen summa. Toteutus koostuu kolmesta osasta: elementin lisäämisestä valikkoon, ostoskorin HTML:n tuottamisesta ja AJAX-päivityksestä.

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' );

Kriittinen huomio: älä kääri näitä funktioita is_admin()-tarkistuksen sisään. Ostoskorin AJAX-pyynnöt tulevat admin-ajax.php:n kautta, ja jos funktio ei ole käytettävissä admin-kontekstissa, hinnan päivitys valikossa ei yksinkertaisesti toimi. Korvaa theme_location oman valikkosi tunnisteella (esimerkissä primary).

8. Vaihtoehtoinen lähestymistapa: woocommerce.php-pohja

Yllä kuvatut koukut ovat joustavin ja päivitysturvallisin menetelmä. Mutta jos sinun täytyy uudistaa koko kaupan ja tuotesivun rakenne perusteellisesti, on olemassa reitti erillisen pohjan kautta.

Luo woocommerce.php-tiedosto teemasi juureen (kopio page.php-tiedostosta) ja korvaa pääsilmukka woocommerce_content()-kutsulla:

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

Tämä menetelmä on yksinkertaisempi, mutta siitä on hintansa: yksi pohja kaikille WooCommerce-sivuille (kauppa, kategoriat ja tuotetiedot). Hienosäätö (eri ruudukot, eri sivupalkit eri sivuilla) vaikeutuu. Valitse tämä lähestymistapa vain, jos nykyinen teemasi ei todellakaan tule toimeen WooCommercen kanssa merkkaustasolla ja olet valmis hyväksymään rajoitukset.

⁉️🤔 Usein kysytyt kysymykset

Onko WooCommercen oletustyylien poistaminen pakollista?

Ei ole pakollista. Turvallisempi tapa on pitää ne ja ohittaa valitsimet teemassasi korkeammalla spesifisyydellä. Tämä säilyttää yhteensopivuuden lisäosien kanssa, jotka luottavat WooCommercen vakioluokkiin. Täydellinen poistaminen (__return_empty_array) on perusteltua vain, jos rakennat verkkokauppateemaa tyhjästä ja tiedät varmasti, etteivät kolmannen osapuolen lisäosat lisää WooCommercelle tyyliteltyjä elementtejä. Useimmissa tapauksissa riittää, että poistat valikoivasti woocommerce-layout-tyylit (prosenttipohjainen ruudukko on ristiriidassa modernien teemojen flexbox- ja grid-asettelujen kanssa) ja pidät woocommerce-general- ja woocommerce-smallscreen-tyylit ja ohitat ne huolellisesti CSS-kaskadin kautta. Tämä antaa sinulle puhtaan ruudukon yhteensopivuutta menettämättä.

Miksi sarakkeiden määrän muuttaminen kaupassa ei toimi?

Koska pelkkä loop_shop_columns-suodatin ei riitä. WooCommerce käyttää .columns-N-luokkia kääreessä saadakseen ruudukon toimimaan, ja ne lisätään automaattisesti vain shortcodeihin ([products columns="4"]). Kauppasivuilla ja arkistoissa tätä käärettä ei ole, joten sinun on lisättävä luokka body-elementtiin body_class-funktion kautta. Osion 3 kaksi suodatinta ratkaisevat tämän ongelman kokonaan.

loop_shop_columns-suodatin muuttaa PHP-muuttujaa, jonka WooCommerce välittää mallipohjalle, mutta CSS-ruudukko riippuu kääreen luokasta. Ilman columns-4-luokkaa body-elementissä ul.products li.product -tyyleilläsi ei ole kontekstivalitsinta, eivätkä ne joko toimi tai osuvat kaikkiin tuotelistauksiin koko sivustolla.

Täytyykö teema rakentaa uudelleen WooCommerce-päivityksen jälkeen?

Jos käytät koukkuja (kaikki tämän artikkelin koodinpätkät), ei tarvitse. Koukut muuttuvat erittäin harvoin. Jos ohitat mallipohjia (tiedostoja hakemistosta woocommerce/templates/), kyllä, sinun on verrattava kopioitasi nykyisiin versioihin jokaisen suuren päivityksen jälkeen. Juuri tästä syystä virallinen dokumentaatio suosittelee koukkuja ensisijaisena kustomointimenetelmänä.

Koukut ovat sopimus. WooCommerce takaa niiden vakauden versioiden välillä. Mallipohjat ovat toteutus, joka voi muuttua milloin tahansa: uusia toimintoja lisätään, merkintä muuttuu, luokkia nimetään uudelleen. Niiden viiden vuoden aikana, jotka nämä koukut (loop_shop_columns ja woocommerce_output_related_products_args) ovat olleet olemassa, niiden allekirjoitus ei ole koskaan muuttunut, kun taas content-product.php-tiedostoa on päivitetty kymmeniä kertoja samana ajanjaksona.

Voinko käyttää is_admin()-funktiota ostoskoritoimintojen suojaamiseen?

Ei, ja tämä on yleinen ansa. WooCommercen AJAX-pyynnöt (lisää ostoskoriin, päivitä määrä) käsitellään admin-ajax.php-tiedoston kautta; tässä kontekstissa is_admin() palauttaa arvon true. Jos käärit ostoskoritoiminnot ehtoon if ( ! is_admin() ), AJAX-fragmenttien päivitykset (add_to_cart_fragments) lakkaavat toimimasta, eikä ostoskorikuvakkeen summa muutu ilman sivun uudelleenlatausta.

! is_admin() -ehdon sisään käärimistä tulisi käyttää vain asioille, joiden ei kuulu suorittaa hallintapuolella (front-endin HTML-tuloste), mutta AJAX-käsittelijäfunktioiden on aina oltava saatavilla. Osion 7 koodille älä käytä is_admin()-funktiota lainkaan. WooCommerce itse kutsuu tarvittavia takaisinkutsuja AJAX-käsittelijänsä kautta, ja rajoitus rikkoo logiikan.

Kuinka lisään WooCommerce-tuen lohkoteemaan (FSE)?

Lohkoteemoille tuen ilmoittaminen ei ole muuttunut: sama add_theme_support('woocommerce'). Mutta koukkujen ja PHP-mallipohjien ohittamisen sijaan työskentelet Sivustoeditorissa: WooCommerce tarjoaa lohkoja (Tuotteet, Tuotehaku, Ostoskori, Kassa), jotka lisäät mallipohjiin Appearance → Editor-toiminnolla. Hienosäätö tehdään theme.json-tiedoston ja CSS-muuttujien kautta.

Lohkoteemat muuttavat lähestymistavan perusteellisesti: et kirjoita PHP-koukkuja asettelua varten, vaan kokoat sivut visuaalisesti valmiista WooCommerce-lohkoista. Mutta perusta (add_theme_support tiedostossa functions.php) pysyy samana. Hienosäätöihin, joita ei voi tehdä lohkoilla (esimerkiksi mukautettu teksti "Lisää ostoskoriin" -painikkeessa), tämän artikkelin vanhat kunnon suodattimet toimivat myös FSE-teemoissa.

Mikä strategia valita projektiisi

Jos parannat olemassa olevaa teemaa, aloita vaiheista 1 ja 2: ilmoita tuki ja määritä ruudukko. Useimmissa tapauksissa tämä riittää tekemään kaupasta kelvollisen näköisen. Lisää sitten vain ne korjaukset, jotka ratkaisevat tiettyjä ongelmia: rikkinäinen galleria, ruma sivutus, puuttuva ostoskori valikosta.

Jos kirjoitat teemaa tyhjästä myyntiä tai jakelua varten, käy läpi koko lista. Jokainen kohta lisää jotain, mitä käyttäjät odottavat kauppateemalta "suoraan laatikosta": muokattavan ruudukon, zoomin tuotteisiin, live-ostoskorikuvakkeen. Laita koodi tiedostoon inc/woocommerce.php ja lataa se vakion perusteella. Näin teema toimii yhtä hyvin sekä blogina että verkkokauppana.

Lähtökohta on aina sama:

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

Kahdeksan riviä. Kaikki muu on yksityiskohtia, jotka erottavat "yhteensopivan" teeman "varta vasten rakennetusta".