WooCommerce 対応の DigiPress テーマには WooCommerce 用のテンプレートが付属し、WooCommerce が制御するページが表示される場合は、自動的に WooCommerce 用のテンプレートが適用されますが、CSS 自体は WooCommerce のスタイリングが適用され、さらに DigiPress の CSS が反映されるため、独自の HTML 構造で出力する WooCommerce のコンテンツは、テーマのスタイリングには必ずしもマッチせず、レイアウトが崩れたり、違和感のあるデザインになってしまいます。

本プラグインでは、このレイアウト崩れやあらゆるデザインの不一致を正規化し、DigiPress テーマのデザインに合うよう自動的にスタイリングを最適化し、WooCommerce による ECサイトとしてのユーザビリティをデザイン面で強力にバックアップします。

WooCommerce には、例えば 最新商品や評価の高い記事一覧や、カート内容など、いくつかのウィジェットが標準で搭載されていますが、規定では WooCommerce の独自の CSS が適用されるため、テーマのデザインと一致せず、場合によってはレイアウトが崩れるなど、非常に中途半端なスタイリングになってしまいます。

この WooCommerce 標準ウィジェットについても、本プラグインによってデザインを最適化することができます。

WooCommerce の標準ウィジェットのうち、商品一覧を表示する類のウィジェットについては、同じウィジェットでも DigiPress テーマ内で表示する箇所(サイドバー、コンテナエリア(固定幅またはフルワイド)、メインコンテンツ)に合わせて、自動的にレイアウトを変更します。

エリア別の同一ウィジェットによるレイアウトの違いは以下をご覧ください。

WooCommerce の規定のCSSのでは、テーブルなどのボーダー、ボタン、価格、SALE ラベル、評価マーク(★)などのカラーは、固定の配色で定義されています。
このため、DigiPress のテーマオプションにて設定されている配色とは連動しないため、WooCommerce のコンテンツだけサイトのカラーイメージとは異なった違和感のあるものになってしまいます。

例えば、ウェブページの背景全体がブラック、フォントカラーはホワイトを基調にしたサイトの場合、WooCommerce のコンテンツはボーダー(グレー)がほとんど見えなくなってしまったり、WooCommerce　のボタンのみ紫色で、他のページのボタンカラーとは異なり浮いた要素に見えてしまいます。

しかし、本プラグインを利用することで、これらの WooCommerce が出力するコンテンツの配色を、DigiPress のテーマオプションに設定されている配色と自動的に連動させることができます。

WooCommerce の商品登録ページにて割引価格を設定すると、WooCommerce では自動的に円形の SALE ラベルが商品サムネイル上に表示されます。

本プラグインでは、プラグインオプションから、この SALE　ラベルの形状を「円形」以外に「四角形」、「四角形(角丸)」、「三角形」から選び、規定の形状を簡単に変更できます。

本プラグインを有効にするだけで、WooCommerce 側で固定されているボタン、SALE ラベル、価格、評価マーク(★)のカラーは、DigiPress テーマオプションのアクセントカラー、セカンダリーカラーなどに自動的に置換されますが、プラグインオプションからこれらのカラーは個別に指定することもできます。

カートに商品が追加されている場合、ウェブページの端にカート情報(商品数、合計価格)を簡易表示する、レスポンシブ表示にも対応したフローティングボックスを表示できます。

フローティングボックスは、プラグインオプションから画面上の表示位置を４箇所(右上、右下、左上、左下)から指定できます。
さらに、表示有無と表示対象ページ(すべてのページ または WooCommerce で表示されるページのみ)を制御することもできます。

WooCommerce の商品一覧に表示される「カートに追加」ボタンを、WooCommerce　のサードパーティプラグインによって追加されるボタンも含めて水平に並べ、デザインに統一性を持たせるスタイルに変更できます。

この機能で、商品一覧に表示されるボタンを整列する WooCommerce 用のサードパーティプラグインは以下です。

WooCommerce には、無数のプラグインが提供されていますが、本プラグインでは以下のプラグインによるコンテンツに対して、WooCommerce 同様にレイアウト崩れを防ぎ、スタイリングを調整して DigiPress テーマでの表示を最適化するよう設計されています。