WordPressでECサイトを組むときに使うのがWelcartというプラグインを使います。このプラグインはカード決済や色々な設定ができて凄い重宝します。WordPresでECサイトを作るには欠かせないプラグインだと思います。今回はデフォルトの設定から少しだけ変更してみます。

カートに入れるボタンを画像に変えたい

welcartはECサイトを作る上では欠かせないプラグインですが、微妙にカートのあたりで不親切なところがあります。その一つがカートに入れるボタンです。カートに入れるボタンはHTMLでデフォルトのサブミットが表示されます。個人的にこれは画像に変えたいと思いましたので変えて見たいと思います。

Yahoo知恵袋さん！

Yahoo知恵袋にWelcartの質問がありました。Welcartの「カートに入れる」ボタンを画像にする方法を御存知の方がいらっしゃった...という内容です。内容は下記の通りになります。

wp-content/plugins/usc-e-shop/functions/template_func.php

の617行目の inputタグの部分
<input name=\"inCart[{$post_id}][{$enc_sku}]\" type=\"submit\" id=\"inCart[{$post_id}][{$enc_sku}]\" class=\"skubutton\" value=\"{$value}\" " . apply_filters('usces_filter_direct_intocart_button', NULL, $post_id, $sku, $force, $options) . " />
を
<input name=\"inCart[{$post_id}][{$enc_sku}]\" type=\"image\" src=\"画像へのパス\" id=\"inCart[{$post_id}][{$enc_sku}]\" class=\"skubutton\" value=\"{$value}\" " . apply_filters('usces_filter_direct_intocart_button', NULL, $post_id, $sku, $force, $options) . " />

さすがYahoo知恵袋！ソースの回答も載っていました。助かります。早速書き換えてみました。

・・・画像にならない！！

僕が嫌われているのか残念ながらなりませんでした。2013年の回答なのできっと仕様が変わったのかもしれません。

ソースの変更箇所が違った

ソースを見て見ると、設定するファイルはあっているのですがどうやら修正箇所が違うみたいでした。正しい修正箇所は以下の通りでした。

		$type = 'submit';

	$html = "<input name=\"zaikonum[{$post_id}][{$sku}]\" type=\"hidden\" id=\"zaikonum[{$post_id}][{$sku}]\" value=\"{$zaikonum}\" />\n";
	$html .= "<input name=\"zaiko[{$post_id}][{$sku}]\" type=\"hidden\" id=\"zaiko[{$post_id}][{$sku}]\" value=\"{$zaiko_status}\" />\n";
	$html .= "<input name=\"gptekiyo[{$post_id}][{$sku}]\" type=\"hidden\" id=\"gptekiyo[{$post_id}][{$sku}]\" value=\"{$gptekiyo}\" />\n";
	$html .= "<input name=\"skuPrice[{$post_id}][{$sku}]\" type=\"hidden\" id=\"skuPrice[{$post_id}][{$sku}]\" value=\"{$skuPrice}\" />\n";
	if( $usces->use_js ){
		$html .= "<input name=\"inCart[{$post_id}][{$sku}]\" type=\"{$type}\"  id=\"inCart[{$post_id}][{$sku}]\" class=\"skubutton\" value=\"{$value}\" onclick=\"return uscesCart.intoCart('{$post_id}','{$sku}')\" />";
	}else{
		$html .= "<a name=\"cart_button\"></a><input name=\"inCart[{$post_id}][{$sku}]\" type=\"{$type}\" id=\"inCart[{$post_id}][{$sku}]\" class=\"skubutton\" value=\"{$value}\" />";
	}

ここでした。ここを書き換えました。

		//$type = 'submit';
		$type = 'image';

	$html = "<input name=\"zaikonum[{$post_id}][{$sku}]\" type=\"hidden\" id=\"zaikonum[{$post_id}][{$sku}]\" value=\"{$zaikonum}\" />\n";
	$html .= "<input name=\"zaiko[{$post_id}][{$sku}]\" type=\"hidden\" id=\"zaiko[{$post_id}][{$sku}]\" value=\"{$zaiko_status}\" />\n";
	$html .= "<input name=\"gptekiyo[{$post_id}][{$sku}]\" type=\"hidden\" id=\"gptekiyo[{$post_id}][{$sku}]\" value=\"{$gptekiyo}\" />\n";
	$html .= "<input name=\"skuPrice[{$post_id}][{$sku}]\" type=\"hidden\" id=\"skuPrice[{$post_id}][{$sku}]\" value=\"{$skuPrice}\" />\n";
	if( $usces->use_js ){
		$html .= "<input name=\"inCart[{$post_id}][{$sku}]\" type=\"{$type}\" src=\"画像のパス\" id=\"inCart[{$post_id}][{$sku}]\" class=\"skubutton\" value=\"{$value}\" onclick=\"return uscesCart.intoCart('{$post_id}','{$sku}')\" />";
	}else{
		$html .= "<a name=\"cart_button\"></a><input name=\"inCart[{$post_id}][{$sku}]\" type=\"{$type}\" src=\"画像のパス\" id=\"inCart[{$post_id}][{$sku}]\" class=\"skubutton\" value=\"{$value}\" />";
	}

このようにしました。581行目を変更すれば画像に書き換わります。