WooCommerceの商品タイトルデザインを修正



WordPressにそのままECショップを開ける!WooCommerceを採用してみました。

ショップを一斉リニューアルしました。
今まではWordpressサイトから外部サービスで作ったショップサイトに飛ばしていたのですが、ずっと自分の中で抵抗があったんですよね。

本格的なECサイト運営者ならショップサイトを専門運営してよいと思うのですが、私はプロダクトを自サイトでも販売しようかな程度で商品数も少ないので、わざわざ外部サイトというのも…なんて思っていました。

そこで最近知ったWooCommerceの利用です。
これはWordpressプラグインで、Wordpress内でショップを持てるというものです。
今まで運営していたWordpress上でショップを開けるので、まさに私のような外部サイトを使いたくない人間にピッタリです!

他のブログを見ると、WooCommerceプラグインを入れて、SroreFrontという標準テンプレートを入れて、最初からECサイトを運営するていで紹介されています。
もちろんそれも良いのですが、今までのサイトとそのテンプレートのまま、ECショップを入れられるかどうかがわからず…。

わからないのでとりあえずやってみようとWooCommerceプラグインを入れてみたら、SroreFrontテンプレートを入れず、今までの自分のテンプレートのままショップ追加ができました!

導入手順

すみません、丁寧に手順を書いている暇がないので、ざっくり概要だけ。

  • WooCommerceプラグインを入れ、有効化する。
  • 指示された項目を淡々と埋めていく(日本語対応なので、問題ないと思います)。
  • 途中でSroreFrontテンプレートを入れるかのチェックボックスが出てくるので、そこのチェックボックスを外す

これをすると、自動的にショップページ、カートページ、マイアカウントページ、購入手続きページが生成されます。

商品を登録して、選んだ決済システム(私はStripe)のアカウント手続きも終わらせれば晴れてショップが完成です。
1時間くらいで全部終わったかな。
すごく簡単です。

デザイン修正

簡単なショップなのでほぼほぼ初期のままで良いのですが、一部修正を行いました。

  • カテゴリ別に商品を並べる
  • タイトルの背景画像を消したい

カテゴリ別に商品を並べる件については
[product_category category=”カテゴリ名”]
のショートコードを載せていけばOKです。

WooCommerseショートコード参考サイト

WooCommerce(ウーコマース)では、画像付きの商品リストを表示させるショートコードが標準で用意されています。今回はそのショートコードについて、よく使いそうなもの...

タイトルの背景画像は、デフォルトでこんなんなってしまいまして。

うちで使ってるH2のタイトル背景画像が出てきてしまっています。
これを変えるには、CSSにwoocommerse専用のスタイルを定義して…
めんどくさい…

というわけで、functionsPHPで一括変換してしまいましょう。

外観→テーマの編集→functions.phpを選択します。

下記のコードを入れてください。

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 ); add_action('woocommerce_shop_loop_item_title', 'abChangeProductsTitle', 10 ); function abChangeProductsTitle() { echo '
<h4 class="woocommerce-loop-product_title">' . get_the_title() . '</h4>

'; }

うちはh4を最もシンプルなものにしてあるので、h4にしてありますが、ここは皆様自身のテンプレートで適切なデザインのものに合わせてください。

これで、商品タイトルが修正されました。

あとはガシガシデザイン修正していけばOKです。

その他、良さそうな設定関係がこちらのサイトにありましたので、参考に貼っておきますね。

小さなショップなのでコストをかけたくない 小さなネットショップを開設することになりました。非常に小さいので売上…

シェアする

  • このエントリーをはてなブックマークに追加

関連記事

  1. RGB値の記載箇所を図示
  2. Pz-LinkCardでブログカード、ちょうどよい表示
  3. BlueMail設定 アカウントが追加された様子
  4. Ustream配信開始
  5. アフィリエイトサイトの構成図
  6. materialize用HTMLを表示した様子、Windowが大きい場合

コメントをお待ちしております

Rippoutai管理人


モノづくり起業を応援するRippoutai管理人、電気女子の顔写真です


電気女子(はまこ)

ワーキングマザーをしながら、サイドビジネスで小型電子モジュールの製造・販売をしています。
クラウドファンディングで1000%支援達成の実績あり。

モノづくり副業応援!
山梨起業応援!

アーカイブ