WooCommerce şablonları programlı olarak nasıl özelleştirilir

Sitenizdeki şablonları düzenlemek ister misiniz? Bu kılavuz, WooCommerce şablonlarını hem kancalarla hem de bunların üzerine yazarak programlı olarak nasıl özelleştireceğinizi gösterecektir .

WooCommerce şablonlarını neden düzenlemelisiniz?

Çevrimiçi alışveriş, geleneksel mağazalara gitmekten daha rahat ve hızlıdır, bu nedenle e-ticaret son birkaç yılda son derece popüler hale geldi. Bu kadar çok rekabetle, WooCommerce mağazanızı kurmak ve ürünlerinizi çevrimiçi hale getirmek yeterli değildir. Kalabalıktan farklılaşmanın ve öne çıkmanın yollarını bulmanız gerekiyor.

Bunu yapmanın en iyi yollarından biri mağazanızı özelleştirmek. Başlığı değiştirmenin ve ödeme sayfası veya mağaza sayfası gibi önemli sayfaları düzenlemenin yanı sıra, kullandığınız şablonları da özelleştirebilirsiniz. Şablonlarını düzenleyen çok fazla site yok, bu yüzden bunu yaparak rakiplerinize üstünlük sağlayabilirsiniz.

Kodlama becerileriniz varsa, muhtemelen mağazanızı düzenlerken bir alt tema kullanmanın önerildiğini biliyorsunuzdur. Benzer şekilde, WordPress ve WooCommerce yerleşik kancaları, herhangi bir web sitesini düzenlemek ve yeni özellikler eklemek için birçok olanak sunar.

WooCommerce şablonları programlı olarak nasıl özelleştirilir

WooCommerce şablonlarını programlı olarak özelleştirmenin iki ana yolu vardır:

1. kancalı
2. Şablonların üzerine yazma

Bu yöntemlerin her biri farklı amaçlara hizmet eder. Ana farklılıklarına daha yakından bakalım.

Şablon dosyalarının üzerine mi yazıyorsunuz yoksa kanca mı kullanıyorsunuz?

Mağazanızı kancalarla özelleştirmek önerilen bir uygulamadır. Ancak, WooCommerce'i kancalarla özelleştirirken uyumsuzluk sorunlarıyla karşılaşabilirsiniz. Daha karmaşık özelleştirmeler için WooCommerce şablon dosyalarının üzerine yazmak daha iyi bir seçenek olabilir.

Bir şablon dosyasının üzerine yazdığınızda, o dosyada çalışan kancaların çalışmayı durduracağını unutmamak önemlidir. Her kanca belirli bir dosyaya işaret eder, bu nedenle kancayı tetikleyen aynı dosyayı düzenlerseniz bunları kullanamazsınız.

Örneğin, kancaların nasıl oluşturulduğunu görmek için single-product.php dosyasını alalım. Ayrıca, kancaların döngüden önce ve sonra nerede olduğuna dikkat edin.

 if ( ! tanımlanmış( 'KESİNLİKLE' ) ) {
        çıkış; // Doğrudan erişiliyorsa çık
 }
 get_header('mağaza'); ?>
 <?php
                /**
                 * woocommerce_before_main_content kancası.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (içerik için div'leri açan çıktılar)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'içerik', 'tek ürün'); ?>
                <?php bitiş zamanı; // döngünün sonu. ?>
        <?php
                /**
                 * woocommerce_after_main_content kancası.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (içerik için div'leri kapatır)
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * woocommerce_sidebar kancası.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('mağaza');

Komut dosyasına bir göz atarsanız, do_action('name-of-the-hook'); üzerinde kancaları nasıl oluşturduğumuzu göreceksiniz. çizgiler.

Diyelim ki alt temanızın functions.php dosyasında aşağıdaki kanca var:

 add_action('woocommerce_after_main_content',function(){echo “tek ürün şablon dosyasından sonra özel içerik”;});

Aynı içeriği şablon dosyasında aşağıdaki gibi yansıtabilirsiniz:

 <?php bitiş zamanı; // döngünün sonu. ?>
        <?php
 echo “tek ürün şablon dosyasından sonra özel içerik”;
                /**
                 * woocommerce_after_main_content kancası.
 do_action('woocommerce_after_main_content');

Ancak, bunu yaparak do_action('woocommerce_after_main_content'); kodunuzu kancayla çekmek yerine oraya eklediğiniz için işlev işe yaramaz hale gelecektir. Bu nedenle, do_action('name-of-the-hook'); dosyasını silerek dosyadaki tüm gereksiz kancaları kaldırmak isteyebilirsiniz. bölümler.

Web sitenizde başka bir yerde woocommerce_after_main_content() kancasını kullanıyorsanız ve do_action( 'name_of_your_hook' ); kaldırırsanız unutmayın. bu dosyada kanca artık çalışmayacaktır.

Kancaları ve gereksiz PHP etiketlerini çıkardıktan sonra dosyanız şöyle görünmelidir:

 if ( ! tanımlanmış( 'KESİNLİKLE' ) ) {
 çıkış; // Doğrudan erişiliyorsa çık
 }
 get_header('mağaza');
 while ( have_posts() ):
 posta();
 wc_get_template_part( 'içerik', 'tek ürün');
 son zaman; // döngünün sonu.
 do_action('woocommerce_sidebar');
 get_footer('mağaza');

NOT : Kancaları bu şekilde kaldırmak, eklentiler ve temalar gibi üçüncü taraf kodlarını etkileyerek arızalara veya web sitenizin bozulmasına neden olabilir. Ne yaptığınızı bildiğiniz varsayılır.

WooCommerce şablon dosyalarını özelleştirin ve üzerine yazın

WooCommerce şablon dosyalarının üzerine yazmak, mağazanızı özelleştirmek için size çok fazla esneklik sağlar. Ancak, daha önce de belirtildiği gibi, bir şablon dosyasının içeriğinin üzerine yazdığınızda, o dosyada çalışan kancaların çalışmayı durduracağını anlamalısınız. Ek olarak, WooCommerce zaman zaman şablon dosyalarını değiştirebilir, bu nedenle bir güncelleme varsa ve dosyaları değiştirirlerse, düzenlediğiniz dosyanın güncel olmadığını görebilirsiniz.

Şablonların üzerine yazarken akılda tutulması gerekenler

Buradaysanız, muhtemelen bazı kodlama becerileriniz vardır ve bir alt temayı nasıl kullanacağınızı ve kuracağınızı biliyorsunuzdur. Durum böyle değilse, bir alt tema oluşturmak için kılavuzumuza bakın veya bu eklentilerden birini kullanın.

WooCommerce şablonlarının üzerine yazmak, functions.php dosyasının üzerine yazmaya benzer. Temel fark, tema dosyalarınız yerine WooCommerce şablon dosyalarını düzenlemenizdir.

Bunu yapmak için, istediğiniz şablon dosyasını WooCommerce eklenti şablonları klasöründen kopyalamanız ve WooCommerce klasörünün altındaki alt temanıza yapıştırmanız gerekir. WooCommerce şablonları klasörünün, dosya adlarının ve alt klasörlerinin aynı yapısını izlerseniz; alt klasörlerdekiler de dahil olmak üzere şablon dosyalarının üzerine yazabileceksiniz.

Birçok WooCommerce şablon dosyası vardır ve bunların her biri tek bir görevden sorumludur. Düzenleyebileceğiniz şablon dosyalarının tam listesini, alt dizinleri ve klasör yapısını bu bağlantıdan kontrol edebilirsiniz.

Gördüğünüz gibi, kök şablon klasöründe birkaç alt dizinin yanı sıra bazı dosyalar var. archive-product.php , single-product.php veya content-single-product.php gibi ana dosyaları düzenlediğiniz şekilde herhangi bir alt dizindeki dosyaları özelleştirebilirsiniz. Benzer şekilde, alt temanızdakiyle aynı klasör ve yapı adlarını takip ederseniz sepet, Hesabım, e-postalar veya ödeme klasörlerindeki dosyaları da özelleştirebilirsiniz.

Bu dosyalardan bazılarını özelleştirmek istiyorsanız, alt temanız şuna benzer:

Bunu söyledikten sonra, WooCommerce şablonlarını özelleştirmek için yapabileceğiniz bazı örneklere bakalım.

1. WooCommerce şablonuna kısa kodlar ekleyin

İlginç bir alternatif, kodunuzda kısa kodlar kullanmaktır. Mevcut kısa kodların çoğu burada çalışmalıdır, ancak resmi WooCommerce ve WordPress kodları dışında desteklenmeyen bazı kısa kodlar bulmak da yaygındır.

Örneğin, aşağıdaki komut dosyası, tüm tek ürün sayfalarında hesap panosunu içerecektir. Alt temanızda oluşturduğunuz single-product.php dosyasına yapıştırmayı unutmayın.

 <?php
 if ( ! tanımlanmış( 'KESİNLİKLE' ) ) {
 çıkış; // Doğrudan erişiliyorsa çık
 }
 get_header('mağaza');
 while ( have_posts() ):
 posta();
 wc_get_template_part( 'içerik', 'tek ürün');
 son zaman; // döngünün sonu.
 do_action('woocommerce_sidebar');
 $t= '<div><h4>Hesabım</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 yankı $t;
 get_footer('mağaza');

Ve bu, canlı bir ürün sayfasındaki sonuçtur:

2. İçeriği daha önce o ürünü satın almış müşterilere gösterin

Sizden daha önce bir ürün satın almış ve aynı ürünü tekrar satın almak için geri gelen müşterileriniz varsa, deneyimlerini iyileştirmenin bir yolu olarak onlara bir indirim kodu verebilir ve mağazanıza tekrar tekrar gelmelerini sağlayabilirsiniz.

Aşağıdaki komut dosyası, geçmişte aynı ürünü satın alan geri dönen müşteriler için ürün sayfasında içerik görüntüleyecektir. Bir kez daha single-product.php dosyasını düzenliyoruz:

 get_header('mağaza');
 while ( have_posts() ):
 posta();
 wc_get_template_part( 'içerik', 'tek ürün');
 son zaman; // döngünün sonu.
 $current_user = wp_get_current_user();
 if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="kullanıcı tarafından satın alındı">&hearts; Hey ' . $current_user->ilk_adı . ', bunu daha önce satın aldınız. Bu kuponu kullanarak tekrar satın alın: <b>PURCHASE_AGAIN_21</b></div>';
 endif;
 get_footer('mağaza'); 

3. Ürün miktarına ve sepetin toplam fiyatına göre sepete ekle düğmesini kaldırın

WooCommerce şablonlarınızı programlı olarak özelleştirmek istiyorsanız bir başka ilginç örnek, müşterinin satın aldığı ürün sayısına ve sepetin toplam fiyatına bağlı olarak Sepet düğmesini eklemektir.

Bu durumda, şablon dizinindeki döngü klasörünün içinde bulunan bir dosyayı kullanarak WooCommerce döngüsüne gireceğiz. Alt temanızın woocommerce klasörünün altında loop adlı bir klasör altında yeni bir add-to-cart.php dosyası oluşturun ve bu betiği yapıştırın:

 if ( ! tanımlanmış( 'KESİNLİKLE' ) ) {
 çıkış;
 }
 küresel $ürün;
 $count= WC()->cart->get_cart_contents_count();
 $total_price= WC()->cart->get_cart_total();
 preg_match_all('!\d+!', $toplam_fiyat, $eşleşme);
 $to_int = intval($matches[0][1]);
 if($to_int>500){
 echo "Sepet toplam limitini aşıyor";
 }
 elseif($say<10){
 echo application_filters(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS tamam.
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $product->add_to_cart_url() ),
 esc_attr( isset( $args['miktar'] ) ? $args['miktar'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$ürün,$arg);
 }
 Başka{
 echo "Miktar sınırı aşıldı";
 }

Bu durumda, sepete 10'dan fazla ürün eklenip eklenmediğini ve sepetin toplam fiyatının 500 doları geçmediğini kontrol etmek için koşullu bir if() ifadesi ekliyoruz.

Gördüğünüz gibi, WooCommerce nesnesini şu şekilde çağıran WooCommerce sınıf kapsamına giriyoruz: WC()->cart . Bu şekilde, koşullarınıza bağlı olarak, alışveriş sayfasına sepet düğmesi eklemek veya eklememek için bazı bilgileri alabilirsiniz.

Her iki koşullu kısıtlamayı da uygularken ortaya çıkan sonuç:

Bunun yalnızca ana mağaza sayfasında çalışacağını unutmayın. Aynısını diğer sayfalarda yapmak istiyorsanız biraz daha kod eklemeniz gerekecek.

4. WooCommerce e-posta şablonları dosyalarını düzenleyin

E-posta şablonları zaten web sitenize faydalı bağlantılar içerir, ancak bazı kullanıcılar bunun farkında olmayabilir. O halde, kullanıcıların aldıkları e-postadan doğrudan web sitesine giriş yapabilecekleri e-posta şablonlarına bir bağlantı ekleyelim.

Bağlantıyı e-posta düzeninin başlığına ekleyeceğiz, bu nedenle WooCommerce'in şablonlar alt dizininin e-posta klasöründe bulunan email-header.php dosyasının bir kopyasına ihtiyacımız var.

Alt temanızda yeni bir klasör oluşturun ve dosyayı aynı adla oraya yapıştırın. <!–header–> ve <!–end header–> başlangıç ​​işaretlerini göreceksiniz ve bağlantıyı buraya ekleyeceksiniz:

 <!-- Başlık -->
 <table border="0" cellpadding="0" cellpacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Hesabınıza giriş yapın</a></span>';?>
 </h3>
 </td>
 </tr>
 </tablo>
 <!-- Başlığı Bitir →

Bu kadar! WooCommerce e-posta şablonu başlık dosyasını az önce düzenlediniz. Aynı şekilde, bu dizinde bulunan tüm e-posta şablon dosyalarını düzenleyebilirsiniz. E-posta şablonlarınızı nasıl test edeceğiniz hakkında daha fazla bilgi için bu eksiksiz kılavuza bakın.

Şablonları önizlemek için bir e-posta önizleme eklentisi kullanmanızı öneririz. Burada, kullanabileceğiniz bazı e-posta eklentilerini bulacaksınız.

5. WooCommerce e-posta şablonlarına CSS stili nasıl uygulanır?

Bir başka ilginç alternatif, WooCommerce şablonlarınızın stilini programlı olarak özelleştirmektir. HTML işaretlemesini düzenledikten sonra, e-posta şablonlarına biraz CSS stili ekleyebilirsiniz. Satır içi CSS'nin önerilen bir uygulama olmadığını düşünürsek, email-styles.php dosyasını kullanmamız gerekecek. Bu, e-posta şablonları için CSS'yi işleyen dosyadır.

E-postalara özel bir CSS kodu uygulamak için bu dosyayı WooCommerce eklenti klasörlerinden kopyalayın ve tema WooCommerce klasörünüze yapıştırın. Bu bir PHP dosyasıdır, bu nedenle değişkenleri, işlevleri kullanabilecek ve kendi mantıksal ifadenizi oluşturabilecek ve bunları stillere uygulayabileceksiniz:

 a {
 renk: <?php echo esc_attr( $link_color ); ?>;
 yazı tipi ağırlığı: normal;
 metin-dekorasyon: altı çizili;
 }

Bu da özel bağlantı seçicidir:

 .my-link > a:nth-child(1){
 Beyaz renk;
 yazı tipi boyutu:14 piksel;
 }

Çözüm

Özetle, şablon dosyalarını düzenlemek, rakiplerinizden sıyrılmanın ve müşterilerinize daha iyi bir alışveriş deneyimi sunmanın mükemmel bir yoludur.

WooCommerce şablonlarını programlı olarak özelleştirmenin 2 ana yolu vardır:

• kancalı
• Şablonların üzerine yazma

Her iki yöntemi de karşılaştırdık ve size birkaç örnek gösterdik. Komut dosyalarını bir temel olarak kullanabilir ve bunları özelleştirmek ve mağazanıza uygulamak için oynayabilirsiniz.

Kılavuzu izleyerek herhangi bir sorun yaşarsanız, aşağıdaki yorumlarda bize bildirin, size yardımcı olmak için elimizden gelenin en iyisini yapacağız.