Woocommerce’ ı WordPress Temanıza Uyarlayabileceğiniz 11 İpucu

Şubat 26, 2017

profesyonel wordpress tema

Profesyonel Wordpress Temalar

%100 Türkçe, Responsive, Kaliteli Wordpress Temalar
-
Woocommerce Eklentileri

woocommerce uyumluluk

Kullandığınız mevcut wordpress temanıza mağaza sayfası eklemek istediniz ve woocommerce eklentisini kurdunuz, ancak sitenizin tasarımı bozuldu yada mağaza sayfanız hayal ettiğiniz gibi olmadı. Peki neden?

Kulandığınız kurumsal, magazin yada blog teması woocommerce uyumlu değil, bu yüzden woocommerce eklentisi kurduğunuzda tasarımınızda bozulmalar olmakla birlikte mağaza sayfası ve genel woocommerce default ayarları siteninizin tasarımına uymayabiliyor.

Woocommerce Ready temaya sahip değilseniz aşağıda listeledeğimiz küçük kodları kullanarak temanızı woocommerce uyumlu hale getirebilirsiniz.

Önemli Not: Aşağıda paylaştığımız kodları kullanmadan önce woocommerce eklentisini kurup etkinleştirdiğinizden emin olunuz. Tüm kodları functions.php dosyasına ekleyiniz.

WordPress temalarına woocommerce uyumluluğu kazandırma

Functions.php dosyasına ekleyeceğimiz tüm woocommerce ile ilgili kodları alttaki kod ile kapsarsak iyi olur.

Woocommerce eklenti aktiflik kontrolü


// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

 

Woocommerce uyumluluğunu bildirin

Temanızın woocommerce uyumlu olduğunu bildirmeden yapacağınız tüm düzenlemeler ne yazık ki işinize yaramaz. Bunun için öncelikle temamızın woocommerce uyumluluğunu bildirelim.


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

 

Woocommerce CSS Dosyalarını Kaldırma

Woocommerce eklentisini kurduğunuzda 3-4 css dosyası ile birlikte geldiğinden tasarımınızda ciddi style çakışmaları yaşanabilir. Bunu önlemek için woocommerce style dosyalarını engelliyoruz.


// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

 

yada woocommrce.css hariç diğer style dosyalarını engellemek isterseniz;


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

 

Mağaza Başlığını Kaldırma

Çoğu temada hali hazırda default bir sayfa başlığı eklendiğinden ekstra bir başlık kötü gözükebilir.

 


add_filter( 'woocommerce_show_page_title', '__return_false' );

 

Mağaza Başlığını Değiştirme

Eğer temanızda böyle bir başlık eklenmemişse mevcut başlığı kaldırmak yerine değiştirmek isteyebilirsiniz.

 

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

 

Mağaza sayfasında listelenecek ürün adetini belirleyin

 

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 12;
}
add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

 

Mağaza sayfası ürün kolununu belirleyin

Mağaza sayfasında ürünlerin kaç kolon yan yana dizileceğini belirleyebilirsiniz.Örnekte 4 lü kolon girilmiş.

 


// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
	return 4;
}
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

 

İndirim etiketini değiştirin

İndirimli ürünlerinizin indirim etiketi text ini değiştirebilirsiniz.


function wpex_woo_sale_flash() {
	return '' . esc_html__( 'Sale', 'woocommerce' ) . '';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Ürün galeri resim kolonunu değiştirme

Ürün detay sayfasında ürünleriniz için oluşturuğunuz galerilerin kaç kolonda gösterileceğiniz belirleyebilirsiniz.


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

Benzer ürünlerin sayısını belirleyin

Ürün detay sayfasında çıkan benzer ürünlerin kaç adet listelenmesini istiyorsunuz?


// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
	$args['posts_per_page'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Benzer ürünlerin listelenme kolon sayısını belirleyin

Benzer ürünleri kaçlı kolonda gösterileceğini belirleyebilirsiniz.


// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
	return 4;
}
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
	$args['columns'] = 4;
	return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
	if ( is_singular( 'product' ) ) {
		$classes[] = 'columns-4';
	}
	return $classes;
}
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Ana Menüye Sepet linki ve toplam sepet değerini ekleyin

Bu kod ile menünüze sepet toplam değerini gösteren sepet linkini ekleyebilirsiniz. ayrıca temanıda Font awesome desteği varsa bir sepet iconuda eklemektedir.


// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

	// Make sure your change 'wpex_main' to your Menu location !!!!
	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';
		}

		$items .= '

‘; } return $items; } add_filter( ‘wp_nav_menu_items’, ‘wpex_add_menu_cart_item_to_menus’, 10, 2 ); // Function returns the main menu cart link function 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(); } else { $url = wc_get_page_permalink( ‘shop’ ); } $html = $cart_extra = WC()->cart->get_cart_total(); $html = str_replace( ‘amount’, ”, $html ); $output .= ‘‘; $output .= ”; $output .= wp_kses_post( $html ); $output .= ‘‘; return $output; } // Update cart link with AJAX function wpex_main_menu_cart_link_fragments( $fragments ) { $fragments[‘.wpex-menu-cart-total’] = wpex_menu_cart_item(); return $fragments; } add_filter( ‘add_to_cart_fragments’, ‘wpex_main_menu_cart_link_fragments’ );

Son Olarak;

Woocommerce eklentisi tüm wordpress temalarına kurulabiliyor ve kullanılabiliyor ancak bazı ufak düzenlemeler yapmadığınız takdirde kötü bir tasarımla karşılaşabilirsiniz. Yukarıda paylaştığımız ufak kod parçaları ile woocommerce eklentsiini mevcut temanıza uyumlu hale getirebilirsiniz.

Yinede istediğiniz sonucu alamazsanız sizler için tasarladığımız Profesyonel wordpress temalarına göz atabilirsiniz.