テーマのカスタマイズ

1. テーマにSKU Select専用のテンプレートファイルを作成

ご利用のテーマにある「wc_item_single.php」をコピーして、コピーしたファイルを「wc_sku_select.php」とリネームしてください。
「wc_sku_select.php」の設置場所は以下のとおりになります。

2. 単一SKUと複数SKUの表示を統一

ここからWCEX SKU Selectが動作させるために「wc_sku_select.php」のマークアップを修正します。

Welcat Defaultテーマのように単一SKUと複数SKUで商品詳細ページの表示を分けているようなテーマの場合、統一する必要があります。

1. 下記の灰色の部分を全て削除します。

   <?php if(usces_sku_num() === 1) : usces_have_skus(); ?>
    
   ～ 中略 ～
    
   <?php elseif(usces_sku_num() > 1) : usces_have_skus(); ?>
    
   ～ 中略 ～
    
   <?php endif; ?>

2. 「usces_the_item()」の下に「usces_have_skus()」を追記します。

   <?php usces_the_item(); ?>
   <?php usces_have_skus(); ?>

3. 「id="skuform"」の付与

formタグの直下にあるdivタグに「id="skuform"」を付与します。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform" class="skuform" align="right">
 
～ 中略 ～
 
</div>
</form>

4. プルダウン・ラジオボタン形式のSKU表示

SKUをプルダウンやラジオボタンを表示するための関数「wcex_sku_select_form()」を記述します。
この関数は必ずid="skuform"を付与したタグの中に記述してください。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform" class="skuform" align="right">
<?php wcex_sku_select_form(); ?>
 
～ 中略 ～
 
</div>
</form>

5. 価格部分の修正

通常価格をくくるタグに「class="ss_cprice"」・販売価格をくくるタグに「class="ss_price"」をそれぞれ付与してください。
商品詳細ページにて、プルダウン・ラジオボタンの値を変更した時に価格を切り替えるために必要なクラス名になります。

<?php if( usces_the_itemCprice('return') > 0 ) : ?>
	
<?php _e('List price', 'usces'); ?><?php usces_guid_tax(); ?>
	
<?php usces_the_itemCpriceCr(); ?>
<?php endif; ?>
	
<?php _e('selling price', 'usces'); ?><?php usces_guid_tax(); ?>
	
<?php usces_the_itemPriceCr(); ?>

6. 在庫状態の修正

在庫状態はusces_the_itemZaikoStatus()という関数と、usces_get_itemZaiko('name')という関数で出力している箇所があるので、それぞれに「class="ss_stockstatus"」を割り当てます。
ss_stockstatusクラスは在庫状態を切り替え得るために必要なクラスです。

<?php _e('stock status', 'usces'); ?> : <?php usces_the_itemZaikoStatus(); ?>

<?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?>

7. カートボタンの修正

「usces_have_zaiko()」関数を使って在庫がある場合はカートを表示、在庫がない場合はカートボタンを表示させず売り切れ表示している記述箇所を修正します。

SKU Select商品の場合は、在庫有り・無しの切り替えをJavaScriptで切り替えることになるので、灰色の部分の条件分岐を削除します。

そして、在庫がない場合に表示する要素を囲っているタグには「class="itemsoldout"」を付与し、在庫有りの場合に表示する要素を囲っているタグには「class="c-box"」を付与します。

<?php if( !usces_have_zaiko() ) : ?>
     
<?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?>
<?php else : ?>
     <div style="margin-top:10px" class="c-box"><?php _e('Quantity', 'usces'); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__('Add to Shopping Cart', 'usces'), 0); ?></div>
     <div class="error_message"><?php usces_singleitem_error_message($post->ID, usces_the_itemSku('return')); ?></div>
<?php endif; ?>

8. loading画像の設置

「id="skuform"」を付与したタグの中に記述すると、価格などを切り替えている際にloading画像が表示されます。
「wcex_sku_select_form()」タグのすぐ後ろなどがわかりやすいかと思われます。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform" class="skuform" align="right">
<?php wcex_sku_select_form(); ?>

 
～ 中略 ～
 
</div>
</form>

1. SKU Select用のカスタマイズを追加

これまで定期購入の箇所を表示していた「wcad_filter_item_single_regular」を利用してカスタマイズしていた関数をそのままコピーし、フィルターフック名と関数名を修正してください。

※「wcad_filter_item_single_regular」フックを使ってカスタマイズしている箇所は残しておく

add_action( 'wcex_sku_select_filter_single_item_autodelivery', 'my_sku_select_autodelivery' );
function my_sku_select_autodelivery(){
 
～ 中略 ～
 
}

2. 単一SKUと複数SKUの表示を統一

単一SKUと複数SKUで表示を分けている場合は統一します。

1. 下記の灰色の部分を全て削除します。

   if( usces_sku_num() === 1 ) : 
   	if( usces_have_zaiko() ) : 
    
   ～ 中略 ～
    
   	endif;
   elseif( usces_sku_num() > 1 ) : 
   	if( usces_have_zaiko_anyone( $post->ID ) ) : 
   		usces_the_item();
    
   ～ 中略 ～
    
   	endif;
   endif;

2. 上記の「if( usces_have_zaiko() ) : 」を変更します。

   if( usces_have_zaiko_anyone( $post->ID ) ) :
   	usces_the_item();
   endif;
   

3. 「id="skuform_regular"」の付与

formタグの直下にあるdivタグに「id="skuform_regular"」を付与します。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform_regular" class="skuform" align="right">
 
～ 中略 ～
 
</div>
</form>

4.　プルダウン・ラジオボタン形式のSKU表示

SKU Selectのプルダウンや・ラジオボタンを表示するための関数wcex_auto_delivery_sku_select_form()を記述します。
この関数は必ずid="skuform_regular"を付与したタグの中に記述してください。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform" class="skuform" align="right">
<?php wcex_auto_delivery_sku_select_form(); ?>
 
～ 中略 ～
 
</div>

5. 価格部分の修正

定期購入の販売価格をくくるタグに「class="ss_price_regular"」を付与してください。
商品詳細ページにて、プルダウン・ラジオボタンの値を変更した時に価格を切り替えるために必要なクラス名になります。

	
<?php _e('regular purchase price', 'autodelivery'); ?><?php usces_guid_tax(); ?>
	
<?php wcad_the_itemPriceCr(); ?>

6. 在庫状態の修正

在庫状態をくくるタグに「class="ss_stockstatus_regular"」を付与してください。
商品詳細ページにて、プルダウン・ラジオボタンの値を変更した時に在庫状態を切り替え得るために必要なクラス名になります。

<?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?>

7. カートボタンの修正

在庫がない場合に表示する要素を囲っているタグには「class="itemsoldout"」を付与し、在庫有りの場合に表示する要素を囲っているタグには「class="c-box"」を付与します。

<?php echo apply_filters('usces_filters_single_sku_zaiko_message', esc_html(usces_get_itemZaiko( 'name' ))); ?>
<?php _e('Quantity', 'usces'); ?><?php wcad_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php wcad_the_itemSkuButton(__('Apply for a regular purchase', 'autodelivery'), 0); ?>
<?php usces_singleitem_error_message($post->ID, usces_the_itemSku('return')); ?>

8. loading画像の設置

「id="skuform"」を付与したタグの中に記述すると、価格などを切り替えている際にloading画像が表示されます。
「wcex_sku_select_form()」タグのすぐ後ろなどがわかりやすいかと思われます。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php usces_the_itemGpExp(); ?>
<div id="skuform" class="skuform" align="right">
<?php wcex_sku_select_form(); ?>

 
～ 中略 ～
 
</div>
</form>