Welcart Square 1.0
ドキュメント
リンク

テーマカスタマイザー

Welcart Square は、Welcart Basic 同様「テーマカスタマイザ―機能」を利用することができます。ここでは、Welcart Square で追加されたオプション機能のみを解説しています。親テーマ Welcart Basic のオプション機能の解説は Welcart Basic ドキュメントをご覧ください。


テーマカスタマイザーは、管理画面 > 外観 > カスタマイズを選択してください。

拡張された機能

theme-customizer-mainテーマカスタマイザ―


サイト基本情報


対象のページ 全ページ

サイトタイトルをロゴ画像に変更することができます。
ロゴ画像が登録されていない場合は、サイトタイトルが表示されます。

管理画面フロント
logo-add logo-front

対象のページ 全ページ

チェックが入っている場合は、サイト上部に表示されます。

管理画面フロント
catchphrase-add catchphrase-front

対象のページ 全ページ

各SNSの設定を行なうことで、ヘッダーエリアにアイコンマークを表示させる事ができます。
こちらは指定したリンク先ページを表示させる機能になります。


Facebookの表示 : 表示する場合はチェックを入れFacebookページ名を入力してください。

【例】https://www.facebook.com/page-name/

管理画面フロント
Facebook-add Facebook-front

Twitterの表示 : 表示する場合はチェックを入れユーザー名を入力してください。

【例】https://twitter.com/user-name/

管理画面フロント
Twitter-add Twitter-front

Instagramの表示 : 表示する場合はチェックを入れユーザー名を入力してください。

【例】https://www.instagram.com/user-name/

管理画面フロント
Instagram-add Instagram-front

背景画像

custom-background-add




サイト全体の背景に背景画像を指定することができます。
※デフォルトでは既に背景画像が適用されております。

フロント
custom-bg-before custom-bg-after

サイトカラーやテキスト、テキストリンク、ボタンなどの色を設定することが出来ます。

custom-color-add



サイト全体の背景色を設定することができます。デフォルトでは「背景画像」が適用されているので背景色は無効になっております。背景色の設定を行なう場合は「背景画像」からデフォルト画像を削除した後、背景色の設定を行なって下さい。

フロント
custom-color-before custom-color-after


サイトの軸となる色を設定することができます。サイト全体の縁、サイトタイトル、ページタイトル、グローバルナビゲーションなどに適用されます。

フロント
custom-main-color-before custom-main-color-after


タブレットとスマホで閲覧した際の、ヘッダーのサイトタイトル・メニューアイコン・カートアイコンの色を設定することができます。
※PCで設定を行なう場合は、ブラウザサイズをスマホまたはタブレットサイズまで縮小して設定を行なって下さい。

フロント
header-color-before デフォルト after サイトカラー


サイトのメインとなるテキスト色を設定することができます。記事本文や商品詳細本文などに適用されます。

フロント
main-text-before main-text-after


記事ページの「投稿日」や「著者」、商品詳細ページの「商品コード」や「通常価格」などに適用されます。

フロント
sub-text-before sub-text-after


ページタイトルの色を設定してください。
※投稿記事・固定ページ以外のページタイトルに適用されます。

フロント
page-title-before page-title-after


商品詳細ページの「販売価格」に適用されます。
※トップページや商品一覧ページなど、各グリッド内の価格には適用されません。

フロント
デフォルト before 価格テキスト デフォルト after 価格テキスト


テキストリンクの色を設定することができます。

フロント
text-link-before text-link-after


フッターの色を設定してください。フッターナビ、SNSアイコン、コピーライトに適用されます。

フロント
footer-before footer-after


カートボタンの色を設定することができます。

フロント
cart-btn-before cart-btn-after


商品売り切れ時、お問い合わせボタンを表示させる場合にのみ有効となります。

フロント
contact-btn-before contact-btn-after


ログインボタンや更新ボタンなどのメインボタンの色を設定することができます。

フロント
main-btn-before main-btn-after


カートページの「買い物を続ける」や「戻る」などのサブボタンの色を設定することができます。

フロント
sub-btn-before sub-btn-after


カートページの「数量更新」ボタンや「ポイントを使用する」ボタンなどの色を設定することができます。

フロント
other-btn-before other-btn-after


商品タグの各色を設定することができます。
「商品タグ」を表示させる場合にのみ有効となります。

フロント
product-tag-color-before product-tag-color-after

テーマオプション

テーマオプションは、ページごとに設定できるオプションが異なります。カテゴリーページや商品詳細ページなど、設定したい対象のページを見ながらオプションを設定してください。



対象のページ トップページ

トップページの「商品」と「投稿記事」を混ぜて表示させてる並び順を「投稿ID順」「投稿日順」「ランダム」のいずれかに設定することができます。※デフォルトは「投稿ID順」

管理画面フロント
list-add list-front

対象のページ トップ / カテゴリー / 検索結果 ページ

SOLD OUTを表示する
商品の在庫数が0もしくは、在庫状態が「売り切れ」になっている場合、商品サムネイル上に SOLD OUT を表示します。複数SKUが有る場合は、全てのSKUが売り切れとなった時に SOLD OUT が表示されます。

管理画面フロント
soldout-add soldout-front

お問い合わせテキストを表示
SOLD OUT の下にメッセージを表示することができます。

お問い合わせテキストを表示する場合は、メッセージを入力してください。
初期状態は「この商品へのお問い合わせ」になります。

管理画面フロント
contact-text-add contact-text-front

商品タグを表示する
グリッド内に商品タグを表示することができます。このタグは、商品一覧のグリッド内と、商品詳細ページにも同じように表示されます。

※表示項目は New Hot Low sale の4種類になります。
new / 商品カテゴリー「新着商品(itemnew)」が適用されている商品に表示されます。

hot / 商品カテゴリー「お勧め商品(itemreco)」が適用されている商品に表示されます。

Low / 在庫状態が「在庫僅少」になっている場合に表示されます。SKUが複数ある場合は、一つでも在庫僅少のものが有ればこのタブが表示されます。

sale / セール(キャンペーン)期間中の対象商品に表示されます。

※セール(キャンペーン)対象商品の設定については、こちらをご覧ください。
※キャンペーン・スケジュールの設定は、こちらをご覧ください。

管理画面フロント
product-tag-add option-tag-front

対象のページ トップページ

インフォメーションの表示
トップページにインフォメーション記事を表示することができます。

管理画面フロント
display-info-add display-info-before

インフォメーションカテゴリー
表示するカテゴリーを選択してください。

※対象カテゴリーは、商品カテゴリー以外のカテゴリーになります。

管理画面 > 新規カテゴリー追加画面から商品カテゴリー以外の場所にカテゴリーを追加してください。
カテゴリーに記事が登録されていない場合、セレクトボックスの選択項目には表示されません。
あらかじめ記事にカテゴリーを適用させておいてください。

管理画面フロント
information-category-add information-category-before

表示件数
表示する件数を選択してください。

管理画面
square-customizer-17-add

対象のページ 商品一覧(カテゴリー) ページ

画像の上に表示する : チェックが入っている場合は、キービジュアル画像の上に「カテゴリー名」と「説明」を表示します。また、キービジュアルの上には透過フレームが表示されます。
チェックが入っていない場合は、透過フレームが消え「カテゴリー名」と「説明」はキービジュアルの下に配置されます。

管理画面フロント
category-name-position1-add category-img-pt1
管理画面フロント
category-name-position2-add category-img-pt2

対象のページ 商品詳細ページ

カート投入ボタンのラベルを変更することができます。初期状態は「カートに入れる」になっています。

管理画面フロント
cart-btn-text-add cart-btn-text-front

対象のページ 商品詳細ページ

お問い合わせボタン表示する
カート投入ボタンは通常、売り切れになるとボタンが消え「只今お取り扱いできません」というメッセージが表示されます。このオプションを適用すると、メッセージでは無くお問い合わせボタンを表示することができます。

問い合わせボタンを表示する場合は、セレクトボックスからリンク先の固定ページを選択してください。

管理画面フロント
contact-btn-add contact-btn-front

Contact Form 7 との連携

お問い合わせボタンのリンク先を、Contact Form 7 で作成したお問い合わせページに設定することで、お問い合わせボタンから問い合わせいただいたメールに限り「商品名」が自動的にメール本文に追加される仕様になっております。

contactform-mail


Contact Form 7 とは

Contact Form 7 プラグインとは、サイトを観覧されているユーザーがお問い合わせを行なう場合に使用するメールフォームを簡単に作成できるプラグインです。使い方はこちらを参照ください。


対象のページ 商品詳細ページ

商品レビューを表示する
商品レビュー機能を有効にすると、レビューの受付・表示ができる様になります。

管理画面フロント
reveiw-add review-front

商品レビュー機能について

商品レビュー機能は、会員にログインしている場合にのみレビューを書きこむことができる様になります。会員システムを利用していないサイトでは、レビュー機能はご利用いただけません。以下の手順に沿って設定ください。


no,1ディスカッション設定

レビュー機能は、WordPress コメント機能を利用しています。レビュー機能を使用する場合は、管理画面「設定」のディスカッション画面より、コメントに関する設定を行なう必要があります。

管理画面 > 設定 > ディスカッション設定

以下を参考に設定ください。

他のコメント設定
項目 説明
コメントの投稿者の名前とメールアドレスの入力を必須にする レビュー機能では、名前とメールアドレスを入力する箇所はございませんので、チェックを外してください。チェックした状態でレビューを送信するとエラーが発生します。
ユーザー登録してログインしたユーザーのみコメントをつけられるようにする こちらのユーザーに関しては、Welcart会員の事ではございませんので、チェックを外してください。

no,2商品情報編集画面 / 新規商品追加画面

item-page

商品情報編集画面または新規商品追加画面から、ディスカッションボックス「コメントの投稿を許可する。」にチェックを入れてください。
※ディスカッションボックスが表示されていない場合は、画面右上の「表示オプション」から「ディスカッション」にチェックを入れてください。

no,3テーマカスタマイザ―

最後に、テーマカスタマイザ―から商品詳細ページを表示して「テーマオプション」メニューの「商品レビューを表示する」にチェックを入れてください。


レビュー機能の表示画面について

テーマカスタマイザーのプレビュー画面では、レビュー機能を正常に確認することができません。実際のレビュー機能の表示画面を確認する場合は、WordPressの管理画面をログアウトして、フロントの方でご確認ください。


管理者のニックネームを変更したい場合

レビュー欄のユーザー名をニックネームに変更する場合は、

管理画面 > ユーザー

から編集画面に入っていただき、「ブログ上の表示名」をニックネームに変更してください。


対象のページ カートページ

カートページに表示される「買い物を続ける」ボタンは、通常商品詳細ページへのリンクとなっています。このリンク先を自由にに変更することができます。

「リンク先を変更する」にチェックを入れ、「リンク先のURL」に遷移先のURLを http:// から入力してください。URLが空白だった場合トップページへ遷移します。

管理画面
cart-page-link-add