Faceți-vă Tema WordPress WooCommerce compatibilă cu aceste teze utile

Deci, vrei să adaugi un magazin la tema ta – minunat! WooCommerce este o alegere excelentă. Tehnic vorbind TOATE temele sunt „WooCommerce Compatible”, deoarece este un plugin. Teoretic, orice plugin ar trebui să funcționeze cu orice temă WordPress (care este codată corect).


În calitate de dezvoltator de teme, deși este posibil să doriți să modificați rezultatele WooCommerce pentru a vă potrivi mai bine temei sau pentru a oferi opțiuni utilizatorilor finali care nu sunt ușor disponibili în setările WooCommerce (cum ar fi modificarea numărului de coloane din magazin). Mai jos veți găsi câteva fragmente utile pe care le puteți utiliza pentru a oferi asistență „mai bună” pentru WooCommerce în tema dvs. și / sau pentru a modifica lucrurile pentru designul dvs. specific.

Important: Multe dintre fragmentele de mai jos utilizează funcții disponibile doar în WooCommerce. Așadar, asigurați-vă că aceste fragmente nu sunt doar aruncate în partea de jos a fișierului funcții.php într-o temă creată pentru distribuție. Dacă aveți de gând să împărtășiți tema cu alte persoane sau să o vindeți, asigurați-vă că așezați fragmentele în propriul fișier încărcat doar atunci când pluginul WooCommerce este activ.

Verificați dacă WooCommerce este activat

În temele mele, îmi place să definesc o constantă personalizată care poate fi folosită pentru a verifica dacă WooCommerce este activat în acest fel. Pot include fișiere sau executa funcții doar atunci când WooCommerce este activ (vezi mesajul important mai sus, dacă nu ai fost încă).

// Adăugați o constantă nouă care se întoarce dacă WooCommerce este activ
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Verificarea dacă WooCommerce este activ
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Fă ceva...
// Cum ar fi includerea unui nou fișier cu toate modificările Woo.
}

Declarați asistența WooCommerce

Aceasta este prima și cea mai importantă bucată de cod pe care să o adăugați la tema dvs., care „activează” suportul WooCommerce și previne avertizările de la plugin care să spună utilizatorului final că tema nu este compatibilă.

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

Eliminați WooCommerce CSS

Personal, mai degrabă am înlocuit stilurile WooCommerce pentru a preveni eventualele probleme cu pluginurile WooCommerce de la terți. Cu toate acestea, dacă doriți să eliminați toate stilurile WooCommerce, este foarte ușor.

Următorul fragment este pentru a elimina TOATE stilurile WooCommerce:

// Eliminați toate stilurile Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Acest fragment este un exemplu de eliminare condiționată a stilurilor CSS specifice:

function wpex_remove_woo_styles ($ stiluri) {
unset ($ stiluri ['woocommerce-general']);
unset ($ stiluri ['woocommerce-layout']);
unset ($ stiluri ['woocommerce-smallscreen']);
retur $ stiluri;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Activați galeria de produse WooCommerce, Zoom și Lightbox (v3.0 +)

În WooCommerce 3.0 au introdus o nouă galerie de produse, zoom și lightbox. Toate acestea trebuie să fie activate prin „add_theme_support” dacă doriți să le folosiți în tema dvs..

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

Eliminați titlul magazinului

O mulțime de teme au deja funcții de afișare a titlurilor arhivei, astfel încât acest cod elimină titlul suplimentar din WooCommerce, care este mai bine să îl ascunzi prin CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Modificați titlul arhivei pentru magazin

Dacă tema dvs. folosește funcțiile archive_title () sau get_archive_title () pentru a afișa titlul pentru arhivele dvs., îl puteți regla cu ușurință printr-un filtru pentru a apuca numele paginii de produs în locul titlului arhivei magazinului..

function wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ("magazin")) {
$ title = get_the_title ($ shop_id);
}
returnare titlu $;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Modificați numărul de produse afișate pe pagină în magazin

Folosit pentru a modifica câte produse sunt afișate pe pagină în magazinul și arhivele de produse (categorii și etichete).

// Modificați postările magazinului WooCommerce pe pagină
function wpex_woo_posts_per_page ($ cols) {
retur 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Modificați numărul de coloane afișate pe magazin pe rând

Nu înțeleg de ce funcționează WooCommerce în acest mod, dar nu puteți modifica doar filtrul „loop_shop_columns”, trebuie să adăugați și clase unice la eticheta corpului pentru ca coloanele să funcționeze. Cu toate că codurile scurte Woo au un pachet div cu clasele corecte pe care paginile magazinului nu le au, de aceea avem nevoie de două funcții.

// Modificați coloanele magazinului
function wpex_woo_shop_columns ($ column) {
retur 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Adăugați clasa de corp corectă pentru coloanele magazinului
function wpex_woo_shop_columns_body_class ($ clase) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ classes [] = 'coloane-4';
}
returnare clase $;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Modificați săgețile de paginare următoare și anterioare

Acest fragment vă va permite să reglați săgețile de paginare din magazin pentru a se potrivi cu cele din tema dvs..

function wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '„;
$ args ['next_text'] = '„;
returneaza $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Modificați textul pentru ecusonul OnSale

Este deosebit de util pe site-urile care folosesc un alt limbaj sau pentru a înlătura semnul exclamării de care nu sunt un fan mare.

function wpex_woo_sale_flash () {
întoarcere ''. esc_html __ („Vânzare”, „woocommerce”). '„;
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Modificați coloanele cu miniaturile din Galeria de produse

Poate doriți să modificați numărul de coloane pentru miniaturile galeriei de produs în funcție de aspectul dvs. și această funcție va face exact asta.

function wpex_woo_product_thumbnails_columns () {
retur 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Modificați numărul de produse aferente afișate

Folosit pentru a modifica numărul de produse afișate pentru produsele aferente pe pagina unui singur produs.

// Setați produsele aferente pentru a afișa 4 produse
function wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
returneaza $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Modificați numărul de coloane pe rând pentru secțiunile aferente și cele mai vândute ale produselor

La fel ca magazinul, dacă doriți să modificați în mod corespunzător numărul de coloane pentru produsele aferente și vândute în paginile de produs, trebuie să filtrați coloanele și să modificați, de asemenea, clasele de corp.

// Filtrare-vinde coloane
function wpex_woo_single_loops_columns ($ column) {
retur 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filtrul argumentelor legate
function wpex_woo_related_columns ($ args) {
$ args ['column'] = 4;
returneaza $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filtrează clase de corp pentru a adăuga clasa de coloană
function wpex_woo_single_loops_columns_body_class ($ classes) {
if (is_singular ('produs')) {
$ classes [] = 'coloane-4';
}
returnare clase $;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Adăugați un meniu dinamic și coșul de coș la meniul dvs.

Acest fragment va adăuga un articol de coș WooCommerce în meniul dvs. care afișează costul articolelor din coș. În plus, dacă site-ul dvs. are Font-Awesome activat, acesta va afișa o pictogramă pentru geantă. Important: Aceste funcții nu trebuie să fie învelite într-o condiție is_admin (), deoarece se bazează pe AJAX pentru a actualiza costul, trebuie să vă asigurați că funcțiile sunt disponibile atunci când is_admin () returnează true și false.

// Adăugați linkul de coș în meniu
function wpex_add_menu_cart_item_to_menus ($ articole, $ args) {

// Asigurați-vă că schimbați „wpex_main” în locația meniului !!!!
if ($ args-> theme_location === 'wpex_main') {

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

if (is_cart ()) {
$ css_class. = 'current-menu-item';
}

$ articole. = '
  • „; $ articole. = wpex_menu_cart_item (); $ articole. = '
  • „; } returneaza articole $; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Funcția returnează linkul principal al coșului de meniu funcția 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 () -> cart-> get_cart_url (); } altfel { $ url = wc_get_page_permalink ('magazin'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('suma', '', $ html); $ output. = '„; $ output. = '„; $ output. = wp_kses_post ($ html); $ output. = '„; returnare $ ieșire; } // Actualizați link-ul coșului cu AJAX function wpex_main_menu_cart_link_fragments (fragmente $) { fragmente $ ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); restituie fragmente de $; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Concluzie

    WooCommerce va funcționa cu orice temă în mod implicit, dar adăugarea de suport suplimentar pentru plugin, astfel încât să se potrivească mai bine temei dvs. este foarte ușor de făcut. De fapt, am scris acest post în timp ce codificăm tema noastră de blog și magazin din WordPress din New York, astfel încât majoritatea acestor modificări sunt incluse în tema noastră. Sau, dacă doriți, puteți cumpăra tema pentru a arunca o privire asupra modului în care s-a făcut totul (consultați fișierele de la wpex-new-york / inc / woocommerce) – poate fi un mod mai ușor pentru dvs. să aflați cum să adăugați corect suport personalizat pentru pluginul WooCommerce, uitându-vă la o temă deja codificată.

    Există și alte fragmente pe care le considerați că aparțin acestei liste sau care v-ar fi de ajutor atunci când dezvoltați noi teme pregătite pentru WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me