Hvernig á að búa til WordPress þema WooCommerce tilbúið

Gerðu WordPress þema þitt WooCommerce samhæft við ritgerðir Gagnlegar útdrætti

Svo þú vilt bæta verslun við þemað þitt – æðislegt! WooCommerce er frábært val. Tæknilega séð ALLT þemu eru „WooCommerce Compatible“ vegna þess að það er viðbót. Fræðilega séð ætti öll viðbætur að vinna með hvaða WordPress þema sem er (sem er rétt kóðað).


Sem þemahönnuður, þó að þú gætir viljað fínpússa framleiðsluna af WooCommerce til að passa betur við þemað þitt eða til að bjóða endanlegum notendum möguleika sem ekki eru tiltækir í WooCommerce stillingunum (svo sem að breyta fjölda dálka í búðinni). Hér að neðan munt þú finna nokkur gagnleg smáútgáfur sem þú getur notað til að veita „betri“ stuðning fyrir WooCommerce í þema þínu og / eða til að breyta hlutum fyrir sérstaka hönnun þína.

Mikilvægt: Mörg sýnishorn hér að neðan nota eingöngu aðgerðir í WooCommerce. Gakktu svo úr skugga um að þessum búningum sé ekki bara varpað neðst í function.php skránni þema sem er búið til til dreifingar. Ef þú ætlar að deila þema þínu með öðrum eða selja, vertu viss um að setja bútana í eigin skjal sem aðeins er hlaðinn þegar WooCommerce viðbótin er virk.

Athugaðu hvort WooCommerce er virkt

Í þemunum mínum vil ég skilgreina sérsniðna stöðugleika sem hægt er að nota til að athuga hvort WooCommerce sé virkt á þennan hátt. Ég get aðeins innihaldið skrár eða keyrt aðgerðir þegar WooCommerce er virkt (sjá mikilvæg skilaboð hér að ofan ef þú ert ekki ennþá).

// Bætið við nýjum stöðugleika sem skilar sér í lagi ef WooCommerce er virkur
skilgreina ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Athugaðu hvort WooCommerce er virkt
ef (WPEX_WOOCOMMERCE_ACTIVE) {
// Gera eitthvað...
// Svo sem að taka með nýja skrá með öllum Woo breytingum þínum.
}

Lýstu stuðningi við WooCommerce

Þetta er fyrsti og mikilvægasti kóðinn til að bæta við þemað þitt sem gerir „WooCommerce stuðning kleift“ og kemur í veg fyrir að viðvaranir frá viðbótinni segi endanotandanum að þemað sé ekki samhæft.

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

Fjarlægðu WooCommerce CSS

Persónulega hnekki ég frekar WooCommerce stíl til að koma í veg fyrir möguleg vandamál með WooCommerce viðbætur frá þriðja aðila. Hins vegar, ef þú vilt fjarlægja alla WooCommerce stíl, þá er það mjög auðvelt.

Eftirfarandi snið er til að fjarlægja ALLA WooCommerce stíl:

// Fjarlægðu alla Woo stíl
add_filter ('woocommerce_enqueue_style', '__return_empty_array');

Þetta snið er dæmi um að fjarlægja tiltekna CSS stíl með skilyrðum:

fall wpex_remove_woo_style ($ stíll) {
unset ($ stíll ['woocommerce-general']);
óstillt ($ stíll ['woocommerce-layout']);
óstillt ($ stíll ['woocommerce-smallscreen']);
skila $ stílum;
}
add_filter ('woocommerce_enqueue_style', 'wpex_remove_woo_style');

Virkja WooCommerce vörugallerí, aðdrátt og ljósbox (v3.0 +)

Í WooCommerce 3.0 kynntu þeir nýtt vörugallerí, aðdrátt og ljósakassa. Þetta verður allt að vera virkjað með „add_theme_support“ ef þú vilt nota þau í þemað þitt.

add_theme_support ('wc-product-gallery-renna');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Fjarlægðu titil búðarinnar

A einhver fjöldi af þemum hafa nú þegar aðgerðir til að birta skjalasöfn titla svo þessi kóði fjarlægir aukatitilinn frá WooCommerce sem er betra en að fela hann með CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Breyttu skjalasafni fyrir verslunina

Ef þemað er að nota archive_title () eða get_archive_title () aðgerðirnar til að sýna titilinn fyrir skjalasöfnin þín geturðu auðveldlega klippt það í gegnum síu til að grípa nafn vörusíðunnar í staðinn fyrir titil verslunargeymslu.

fall wpex_woo_archive_title ($ title) {
ef (is_shop () && $ shop_id = wc_get_page_id ('búð')) {
$ title = get_the_title ($ shop_id);
}
skila $ titli;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Breyttu fjölda vara sem birtist á hverri síðu í búðinni

Notað til að breyta því hversu margar vörur birtast á hverri síðu í búðinni og vöru skjalasafni (flokkar og merki).

// Breyta WooCommerce búðarpósti á hverja síðu
fall wpex_woo_posts_per_page ($ cols) {
skila 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Breyta fjölda dálka sem birtast í búðinni í hverri röð

Ég skil ekki af hverju WooCommerce virkar á þennan hátt en þú getur ekki bara breytt ‘loop_shop_column’ síunni, þú verður líka að bæta einstökum flokkum við meginmerkið til að dálkarnir virki. Þó að Woo Shortcodes séu með div umbúðir með réttum flokkum sem verslunarsíðurnar gera ekki, þess vegna þurfum við tvær aðgerðir.

// Breyta búðardálkum
fall wpex_woo_shop_column ($ dálkar) {
skila 4;
}
add_filter ('loop_shop_column', 'wpex_woo_shop_column');

// Bættu við réttum líkamsflokki fyrir búðarsúlur
fall wpex_woo_shop_columns_body_class ($ flokkar) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ flokkar [] = 'dálkar-4';
}
skila $ flokkum;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Breyttu næstu og fyrri pagination örvum

Þetta bút gerir þér kleift að fínstilla pagination örvarnar í búðinni til að passa við þær sem eru í þema þínu.

fall wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
skila $ argum;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Breyta OnSale skjöldu textanum

Sérstaklega gagnlegt á síðum sem nota annað tungumál eða til að fjarlægja upphrópunarmerkið sem ég er ekki mikill aðdáandi af.

fall wpex_woo_sale_flash () {
snúa aftur ''. esc_html __ ('Sala', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Breyta dálkum fyrir smámyndavöru

Þú gætir viljað breyta fjölda dálka fyrir smámyndir smámyndasafnsins eftir skipulagi þínu og þessi aðgerð gerir það bara.

fall wpex_woo_product_roomsnails_column () {
skila 4;
}
add_action ('woocommerce_product_roomsnails_column', 'wpex_woo_product_roomsnails_column');

Breyttu fjölda sýndra tengdra vara

Notað til að breyta fjölda vara sem sýndar eru fyrir tengdar vörur á einni vörusíðunni.

// Stilltu tengdar vörur til að birta 4 vörur
fall wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
skila $ argum;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Breyttu fjölda dálka í hverri röð fyrir tengda & uppselda hluta á vörum

Rétt eins og í búðinni ef þú vilt breyta fjölda dálka fyrir tengdar og uppseldar vörur á einni vörusíðunni verður þú að sía súlurnar og breyta einnig líkamsflokkunum í samræmi við það.

// Sía dálka upp-selur
fall wpex_woo_single_loops_column ($ dálkar) {
skila 4;
}
add_filter ('woocommerce_up_sells_column', 'wpex_woo_single_loops_column');

// Sía tengd argum
fall wpex_woo_related_column ($ args) {
$ args ['dálkar'] = 4;
skila $ argum;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_column', 10);

// Sía líkamsflokka til að bæta við dálkaflokki
fall wpex_woo_single_loops_column_body_class ($ flokkar) {
if (is_singular ('vara')) {
$ flokkar [] = 'dálkar-4';
}
skila $ flokkum;
}
add_filter ('body_class', 'wpex_woo_single_loops_column_body_class');

Bættu við kvikan tengil hlekk og kostnað við körfu í matseðilinn

Þessi búningur bætir WooCommerce körfu hlut við valmyndina þína sem sýnir kostnað við hlutina í körfunni þinni. Auk þess ef síða er gerð með Font-Awesome virkt mun hún sýna smá tákn um innkaupapoka. Mikilvægt: Þessar aðgerðir mega ekki vera settar inn í is_admin () skilyrt vegna þess að þær treysta á AJAX til að uppfæra kostnaðinn sem þú verður að ganga úr skugga um að aðgerðirnar séu tiltækar þegar is_admin () skilar sönn og ósönn.

// Bættu krækjutengilinn við valmyndina
fall wpex_add_menu_cart_item_to_menus ($ hlutir, $ args) {

// Gakktu úr skugga um að breyta 'wpex_main' í valmyndarstað !!!!
ef ($ args-> þema_staðsetning === 'wpex_main') {

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

ef (is_cart ()) {
$ css_class. = 'núverandi valmyndaratriði';
}

$ hlutir. = '
  • '; $ hlutir. = wpex_menu_cart_item (); $ hlutir. = '
  • '; } skila $ hlutum; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Aðgerð skilar tengil á aðalvalmyndarkörfu fall wpex_menu_cart_item () { $ framleiðsla = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. bil ($ cart_count); ef ($ körfu_fjöldi) { $ url = WC () -> körfu-> get_cart_url (); } Annar { $ url = wc_get_page_permalink ('búð'); } $ html = $ cart_extra = WC () -> körfu-> get_cart_total (); $ html = str_replace ('upphæð', '', $ html); $ framleiðsla. = ''; $ framleiðsla. = ''; $ framleiðsla. = wp_kses_post ($ html); $ framleiðsla. = ''; skila $ framleiðsla; } // Uppfæra tengil á körfu með AJAX fall wpex_main_menu_cart_link_fragments ($ brot) { $ brot ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); skila $ brotum; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Niðurstaða

    WooCommerce vinnur sjálfgefið með hvaða þema sem er en það er mjög auðvelt að bæta við smá auka stuðningi við viðbótina svo það passi betur við þemað þitt. Ég skrifaði þessa færslu reyndar á meðan ég kóðaði WordPress Blog & Shop þemað í New York þannig að flestir þessara klipa eru með í þemu okkar. Eða ef þú vilt frekar að þú getir keypt þemað til að skoða hvernig allt var gert (sjá skrárnar á wpex-new-york / inc / woocommerce) – það getur verið auðveldari leið fyrir þig að læra að bæta rétt við sérsniðinn stuðning fyrir WooCommerce viðbætið með því að skoða þegar dulritað þema.

    Eru einhver önnur bút sem þú telur að séu á þessum lista eða þér þætti gagnlegt þegar þú þróar ný WooCommerce-tilbúin þemu?

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