Woocommerce Shop sayfası (CSS ve PHP) nasıl düzenlenir
Mağaza sayfanızı ayarlamanın yollarını mı arıyorsunuz? Bu öğreticide, PHP ve CSS kullanarak programlanan WooCommerce Shop sayfalarını nasıl düzenleyeceğinizi göstereceğiz. Herhangi bir çevrimiçi mağazada, dönüşüm seviyenizi artırmak için mağaza sayfalarını düzenlemek ve optimize etmek çok önemlidir. Mağaza sayfası, ürününüzü görüntülediğiniz ve işinizi oluşturabileceğiniz veya yok edebileceğiniz yerdir. WooCommerce mağazasını çalıştırırsanız, mağaza sayfasını ayarlamanızı ve mümkün olduğunca en iyi şekilde kullanmanızı şiddetle tavsiye ederiz. Bu kılavuzda, programlanan WooCommerce Shop sayfasını nasıl düzenleyeceğinizi göstereceğiz.
WooCommerce’de mağaza sayfalarını düzenlemek neden önemlidir? Mağaza sayfası WooCommerce’deki en önemli sayfalardan biridir. Mağazanızın performansı üzerinde büyük bir etkiye sahip olabilmeniz için ürününüzü ziyaretçilerinize gösterdiğiniz yer burasıdır. İyi bir mağaza sayfası kullanıcı deneyimini geliştirebilir, dönüşüm oranını artırabilir ve kullanıcı katılımı üretmenize yardımcı olabilir. Zavallı dükkan sayfaları ise tam tersini yapabilir ve işinizi felç edebilir. Bu yüzden satışlarınızı en üst düzeye çıkarmak için optimize etmeniz gerekiyor. Bunu eklentiler ve sayfa yapımcıları ile yapabilirsiniz, ancak kodlama becerileriniz varsa, kendi çözümünüzü yapmak yapılması gereken bir yoldur.
WooCommerce Shop sayfasını nasıl düzenlenir Programlı bir şekilde, daha önce mağaza sayfalarını ayarlamak için farklı bir yöntem gördük. Ancak, bu öğreticide, küçük bir CSS ve PHP kodu kullanarak programlanan Woocommerce Shop sayfasının nasıl düzenleneceğine odaklanacağız. Bu kılavuzda çocuk teması üzerinde çalışacağımız ve varsayılan Wooocommerce mağaza şablonunu da düzenleyeceğimize dikkat edilmelidir. WooCommerce şablon dosyasına ve çocuk temasından functions.php dosyasına bazı referanslara odaklanacağız. Bu öğreticide, programlanan WooCommerce Shop sayfasını nasıl düzenleyeceğinizi öğreneceksiniz: Woocommerce Varsayılan Mağaza Sayfaları Şablonunu devre dışı bırakın
Başlığı ve İçeriği ayarlayın
En popüler ürün
En iyi satan ürün
En iyi değer
Taksonomiye göre ürünleri sergileyin
Woocommerce Shop sayfasının Function.php adresinden özelleştirilmesi
Ürün Döngüsü Düzenini Düzenle ve CSS Stil Sayfasını Uygulayın
Satır başına varsayılan sütun sayısını düzenleyin
CSS stilini mağaza sayfasına uygulayın
Woocommerce Shop Döngü Dosyalarını Düzenle
Animasyonlu GIF için varsayılanın “satış” metnini değiştirin
Sıralama ve sayfalama seçeneklerini silin
Başlamadan önce, aşağıdaki kılavuzun gelişmiş kodlamayı içerdiğini lütfen unutmayın, böylece teknik becerileriniz yoksa, bunun yerine bu diğer öğreticiyi takip etmenizi öneririz.
Başlamadan önce bir çocuk teması koymanızı öneririz. Bir çocuk teması oluşturma veya birkaç tıklamada yapmak için eklenti kullanma konusunda kılavuzumuzu görebilirsiniz. Ayrıca, çekirdek dosyayı değiştireceğiniz için, sitenizin tüm rezervini yapmalısınız. Şimdi, WooCommerce’deki mağaza sayfalarını kodlama ile nasıl ayarlayacağınıza bakalım. 1. Woocommerce varsayılan mağaza sayfaları şablonunu devre dışı bırakır Mağaza sayfalarını ayarlamak için iki olası yaklaşım vardır: Sorumlu WooCommerce dosyasına olabilirsiniz
Tuvalet kaitini kullanarak çocuğunuzun temasından functions.php dosyasına özel bir komut dosyası ekleyin
HTML WOOCOMMERCE şablonunu Child temasından functions.php dosyası gibi düzenleyebilirsiniz, bir güncelleme olduğunda kaldırmayı önlemek için temel dosya olabilir. Ancak, işler tam olarak function.php dosyasında olduğu gibi çalışmadığından, WooCommerce bu dosyaları güncellemeye karar verirse, ayarınız artık çalışmayabilir.
Ama bunun endişelenmesine gerek yok. WooCommerce bunu fark eder, böylece şablon dosyasını nadiren komut dosyasına zarar verebilecek şekilde günceller. Function.php dosyasıyla çalışma sorunu, varsayılan WooCommerce mağaza sayfasının kancanızı ekledikten sonra görünmesidir. Bu nedenle, her şeyden önce, şablonunuzu sıfırdan oluşturmak için varsayılan WooCommerce Şablon Mağazası sayfasını devre dışı bırakmanız gerekir. Archive-Product.php Dosyası WooCommerce’de, mağaza sayfasındaki çıktıdan sorumlu dosyaya arşiv-sürü.php olarak adlandırılır ve WooCommerce’de bulabilirsiniz (WooCommerce> Şablon Şablon Klasörü> Archive-Product.php).
Bu dosyanın üzerine yazmak için, aşağıda gösterildiği gibi çocuğunuzun temasındaki WooCommerce klasörüne kopyalayıp eklemeniz gerekir: Şimdi, WooCommerce’in mağaza sayfasını nasıl görüntülediğini görebilmeniz için archive-prudand.php dosyasına bakalım. Bunu yapmak için en sevdiğiniz entegre (fikir) geliştirme ortamını açın, WooCommerce Eklenti Şablonu klasörünü açın ve dosyayı açın. Düzenleyebilir ve onunla oynayabilirsiniz, aynı şekilde diğer WC şablon dosyalarını ayarlayabilirsiniz. Bunu yapmadan önce, gerekirse değişiklikleri iptal etmek için orijinal bir dosya yedeklemeniz olduğundan emin olun.
Archive-Product.php dosyasında, bazı do_action () işlevlerini göreceksiniz. Bu işlevler, WooOcommerce Hook’larını bugün mağaza sayfaları için kullanılabilir hale getirmek için kullanılır. WooCommerce Shop sayfasını tam olarak devre dışı bırakmak için, ürünü yazdırmaktan sorumlu döngüyü silin: if (wc_get_loop_prop (‘total’)) {{
do_ace (‘wooocommerce_shop_loop’);
wc_get_template_part (‘içerik’, ‘ürün’);
}
} Burada daha fazla değişiklik yapabilirsiniz, ancak basitleştirmek için sadece döngüleri sileceğiz ve başkalarını oldukları gibi bırakacağız. Daha fazla değişiklik yapmaya karar verirseniz, bazı DO_ACE () işlevlerini silerseniz, uygun kısa kodun web sitesindeki herhangi bir sayfada artık çalışmayacağını unutmayın.
Baskı ürünü için döngüyü sildikten sonra, arşiv-produce.php dosyası şöyle görünecektir: tanımlanmış (‘abspat’) || Git dışarı;
get_header (‘mağaza’);
do_ace (‘wooocommerce_beefore_main_content’);
if (wooocommerce_product_loop ()) {do_ace (‘wooocommerce_beefore_shop_loop’);
// burada döngüyü sildik
do_ace (‘wooocommerce_aft_shop_loop’);
} değilse {
do_ace (‘wooocommerce_no_products_found’);
}
do_ace (‘wooocommerce_aft_main_content’);
Do_action (‘wooocommerce_ideBar’);
get_footer (‘mağaza’);
İşte burada! Varsayılan mağaza sayfası şablonunu devre dışı bıraktınız ve programlanmış Woocommerce Shop sayfasını düzenlediniz! Artık kendinizi tasarlamaya başlayabilmeniz için boş bir mağaza sayfanız var.
2. WooCommerce Shop Page programlı içerik ve başlıkların gölgelik ve içeriğini ayarlayın, resimler, tablolar veya bağlantıları içerebilecek herhangi bir HTML işaretlemesi olabilir. Hatta harici bir JavaScript dosyasını çalıştırmak için boş bir kap gibi bir şey. Bunun için, WooCommerce kısa kodu hakkında temel bilgiye ihtiyacınız var, çünkü bunu mağaza sayfasında ürün görüntülemek için kullanacaksınız. Kısa kod tuvaletine aşina değilseniz, bu kılavuza bakın. Şimdi, tuvalet dükkanı sayfasını düzenleyelim ve ürünleri en popüler, en iyi satan, üst ve en popüler taksonomiye göre gösterelim. Ayrıca, döngü dışında birkaç başlık ve içerik nasıl ekleyeceğinizi göstereceğiz.
2.1 En popüler ürünü görüntüler, en popüler ürünü görüntülemek için, çocuğunuzun temasının arşiv-ürünü.php dosyasını düzenlemeniz gerekir. İlk olarak, silmeden önce Loop Place’de aşağıdaki kısa kodu [Ürünler Orderby = “Popülerlik”] kullanın. # En popüler ürünleri göster: 2 Do_Action sütununda 2 ürün (‘wooocommerce_beefore_shop_loop’);
Echo ‘
en popüler !!
‘;
DO_SHORTCODE (‘[Ürünler Orderby = “Popülerlik” Class = “M-popüler” sütunlar = “2” limit = “2”]’); do_ace (‘wooocommerce_aft_shop_loop’); Kısa bir kodda, stil uygularken daha sonra kullanabileceğiniz M-Popular adlı bir sınıf ekleyeceksiniz. Yukarıdaki örnekte, bir satır 2 sütununda 2 ürün görüntüleyecek şekilde ayarladık (sütunlar = “2” limit = “2”). Burada kısa kodları bir gönderide kullandığınızla aynı şekilde kullanamayacağınızı unutmayın. Sayfa. Kısa kodun çalışması için DO_SHORTCODE () işlevini kullanmalısınız. Her şey iyi çalışıyorsa, şimdi bunu mağazada göreceksiniz. Ürün en çok satıcıya dayalı olarak. Bunun için, kısa kodları tekrarlamaya ek olarak, basit bir HTML işaretlemesi (
) kullanarak bazı içerikler ekleyeceksiniz. Burada, doğru HTML formatına uygun diğer içerik türleri ekleyebilirsiniz. En iyi satan ürünleri, bu sefer 2 satır düzeni ve 3 sütunla gösterelim. Bunu yapmak için, bunu 2.1 adına eklediğiniz echo do_shortcode () satırından hemen sonra yapıştırın: echo ‘
söyle S
‘;
DO_SHORTCODE (‘[Best_Selling_Products Limit = “9” sütun = “3” class = “b-sellers”]’); Ve elde ettiğin şey şu:
En popüler üründen en çok satan satıcıyı eklemek istiyorsanız, Echo hattını 2.1’de 2.2’de değiştirin. 2.3 Üst sıralı ürünler şimdi, kısa kodlarla tekrar oynayalım ve üst sıralama ürünlerini gösterelim. Bu sefer, bir sınıftan daha fazlası olmadan kısa bir kod kullanacağız. echo ‘
en yüksek değer
‘; do_shortcode (‘[top_rateed_products class = “t-dereceli”]’); Bakalım bundan sonra ne oldu:
Gördüğünüz gibi, varsayılan WooCommerce’in düzeni 4 sütuna sahiptir. Şimdilik böyle bırakalım, daha sonra geri döneceğiz. 2.4 Ürünleri Mağaza sayfasındaki taksonomiye göre görüntüler En iyi satış veya en iyi ürünleri göstermenin yanı sıra, taksonomiye göre de görüntülenebilirsiniz. Örneğin, aşağıdaki kod, daha önce kullandığınızla aynı özellikleri kullanarak, ancak sütun sayısını 5 olarak değiştirerek poster ve moda kategorileri için ürünler yazdıracaktır.
DO_SHORTCODE (‘[ürünler kategorisi = “giyim” sütunlar = “5” limit = “10” class = “t-clothing”]’); Echo ‘
Taksonomi posteri:
‘; echo ‘
En iyi posterleri duvarınıza getirin
‘; DO_SHORTCODE (‘[ürünler kategorisi = “posterler” limit = “4” class = “t-posters”]’); Arşiv-ürününüz bu şekilde olmalıdır.
<? Phpİf (wooocommerce_product_loop ()) { do_ace (‘wooocommerce_beefore_shop_loop’); echo ‘
en popüler !!
‘;
DO_SHORTCODE (‘[Ürünler Orderby = “Popülerlik” class = “m-popüler” sütunlar = “2” limit = “2”]’);echo ‘
en iyi -lelecting
‘;DO_SHORTCODE (‘[Best_Selling_Products Limit = “9” sütun = “3” class = “b-sellers”]’);echo ‘
en yüksek değer
‘;DO_SHORTCODE (‘[top_rateed_products class = “t-dereceli”]’);Yankı ‘
Taksonomi Giysileri:
‘;DO_SHORTCODE (‘[ürünler kategorisi = “giyim” sütunlar = “5” limit = “10” class = “t-clothing”]’);Echo ‘
Taksonomi posteri:
;echo ‘
En iyi posterleri duvarınıza getirin
‘;DO_SHORTCODE (‘[ürünler kategorisi = “posterler” sütunlar = “2” limit = “4” class = “t-posters”]’);do_ace (‘wooocommerce_aft_shop_loop’);} else {do_ace (‘wooocommerce_no_products_found’);} do_ace (‘wooocommerce_aft_main_content’);Do_action (‘wooocommerce_ideBar’);get_footer (‘mağaza’);
Bu noktada, tasarım gereksinimlerini karşılayabilecek özel bir mağaza sayfası oluşturmak için tüm Woocommerce kısa kodlarının ve özniteliklerinin nasıl kullanılacağını anlayabilmeniz gerekir. 2.5 Tuvalet dükkanı sayfasını function.php adresinden ayarlayın WooCommerce Shop sayfasını ayarlamak istiyorsanız, functions.php dosyasını da düzenleyebilirsiniz. Ürün döngüsünün dışındaki içerik için, Arşiv-Ürün.php dosyasında görülen bazı kancaları kullanabilir ve bu da CILT temasından Function.php dosyasından çalıştırabilirsiniz. Bu şekilde tuvalet şablon dosyasını güncellemeye karar verse bile komut dosyanızın çalışmaya devam etmesini sağlıyorsunuz. Bu örnek için, başlık, altyazılar, açıklama ve afiş içeren özel bir başlık ekleyelim. Bu komut dosyasını çocuk temasından functions.php dosyasına yapıştırın: add_action (‘wooocommerce_beefore_shop_loop’, ‘shop_main_heading’);
Shop_main_heading () işlevi {
$ content = ”;
$ content. = ‘
Olağanüstü mağazama hoş geldiniz!
‘;
$ content. = ‘
Kendi aşkınızla inşa edildi
‘;
$ content. = ‘
Web sitesi mağazası sayfamı bıraktığınız ve ziyaret ettiğiniz için teşekkür ederiz, lütfen en çok beğendiğiniz ürünlere göz atın ve her şeyi satın alın
‘;
$ content. = ‘
GEMA $ içerik;
}
Bu, mağaza sayfanızın görüntülenmesidir:
Aynı şekilde, mağaza sayfasının sonunda bazı içerikleri görüntülemek için wooocommerce_aft_shop_loop kancasını kullanabilirsiniz. 3. Satır başına ürün sayısını düzenleyin ve stil sayfası CSS’yi geçerli tuvalet mağazası sayfasına uygulayabilmeniz, ürünü gösterebilmeniz, özelliklere, taksonomiye, en iyi satışa göre sıralayabilmelisiniz. Woocommerce kısa kodu kullanmak istediğiniz yollar. Ayrıca, mağaza sayfanızda istediğiniz herhangi bir yerde her türlü içeriği girebilmeniz gerekir. Peki ya daha ileri gidip mağaza sayfanızı bir sonraki seviyeye getirebilirseniz? Şablonun düzenini düzenleyebilir ve programlanan Woocommerce Shop sayfanızı daha iyi ayarlamak için bazı CSS stilleri ekleyebilirsiniz. 3.1 Satır başına varsayılan sütun sayısını düzenle Kısa kod sütununun özniteliğini belirlerseniz, her satır görüntülenecek ürün sayısını ayarlayabilirsiniz. Buna ek olarak, kısa kod için toplam ürün sayısını sınır özellikleriyle ayarlayabilirsiniz: [ürün siparişi = “Popülerlik” sütunları = “3” limit = “3”] Ancak, sütunun özelliklerini belirlemiyorsanız, siz Çocuk temasından bu komut dosyasını Fonksiyon.php dosyasında kullanarak her satır için yazdırmak istediğiniz ürün sayısını ayarlayabilir. add_filter (‘loop_shop_columns’, ‘loop_columns’, 999); if (! function_exists (‘loop_columns’)) {) {
Loop_columns function () {
Dönüş 4; // 4 Ürün Sıra
}
}
Bu, WooCommerce kısa kodunda yalnızca sütun özniteliği yoksa, satır başına görüntülenen varsayılan ürünlerin sayısını değiştirir. 3.2 WooCommerce Shop sayfasına birkaç CSS uygulamak için mağaza sayfasına bazı CSS stilleri uygulama, komut dosyasını şablon dosyasına şöyle ekleyebilirsiniz: * {
Arka plan rengi:#A2BCFF;
}
quadLayers_enqueue_css () işlevi {
İf (is_shop ()):
wp_enqueue_style (‘style_checkout’,
get_stylesheet_directory_uri (). ‘/shop_style.css’
);
eğer sona erdi;
}
Gördüğünüz gibi, eğer (IS_SHOP ()): Shop_style.css dosyası için Koşullu Koşu için doğru olmalıdır. Bu dosyada, yalnızca mağaza sayfasına uygulamak istediğiniz tüm stil komut dosyalarına sahip olacaksınız. Bu, senaryoyu tüm ön web sitesi ön ucuna uygulayacak çocukların temasındaki style.css dosyasından farklıdır. Bu kılavuz için aşağıdaki shop_style.css dosyasını kullanacağız, ancak lütfen CSS komut dosyasını kullanın veya bunu değiştirin:
Div.storefront-Sorting: N-Child (2) {
Metnin hizalanması: Merkez;
}
#main div.storefront-sorting h1 {
Yazı tipi kuvveti: normal;
}
#Utama H1,#H2 Main {
Font-Heavy: daha kalın;
Yazı tipi kuvveti: eğik;
Hizalama Metni: Merkez;}
#main> .m-popüler,#Main> .b-seller,#Main> .t-dereceli,#Main> .t-Clothing,#Main> .t-Posters {
Sınır: katı #b8b8b8 1px;
Sınırlar: 25px;
Marj-Bawah: 25px;
Dolgu Top: 35px;
Dolgu-sol: 20px;
Dolgu-sağ: 20px;
}
#main> .m-popüler {
Arka plan rengi:#dbad97;
}
#main> .b-selam {
Arka plan rengi:#B4E6A3;
}
#main> .t dereceli {
Arka plan rengi:#f0f695;
}
#main> .t-clothes {
Arka plan rengi:#95B4F6;
}
#main> .t-poster {
Arka plan rengi:#c88Fe5;
}
CSS dosyasında özel dersler içeren birkaç seçmen bulacaksınız. Kısa bir kod yapmadan önce yaptık. Örneğin, “B-Selling” sınıfını şöyle ekledik: DO_SHORTCODE (‘[Best_Selling_Products Limit = “9” sütun = “3” class = “B-sellers”]’); WooCommerce Shop sayfasına CSS stili ekledikten sonra, böyle bir şey alacaksınız (tam boyutta görmek için resme tıklayın):
Tam boyutta görmek için resme tıklayın. Ayrıca, aktif bir mağaza temasına sahip olduğumuzu ve bildiğiniz gibi, CSS seçmenlerinin aynı temaya sahip olmalarına rağmen her web sitesinde farklı olabileceğini unutmayın. Böylece bu dosya çalışır, belirli siteleriniz için seçmenleri düzenlemeniz gerekebilir. Bonus: Sayfa başına ürün sayısının nasıl değiştirilmesi Şimdi, mağaza sayfasındaki sayfa başına görüntülediğiniz ürün sayısını değiştirmek istediğinizi söyleyin. Örneğin, sayfa başına 10 ürün görüntülemek istiyorsanız, aşağıdaki kodu işlevlere ekleyin.
İşlev new_loop_shop_per_page ($ cols) {
$ kol = 10;
$ CAB;} Dönüş $ Cols, seçeneğin değerini alan sayfa başına ürün sayısını içerir -> Her sayfada görüntülemek istediğiniz ürün sayısını okuyun ve geri yükleyin. 4. WooCommerce Shop Döngü dosyasını şimdiye kadar düzenle, programlanan Woocommerce Shop sayfasını ayarlamak için arşiv-üretim.php şablon dosyasının nasıl düzenleneceğini gördük. Bu dosya, Loop WC’nin tüm sayfa ürünlerini görüntülemek için çalıştığı yerdir. Şimdi, eklenti düzenleyicinize veya fikrinizde WooOcommerce eklenti klasörünü açın ve döngü klasörünü açın. Arşiv-üretim.php dosyasıyla aynı seviyede bulacaksınız. Döngü klasöründe, daha fazla mağaza sayfasını ayarlamak için düzenleyebileceğiniz birkaç dosya bulacaksınız. Bu dosyanın üzerine yazmak için, çocuğunuzun temasında bir klasör ve klonlama dosyası oluşturmanız gerekir. Daha önce yaptığınız WooCommerce klasörü altında Loop adlı yeni bir klasör oluşturun. Bundan sonra, orijinal satış flash.php dosyasını eklenti şablonundan kopyalayın ve çocuğunuzun temasındaki bu döngü klasörüne yapıştırın.
Satılan tüm ürünlere GIF animasyonu eklemek için Sale-Flash.php dosyasını kullanacağız. Dosyayı görürseniz, ürün satılırken “Satılık” mesajını görüntülemekten sorumlu komut dosyası olduğunu göreceksiniz. 4.1 Animasyonlu GIF’ler için varsayılan “Satış” metnini değiştirin Bu bölümde, varsayılan satış mesajlarını nasıl devre dışı bırakacağınızı ve bunları animasyonlu GIF’lerle değiştireceğinizi göstereceğiz. Flash-Sale.php dosyasını, çocuk temanızı şu şekilde görünecek şekilde düzenlemeniz gerekir: tanımlanmış (‘ABSPATH’) || Git dışarı;
$ Global Post, $ ürün;
if ($ ürün-> is_on_sale ()) {
$ an_gif = ‘ ‘; Echo $ an_gif;
}
Orada GIF dosyasını istediğiniz başka bir GIF ile değiştirebilirsiniz. 4.2 Sıralama ve sayfalama seçeneklerini silin Şimdi, WooCommerce Shop sayfasındaki sayfalandırmanın “Sıralılara göre” ve işlevselliğini nasıl devre dışı bırakacağına bakalım. Sale-flash.php dosyasıyla yaptığınıza benzer şekilde, bunu sadece aynı adla boş dosyaları kaydederek başarabilirsiniz. Her iki dosyayı da döngü klasöründe oluşturun ve orderby.php ve pagination.php. Her iki dosyayı da tamamen devre dışı bırakmak için bu komut dosyasını yalnızca her dosyaya koyabilirsiniz: tanımlanmış (‘abspath’) || Git dışarı;
Bunu yaptıktan sonra, mağaza sayfanızda daha temiz bir başlık ve altbilgi olacak. Buna ek olarak, birçok ürün sergilediğiniz için sayfalandırma çok yararlı olmayabilir. Sale-flash.php dosyasında varsayılan WooCommerce davranışını sildiğimizi ve kendi GIF animasyon ekranımızı eklediğimizi unutmayın. Bu çok temel bir görevdir, ancak bu teknik gelişmiş geliştiriciler için çeşitli olasılıklar sunar. Son not
WooCommerce bir şablon güncellemesi yayınlamaya karar verirse, çocuğun temasından tuvalet şablonu dosyası yansımayı önlemez. Ancak, bu nadirdir.
Bu bir senaryo örneğidir ve üretime getirilmemelidir, bunlar sadece didaktik amaçlara yöneliktir.
Bonus: Son WooCommerce Shop sayfasındaki kategoriyi göstererek, küçük bir kod kullanarak WooCommerce Shop sayfasına nasıl kategoriler ekleyebileceğinizi görelim. Kodlama becerileri olan kullanıcılar için bu yöntem önerilir. PHP’nin yanı sıra, kodlar tasarlayabilmek için küçük bir CSS bulmanız da tavsiye edilir. Not: Başlamadan önce, sitenizin bir yedeklemesini yaptığınızdan ve yoksa sahip değilseniz bir alt tema oluşturduğunuzdan emin olun. Kategoriyi kontrol panelinizdeki mağaza sayfasına ekleyin, görünüm> tema düzenleyicisi açın ve functions.php dosyasını açın Çocuk dosyası. Doğru tema dosyasındaki function.php dosyasını tıklayın ve özel işlevinizi eklemek için aşağıdaki komut dosyasını yapıştırın. Aşağıdaki işlev, mağaza sayfanızın diğer öğelerini yüklemeden önce ürününüzün kategorisini ekleyecektir. Bu, alıcının ürün kataloğundan önce tüm ürün kategorilerinizi göreceği anlamına gelir. Ürün işlevi_subkategory ($ args = array ()) {$ parentID = get_qued_object_id ();
$ args = dizi ( ‘Ebeveyn’ => $ ParentID
);
$ term = get_terms (‘ürün_cat’, $ args);
İf ($ cound) {
echo ‘
‘;
foreach ($ olarak $ dönem) {
echo ‘
‘;
wooocommerce_subcategory_thumbnail ($ terim); echo ‘
‘;
echo ‘ slug.’ “> ‘;
echo $ term-> adı;
Gema ‘‘;
echo ‘
‘;
yankılar ‘
‘;
}
yankılar ‘
‘;
}
}
Add_action (‘wooocommerce_beefore_shop_loop’, ‘ürün_subkategory’, 50); Bu işlev kategorinizi WooCommerce Shop sayfasına ekleyecektir. Bununla birlikte, tam olarak istediğiniz gibi görünemeyebileceklerini unutmayın, bu nedenle küçük bir CSS ile yeni bir kategori ayarlamanız gerekir. Bununla ilgili daha fazla bilgi için, mağaza sayfasında nasıl görüntülenir ve stil kategorileri hakkındaki yayınımıza bakın. Sonuç Genel olarak, mağaza sayfası çok önemlidir ve mağazanızı yapabilir veya yok edebilir. Bu nedenle kodlama becerileriniz varsa, programlanmış WooCommerce Shop sayfasını düzenlemenizi ve dönüşüm seviyenizi artırmak için optimize etmenizi öneririz. Bu kılavuzda, mağazanızın çeşitli yönlerini nasıl ekleyeceğimizi, sileceğini ve ayarlayacağını gösterdik. Bununla birlikte, bunlar ilham bulmanıza ve mağazanızı bir sonraki seviyeye taşımanıza yardımcı olabilecek birkaç örnek ve fikirdir. Şimdi oynamanın ve özelleştirmenizi geliştirme zamanı. Woocommerce mağazanızı ayarlamak için daha fazla rehberlik için, kontrol etmenizi öneririz: Ajax Woocommerce,
Ödeme sayfasına nasıl özel bir alan eklerim?
WooCommerce sepet işlevine katkıda bulunur
Son olarak, Facebook mağazasını WooCommerce ile bağlamak istiyorsanız, bu tam kılavuzu görmelisiniz. Çevrimiçi mağazanızı ayarladınız mı? Neyi değiştirdin? Sorularınız varsa, aşağıya bir yorum bırakın ve size yardımcı olmak için elinizden geleni yapacağız! GitHub’daki tam kodu da görebilirsiniz.
