WooCommerceのストライプカード決済<お支払い画面でカードアイコンの追加>

ワードプレスのWooCommerceを使用のサイトで、プラグイン「woocommerce-gateway-stripe」を使用の場合デフォルトでは、「VISA」「アメックス」「マスターカード」の3種類のカードロゴが表示されます。

そこに「JCB」「ダイナース」「ディスカバリー」のカードロゴを追加する方法。

「woocommerce-gateway-stripe」でカードロゴを追加

カードロゴ画像はすでに「assets」→「images」内に18個ほど用意されています。「JCB」「ダイナース」「ディスカバリー」のありますので画像を用意する必要はありません。

編集するのはプラグイン「woocommerce-gateway-stripe」の「includes」フォルダ内の「class-wc-gateway-stripe.php」

今回の作業内容は「VISA」「アメックス」「マスターカード」を以下のように並び順変更し、新しいロゴも追加します。

「VISA」「マスターカード」「アメックス」+「JCB」「ダイナース」「ディスカバリー」

FTPでファイルをダウンロードして直接編集か、プラグインエディターから編集するかは好みで。

編集する部分は200行目当たりの・・・

	public function get_icon() {
		$icons = $this->payment_icons();

		$icons_str = '';

		$icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';
		$icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';
		$icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';

		if ( 'USD' === get_woocommerce_currency() ) {
			$icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : '';
			$icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : '';
			$icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : '';
		}

ここを下記に書き換えます。

	public function get_icon() {
		$icons = $this->payment_icons();

		$icons_str = '';

		$icons_str .= isset( $icons['visa'] ) ? $icons['visa'] : '';
		$icons_str .= isset( $icons['mastercard'] ) ? $icons['mastercard'] : '';
		$icons_str .= isset( $icons['amex'] ) ? $icons['amex'] : '';
		$icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : '';
		$icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : '';
		$icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : '';
		
		if ( 'USD' === get_woocommerce_currency() ) {
			$icons_str .= isset( $icons['discover'] ) ? $icons['discover'] : '';
			$icons_str .= isset( $icons['jcb'] ) ? $icons['jcb'] : '';
			$icons_str .= isset( $icons['diners'] ) ? $icons['diners'] : '';
		}

以上で作業は終了です。

テーマ「E-Commerce」使用で縦並びを横並び

テーマ「E-Commerce」を利用している場合カードロゴは700px以下で縦並びになります。横並びを維持したい場合は追加CSSに下記を追加します。

@media screen and (max-width: 700px) {
img, .alignleft, .alignright, .footer-col {
    display: inline-block;
}
}

修正のときはバックアップを忘れずに!

コメント

タイトルとURLをコピーしました