Hur man gör ett WordPress Theme WooCommerce Ready

Gör ditt WordPress-tema WooCommerce kompatibelt med teser användbara utdrag

Så du vill lägga till en butik till ditt tema – fantastiskt! WooCommerce är ett bra val. Tekniskt talat ALLT teman är “WooCommerce Compatible” eftersom det är ett plugin. I teorin ska varje plugin fungera med alla WordPress-teman (som är korrekt kodade).


Men som temautvecklare kanske du vill justera WooCommerce-utdata för att bättre passa ditt tema eller för att tillhandahålla alternativ till dina slutanvändare som inte är tillgängliga i WooCommerce-inställningarna (som att ändra antalet kolumner i butiken). Nedan hittar du några användbara utdrag som du kan använda för att ge “bättre” support för WooCommerce i ditt tema och / eller för att ändra saker för din specifika design.

Viktig: Många av utdragen nedan använder funktioner som är tillgängliga endast i WooCommerce. Så se till att dessa utdrag inte bara dumpas längst ner i filen features.php i ett tema skapat för distribution. Om du ska dela ditt tema med andra eller sälja måste du placera utdragen i sin egen fil som laddas bara när WooCommerce-plugin är aktivt.

Kontrollera om WooCommerce är aktiverat

I mina teman vill jag definiera en anpassad konstant som kan användas för att kontrollera om WooCommerce är aktiverat på det här sättet. Jag kan inkludera filer eller köra funktioner endast när WooCommerce är aktivt (se viktigt meddelande ovan om du inte har gjort det ännu).

// Lägg till en ny konstant som returnerar sant om WooCommerce är aktivt
definiera ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Kontrollera om WooCommerce är aktivt
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Göra någonting...
// Som att inkludera en ny fil med alla dina Woo-redigeringar.
}

Förklara WooCommerce Support

Detta är den första och viktigaste kodkoden som läggs till ditt tema som “aktiverar” WooCommerce-stöd och förhindrar varningar från plugin som säger slutanvändaren att temat inte är kompatibelt.

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

Ta bort WooCommerce CSS

Personligen åsidosätter jag snarare WooCommerce-stilar för att förhindra eventuella problem med tredjeparts WooCommerce-plugins. Men om du vill ta bort alla WooCommerce-stilar är det mycket enkelt.

Följande kodavsnitt är för att ta bort ALLA WooCommerce-stilar:

// Ta bort alla Woo-stilar
add_filter ('woocommerce_enqueue_style', '__return_empty_array');

Detta utdrag är ett exempel på att villkorligt ta bort specifika CSS-stilar:

funktion wpex_remove_woo_style ($ stilar) {
unset ($ stilar ['woocommerce-general']);
unset ($ stilar ['woocommerce-layout']);
unset ($ stilar ['woocommerce-smallscreen']);
returnera $ stilar;
}
add_filter ('woocommerce_enqueue_style', 'wpex_remove_woo_style');

Aktivera WooCommerce-produktgalleri, Zoom & Lightbox (v3.0 +)

I WooCommerce 3.0 introducerade de ett nytt produktgalleri, zoom och lightbox. Dessa måste alla vara aktiverade via “add_theme_support” om du vill använda dem i ditt tema.

add_theme_support ('wc-produkt-galleri-skjutreglaget');
add_theme_support ('wc-produkt-galleri-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Ta bort butikens titel

Många teman har redan funktioner för att visa arkivtitlar så den här koden tar bort den extra titeln från WooCommerce vilket är bättre än att dölja det via CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Ändra arkivetitel för butiken

Om ditt tema använder arkivet_title () eller get_archive_title () för att visa titeln för dina arkiv kan du enkelt finjustera det via ett filter för att ta namnet på din produktsida istället för butikens arkivtitel.

funktion wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ title = get_the_title ($ shop_id);
}
returnera $ titel;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Ändra antalet produkter som visas per sida i butiken

Används för att ändra hur många produkter som visas per sida i butiken och produktarkiv (kategorier och taggar).

// Ändra WooCommerce-inlägg per sida
funktion wpex_woo_posts_per_page ($ cols) {
retur 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Ändra antalet kolumner som visas i butiken per rad

Jag förstår inte varför WooCommerce fungerar på det här sättet, men du kan inte bara ändra filteret ‘loop_shop_columns’, du måste också lägga till de unika klasserna i body-taggen för att kolumnerna ska fungera. Medan Woo Shortcodes har en div-inslagning med rätt klasser som butiksidorna inte gör, är det därför vi behöver två funktioner.

// Ändra butikskolumner
funktion wpex_woo_shop_columns ($ kolumner) {
retur 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Lägg till korrekt karossklass för butikskolumner
funktion wpex_woo_shop_columns_body_class ($ klasser) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ klasser [] = 'kolumner-4';
}
returnera $ klasser;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Ändra pilarna Nästa och föregående sida

Det här utdraget låter dig finjustera pagineringspilarna i butiken så att de matchar dem i ditt tema.

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

Ändra OnSale Badge-texten

Speciellt användbart på webbplatser som använder ett annat språk eller för att ta bort utropstecken som jag inte är ett stort fan av.

funktion wpex_woo_sale_flash () {
lämna tillbaka ''. esc_html __ ('Sale', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Ändra miniatyrbilder för produktgalleri

Du kanske vill ändra antalet kolumner för miniatyrbilderna för en enda produktgalleri beroende på din layout och den här funktionen gör just det.

funktion wpex_woo_product_tumnails_columns () {
retur 4;
}
add_action ('woocommerce_product_Themesnails_columns', 'wpex_woo_product_hopsnails_columns');

Ändra antalet visade relaterade produkter

Används för att ändra antalet produkter som visas för relaterade produkter på den enda produktsidan.

// Ställ in relaterade produkter för att visa 4 produkter
funktion wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
returnera $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Ändra antalet kolumner per rad för relaterade & uppsäljande avsnitt på produkter

Precis som butiken om du vill ändra antalet kolumner för relaterade och uppsäljande produkter på enstaka produktsidor måste du filtrera kolumnerna och även ändra karaktärsklasserna i enlighet därmed.

// Filtrera upp-säljer kolumner
funktion wpex_woo_single_loops_columns ($ kolumner) {
retur 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrelaterade arg
funktion wpex_woo_related_columns ($ args) {
$ args ['kolumner'] = 4;
returnera $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrera kroppsklasser för att lägga till kolumnklass
funktion wpex_woo_single_loops_columns_body_class ($ klasser) {
if (is_singular ('produkt')) {
$ klasser [] = 'kolumner-4';
}
returnera $ klasser;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Lägg till en dynamisk vagnslänk & vagnskostnad till din meny

Det här fragmentet lägger till en WooCommerce-vagnspost till din meny som visar kostnaden för artiklarna i din vagn. Plus om din webbplats har Font-Awesome aktiverad kommer den att visa en liten shoppingvägsikon. Viktig: Dessa funktioner får inte lindas i en is_admin () villkorad eftersom de förlitar sig på AJAX för att uppdatera kostnaden. Du måste se till att funktionerna är tillgängliga när is_admin () returnerar sann och falsk.

// Lägg till vagnslänken till menyn
funktion wpex_add_menu_cart_item_to_menus ($ objekt, $ args) {

// Se till att du byter 'wpex_main' till din menyplats !!!!
if ($ args-> theme_location === 'wpex_main') {

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

if (is_cart ()) {
$ css_class. = 'aktuella menyobjekt';
}

$ artiklar. = '
  • '; $ objekt. = wpex_menu_cart_item (); $ artiklar. = '
  • '; } returnera $ artiklar; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funktion returnerar länken till huvudmenyn funktion 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 () -> kundvagn-> get_cart_url (); } annat { $ url = wc_get_page_permalink ('butik'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('belopp', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; returnera $ output; } // Uppdatera vagnslänk med AJAX funktion wpex_main_menu_cart_link_fragments ($ fragment) { $ fragment ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); returnera $ fragment; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Slutsats

    WooCommerce fungerar som standard med vilket tema som helst, men det är väldigt enkelt att lägga till lite extra stöd för plugin så att det bättre passar ditt tema. Jag skrev faktiskt det här inlägget medan jag kodade vårt New York WordPress Blog & Shop-tema, så de flesta av dessa tweaks ingår i vårt tema. Eller om du hellre kan köpa temat för att titta på hur allt gjordes (se filerna på wpex-new-york / inc / woocommerce) – det kan vara ett enklare sätt för dig att lära dig hur du lägger till korrekt anpassat stöd för WooCommerce-plugin genom att titta på ett redan kodat tema.

    Finns det andra utdrag som du tror hör till i den här listan eller skulle du vara till hjälp när du utvecklar nya WooCommerce-klara teman?

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