このページでは、「Arkhe Wookit」の機能と使い方について解説していきます。
目次
Arkhe Wookit の主な機能
機能① : WooCommerce関連のデザインをArkheに合わせて調整
下記の項目に関して、Wookit側で調整を入れています。
- WooCommerceブロック・ウィジェットの調整
- 「商品リスト」系ブロック・ウィジェットの調整
- 「商品カテゴリーリスト」系のブロック・ウィジェットの調整
- 「商品検索」ブロック・ウィジェットの調整
- 「お買い物カゴ」ウィジェット(従来のウィジェット)の調整
- その他、各WooCommerceページのレイアウトや細部の調整
- 標準の商品リスト(
ul.products
)の調整 - 「お買い物カゴに追加」文言を「カートに追加」へ変更
('arkhe_wookit_add_to_cart_text'
フックでさらにカスタマイズできます)
- 商品リストのページネーションをArkheテーマと同じものと入れ替え
- 標準の商品リスト(
- …などなど
機能② : WooCommerceページ用のウィジェットエリアを追加
- 「 WooCommerce専用サイドバー」
機能③ : CSS変数にて、ボタンカラーなどを簡単にカスタマイズ可能に
- –ark-woo-color–price
-
商品価格のベースカラー
- –ark-woo-color–price–sale
-
セール時の商品価格のカラー
- –ark-woo-color–star
-
レビューの星アイコンのカラー
- –ark-woo-onsale–bg
-
標準の商品リストに表示されている「セール」テキストの背景色
(※ 商品リスト系ブロックに表示される「セール」には影響しません) - –ark-woo-btn-primary–bg
-
重要なボタン(標準で紫色の
.button.alt
)と、その他「カートに追加」系の重要な - –ark-woo-btn–padding
-
ボタンのpadding
- –ark-woo-fz–grid
-
.wc-block-grid
のベースフォントサイズ。 - –ark-woo-fz–grid_product
-
商品リスト系ブロック (
.wc-block-grid .wc-block-grid__product
) のフォントサイズ - –ark-woo-mb–items
-
商品リスト系ブロックの各表示項目間のマージン量