Bygger du ett eget tema och vill integrera en butik? Tekniskt sett fungerar WooCommerce med vilket tema som helst eftersom det bara är ett tillägg. Men "fungerar" betyder inte "ser rätt ut": produktrutnätet spricker, sidopaneler glider iväg och standardstilarna krockar med dina.

Problemet är djupare än några CSS-regler. Från och med WooCommerce 3.3 får ett tema utan deklarerat stöd förenklad rendering via shortcodes och en varning i adminpanelen. Du förlorar full kontroll över layouten.

Här nedan finns färdiga kodsnuttar som täcker allt från att deklarera stöd till en live-varukorg i menyn. Varje snutt har testats på den aktuella WooCommerce-versionen och är organiserad per avsnitt, från grundläggande till finjustering.

💡 Snabb översikt:

• Först måste temat uttryckligen deklarera WooCommerce-stöd; utan detta aktiveras inte mallöverskrivningar och vissa funktioner
• Placera koden i en separat fil (till exempel inc/woocommerce.php) som bara laddas när tillägget är aktivt
• Att ställa in butiksrutnätet kräver två filter: ett ändrar antalet kolumner, det andra lägger till en klass på body
• Produktgalleri, zoom, lightbox och reglage aktiveras genom separata add_theme_support-anrop
• Varukorgen i menyn måste uppdateras via AJAX; använd add_to_cart_fragments-filtret

1. Grunden: deklarera stöd och kontrollera om tillägget är aktivt

Först och främst måste temat uttryckligen tala om för WooCommerce: "Jag stöder dig." Utan detta aktiverar tillägget inte mallöverskrivningar och visar en varning i adminpanelen. Från och med WooCommerce 3.3 får ett tema utan deklarerat stöd förenklad rendering via shortcodes. Detta fungerar men begränsar din kontroll över layouten.

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

Det är viktigt att använda after_setup_theme-hooken snarare än init, som rekommenderas i WooCommerce-dokumentationen. Från version 3.3+ kan du skicka med rutnätsinställningar direkt:

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

Dessa parametrar sätter standardvärden för anpassaren (WooCommerce → Produktbilder / Produktkatalog) och besparar användarna från att konfigurera rutnätet manuellt.

Kontrollera om tillägget är aktivt

När du distribuerar ett tema kan du inte bara slänga in WooCommerce-snuttar i slutet av functions.php eftersom de orsakar ett fatalt fel om tillägget inte är aktivt. Koden bör bara laddas när WooCommerce körs:

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

Konstanten utvärderas en gång, och sedan kan du var som helst i ditt tema slå in anrop i if ( MYTHEME_WOOCOMMERCE_ACTIVE ). Detta är renare än att anropa class_exists eller is_plugin_active varje gång.

2. Hantera WooCommerce-stilar

WooCommerce levereras med tre CSS-filer: woocommerce-general, woocommerce-layout och woocommerce-smallscreen. Helst tar du inte bort dem utan överskriver dem i ditt tema. På så sätt går inte tredjepartstillägg för WooCommerce som förlitar sig på dessa klasser sönder. Men om du skriver allt från grunden och vill ha full kontroll, så här tar du bort dem.

Ta bort alla stilar på en gång:

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

Eller ta bort selektivt:

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

I praktiken är det andra alternativet vanligare: du tar bort woocommerce-layout (det procentbaserade rutnätet) men behåller woocommerce-general (knappar, notiser, formulär) och överskriver dem selektivt med din egen CSS med högre specificitet.

3. Konfigurera butikssidor

Hur många produkter som ska visas

Filtret loop_shop_per_page styr antalet produkter på butikssidan och i arkiv (kategorier, taggar):

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

Antal kolumner i rutnätet

Här behövs två filter. Att bara använda loop_shop_columns räcker inte: till skillnad från WooCommerce shortcodes (som har en wrapper med en columns-N-klass) har butikssidor inte denna klass. Så vi lägger till den på body:

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

Nu kan du i CSS skriva selektorer som .columns-4 ul.products li.product, och de kommer att gälla specifikt för butiksrutnätet.

Butikstitel

WooCommerce visar "Shop" som titel på butikssidan som standard. Om ditt tema redan hanterar arkivtitlar kommer denna dubblett i vägen:

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

Om du använder the_archive_title() kan du ersätta titeln med butikssidans namn (som ställs in i adminpanelen):

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. Produktgalleri: zoom, lightbox och slider

Från och med WooCommerce 3.0 introducerades ett nytt produktgalleri baserat på FlexSlider, PhotoSwipe och jQuery Zoom. I version 3.0-3.2 är det inaktiverat som standard och kräver explicit aktivering. Från och med 3.3 är galleriet aktiverat för teman som inte är WooCommerce-teman och inaktiverat för teman som deklarerar stöd; du aktiverar de komponenter du behöver själv:

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

Du kan aktivera bara vissa funktioner: till exempel slider och zoom, ja, men ersätt lightboxen med din egen Fancybox-lösning. Varje direktiv laddar sina egna skript, så aktivera inte det du inte behöver.

Antal kolumner för galleriets miniatyrbilder (under produktens huvudbild):

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

5. Relaterade produkter och korsförsäljning/merförsäljning

På produktsidan visar WooCommerce blocken "Relaterade produkter" och "Du kanske också gillar" (merförsäljning). Deras antal och rutnät konfigureras separat.

Hur många relaterade produkter som ska visas:

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

Kolumner för merförsäljning och relaterade block (samma historia som med butiksrutnätet): vi ändrar både kolumnerna och klassen på body:

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

Observera att woocommerce_output_related_products_args har två filter med olika prioritet: mytheme_woo_related_posts_per_page (standard 10) ändrar posts_per_page, och mytheme_woo_related_columns (prioritet 10) ändrar columns. De krockar inte eftersom de arbetar med olika nycklar i samma $args-array.

6. Paginering och rea-märke

Du kan ersätta pagineringspilarna med ditt temas ikoner:

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

Ersätt Font Awesome-klasserna med dina egna ikonklasser eller direkt med SVG:er.

Texten på rea-märket (Sale!) är enkel att skriva över. Det är användbart för sajter på andra språk eller helt enkelt för att ta bort utropstecknet:

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

För andra språk ersätter du 'Sale' med din översättning. Översättningen hämtas automatiskt om du har WooCommerce MO-filer för det språket.

7. Dynamisk varukorg i menyn

Det här är förmodligen det mest efterfrågade elementet i alla butiksteman: en varukorgsikon i navigeringen med aktuell totalsumma. Implementationen består av tre delar: att lägga till elementet i menyn, generera varukorgens HTML och AJAX-uppdatering.

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

Kritisk punkt: slå inte in dessa funktioner i is_admin(). Varukorgens AJAX-anrop kommer via admin-ajax.php, och om funktionen inte är tillgänglig i admin-kontexten kommer prisuppdateringen i menyn helt enkelt inte att fungera. Ersätt theme_location med din menyidentifierare (primary i exemplet).

8. Alternativ metod: mallen woocommerce.php

Hooks som beskrivs ovan är den mest flexibla och uppdateringssäkra metoden. Men om du behöver göra en radikal omarbetning av hela omslaget för butiks- och produktsidan finns det en väg via en separat mall.

Skapa en fil woocommerce.php i ditt temas rot (en kopia av page.php) och ersätt huvudloopen med ett anrop till woocommerce_content():

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

Den här metoden är enklare, men den har ett pris: en mall för alla WooCommerce-sidor (butiken, kategorier och produktdetaljer). Finjustering (olika grid, olika sidopaneler på olika sidor) blir svårare. Välj den här metoden bara om ditt nuvarande tema verkligen inte fungerar ihop med WooCommerce på märkningsnivå, och du är beredd att acceptera begränsningarna.

⁉️🤔 Vanliga frågor

Är det obligatoriskt att ta bort WooCommerces standardstilar?

Inte obligatoriskt. En säkrare metod är att behålla dem och överskugga selektorer i ditt tema med högre specificitet. Det bevarar kompatibiliteten med tillägg som förlitar sig på standardklasser från WooCommerce. Fullständig borttagning (__return_empty_array) är motiverat endast om du bygger ett butikstema från grunden och med säkerhet vet att inga tredjepartsplugins kommer att lägga till element som är stylade för WooCommerce. I de flesta fall räcker det att selektivt inaktivera woocommerce-layout (procentgriden krockar med flexbox och grid i moderna teman) medan du behåller woocommerce-general och woocommerce-smallscreen och försiktigt överskuggar dem via CSS-kaskaden. Det ger dig ett rent grid utan att förlora kompatibilitet.

Varför fungerar det inte att ändra kolumner i butiken?

Därför att loop_shop_columns-filtret ensamt inte räcker. WooCommerce använder .columns-N-klasser på omslaget för att få gridet att fungera, och de läggs automatiskt till endast på shortcodes ([products columns="4"]). På butikssidor och arkiv finns inte detta omslag, så du behöver lägga till klassen på body via body_class. De två filtren från avsnitt 3 löser detta problem fullständigt.

loop_shop_columns-filtret ändrar PHP-variabeln som WooCommerce skickar till mallen, men CSS-gridet beror på omslagsklassen. Utan klassen columns-4 på body har dina ul.products li.product-stilar ingen kontextselektor och antingen tillämpas de inte eller så träffar de alla produktlistor över hela webbplatsen.

Behöver jag bygga om temat efter en WooCommerce-uppdatering?

Om du använder hooks (alla kodsnuttar från denna artikel), nej. Hooks ändras extremt sällan. Om du överskuggar mallar (filer från woocommerce/templates/), ja, då behöver du jämföra dina kopior med de aktuella versionerna efter varje större uppdatering. Det är precis därför den officiella dokumentationen rekommenderar hooks som den föredragna anpassningsmetoden.

Hooks är ett kontrakt. WooCommerce garanterar deras stabilitet mellan versioner. Mallar är en implementation som kan ändras när som helst: nya actions läggs till, markup ändras, klasser byter namn. Under de fem år dessa hooks har funnits (loop_shop_columns och woocommerce_output_related_products_args) har deras signatur aldrig ändrats, medan filen content-product.php har uppdaterats dussintals gånger under samma period.

Kan jag använda is_admin() för att skydda varukorgsfunktioner?

Nej, och detta är en vanlig fälla. WooCommerces AJAX-anrop (lägg till i varukorg, uppdatera antal) bearbetas via admin-ajax.php; i denna kontext returnerar is_admin() true. Om du omsluter varukorgsfunktioner i if ( ! is_admin() ) kommer AJAX-fragmentuppdateringar (add_to_cart_fragments) att sluta fungera, och summan i varukorgsikonen ändras inte utan en sidomladdning.

Omslutning i ! is_admin() bör endast användas för saker som inte ska köras i admin (front-end HTML-utdata), men AJAX-hanterarfunktioner måste alltid vara tillgängliga. För koden i avsnitt 7, använd inte is_admin() alls. WooCommerce självt anropar de nödvändiga callbacks via sin AJAX-hanterare, och begränsningen kommer att bryta logiken.

Hur lägger jag till WooCommerce-stöd i ett blocktema (FSE)?

För blockteman har supportdeklarationen inte ändrats: samma add_theme_support('woocommerce'). Men istället för hooks och överskuggning av PHP-mallar arbetar du i webbplatsredigeraren: WooCommerce tillhandahåller block (Produkter, Produktsökning, Varukorg, Kassan) som du infogar i mallar via Appearance → Editor. Finjustering görs via theme.json och CSS-variabler.

Blockteman förändrar i grunden tillvägagångssättet: du skriver inte PHP-hooks för layout utan bygger visuellt ihop sidor av färdiga WooCommerce-block. Men grunden (add_theme_support i functions.php) förblir densamma. För finjusteringar som inte kan göras med block (till exempel anpassad text på "Lägg i varukorg"-knappen) fungerar de gamla goda filtren från denna artikel även i FSE-teman.

Vilken strategi du ska välja för ditt projekt

Om du förbättrar ett befintligt tema, börja med steg 1 och 2: deklarera stöd och konfigurera gridet. I de flesta fall räcker detta för att få butiken att se okej ut. Lägg sedan bara till de korrigeringar som löser specifika problem: ett trasigt galleri, ful paginering, saknad varukorg i menyn.

Om du skriver ett tema från grunden för försäljning eller distribution, gå igenom hela listan. Varje punkt lägger till något som användare förväntar sig av ett butikstema "out of the box": ett anpassningsbart grid, zoom på produkter, en live varukorgsikon. Lägg koden i inc/woocommerce.php och ladda den baserat på konstanten. På så sätt fungerar temat lika bra som både en blogg och en butik.

Startpunkten är alltid densamma:

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

Åtta rader. Allt annat är detaljer som skiljer ett "kompatibelt" tema från ett "specialbyggt".