WooCommerceボタンの色を変更するには、ボタンのデフォルトのstyle.cssファイルを変更または置換する必要があります。 これを行うには、を追加する必要があります カスタムCSSコード 私たちに 子供のWordPressテーマ.

これを行うにはXNUMXつの方法があります。

• カスタムCSSを子テーマstyle.cssファイルに追加します
• いくつかのプラグインを使用して、カスタムCSSコードをWebページに挿入します。

1ステップ：WordPressのシンプルなカスタムCSS上のプラグインをインストールし、それを活性化させます

使用します WordPressのプラグイン のページに CSS コードを挿入します。 WooCommerceオンラインショップ。 プラグインをダウンロードできます： 単純なカスタムCSS

チュートリアルを読むことができます WordPressプラグインのインストールとアクティベーション.

プラグインをアクティブ化すると、新しいサブメニューがメニューに追加されます apparence :

このセクションにアクセスすると、カスタムCSSコードを入力できるテキストボックスのあるインターフェイスに移動します。

次のCSSをテキストボックスに入力し、[ アップデートカスタムCSS"。

.woocommerce #content input.button.alt：ホバー、.woocommerce #respond入力＃のsubmit.alt：ホバー、.woocommerce a.button.alt：ホバー、.woocommerce button.button.alt：ホバー、.woocommerce input.button。 ALT：、.woocommerceページの#contentのinput.button.altを置く：ホバー、.woocommerceページの入力#respond＃のsubmit.alt：ホバー、.woocommerceページa.button.alt：ホバー、.woocommerceページボタンを。 button.alt：ホバー、.woocommerceページinput.button.alt：ホバー{背景：赤著しいです。 背景色：！赤重要。 ！色：白重要。 テキストの影：！透明重要。 ボックスシャドウ：なし。 ボーダーカラー：！#ca0606重要。 } .woocommerce #content Input.button：ホバー、.woocommerce #respond入力＃は提出：ホバー、.woocommerce a.button：ホバー、.woocommerce button.button：ホバー、.woocommerce input.button：ホバー、.woocommerceページ＃を幸せinput.button：ホバー、＃提出#respond .woocommerce-ページ入力：ホバー、.woocommerceページa.button：ホバー、.woocommerceページbutton.button：ホバー、.woocommerceページinput.button：ホバー{背景：赤の重要な;！ 背景色：！赤重要。 ！色：白重要。 テキストの影：！透明重要。 ボックスシャドウ：なし。 ボーダーカラー：！#ca0606重要。 } .woocommerce #content Input.button、.woocommerce #respond入力＃提出し、.woocommerce a.button、.woocommerce button.button、.woocommerce input.button、.woocommerceページの#contentのinput.button、.woocommerceページ＃ ＃入力は、.woocommerceページa.button、.woocommerceページbutton.button、.woocommerceページinput.buttonを応答提出{背景：赤著しいです。 ！色：白重要。 テキストの影：！透明重要。 ボーダーカラー：！#ca0606重要。 } .woocommerce #content Input.button.alt：ホバー、.woocommerce #respond入力＃のsubmit.alt：ホバー、.woocommerce a.button.alt：ホバー、.woocommerce button.button.alt：ホバー、.woocommerce input.button .ALT：、.woocommerceページの#contentのinput.button.altを置く：ホバー、.woocommerceページの入力#respond＃のsubmit.alt：ホバー、.woocommerceページa.button.alt：ホバー、.woocommerce-ページボタン.button.alt：ホバー、.woocommerceページinput.button.alt：ホバー{背景：赤著しいです。 ボックスシャドウ：なし。 テキストの影：！透明重要。 ！色：白重要。 ボーダーカラー：！#ca0606重要。 }

オンラインストアにアクセスできるようになりました。ボタンの色が実際に変更されていることがわかります。

ボタンの色をカスタマイズして、最終的に希望の外観にするには、

プロパティを置き換える " その背景：赤重要！ によって お好みの色。 コードを更新して、オンラインストアに再度アクセスしてください。 実際、今提供したスタイリングを使用すると、ボタンの構造を完全に変更することができます。

少し調べるだけで、自分に合ったスタイルのユニークなボタンを作成できます。 ワードプレスのテーマ (特に後者がWooCommerceと互換性がない場合).

次の例では、次のCSSコードを使用できます。

.woocommerce #content input.button、.woocommerce #respond入力＃提出し、.woocommerce a.button、.woocommerce button.button、.woocommerce input.button、.woocommerceページの#contentのinput.button、.woocommerceページ#respond ＃入力、.woocommerceページa.button、.woocommerceページbutton.button、.woocommerceページinput.button {背景色を提出：#6fba26と、 パディング：10px。 位置：相対; フォントファミリ：「オープンなき」、サンセリフ; フォントサイズ：12px。 テキスト装飾：なし; 色：#FFF; 背景画像：リニアグラジエント（底、RGB（100,170,30）0の％のRGB（129,212,51）100％）。 ボックスシャドウ：はめ込み0px 1px 0px #7F8EF1、0px 6px 0px #0D496F。 国境半径：5px。 } .woocommerce #content input.button.alt：ホバー、.woocommerce #respond入力＃1 submit.alt：ホバー、.woocommerce a.button.alt：ホバー、.woocommerce button.button.alt：ホバー、.woocommerce input.button .ALT：、.woocommerceページの#contentのinput.button.altを置く：ホバー、.woocommerceページの入力#respond＃のsubmit.alt：ホバー、.woocommerceページa.button.alt：ホバー、.woocommerce-ページボタン.button.alt：ホバー、.woocommerceページinput.button.alt：ホバー{トップ：7px。 背景画像：リニアグラジエント（底、RGB（100,170,30）100の％のRGB（129,212,51）0％）。 ボックスシャドウ：はめ込み0px 1px 0px #0D496F、はめ込み0px -1px 0px #0D496F。 色：#156785。 テキストの影：0px 1px 1pxのRGBA（255,255,255,0.3）。 背景：RGB（44,160,202）。 }

製品の変換または販売のいずれの観点からも、オンラインストアのパフォーマンスを最適化する場合は、

また、このタスク用に設計された3プレミアムWordPressプラグインも提供しています。

1。 WooCommerceは放棄されたカートを回復する

あなたの顧客 多くの場合、バスケットに入れて放置します。おかげで 見捨てられたカートを回復WooCommerce あなたは彼らに連絡し、彼らが購入したものを思い出させ、彼らの行動を完了するように彼らを招待することができます。

カートが放棄されてから、購入ページへの直接リンクを含むパーソナライズされたリマインダーメールが顧客に送信されて、顧客が何をしていたかを確認するまでの時間間隔を設定します購入するポイント。

ダウンロード | デモ | ウェブホスティング

2. WooCommerce価格を非表示にしてカートボタンプラグインに追加

WooCommerce Hide Priceプラグインを使用すると、マーチャントは複数のルールを作成して、価格を非表示にしたり、eコマースWebサイトへの特定のアクセス権を持つログインしていない顧客やユーザーから[カートに追加]ボタンを非表示にしたりできます。

特定の製品または特定のカテゴリで、価格と「カートに追加」ボタンを非表示にすることができます。 それらをカスタム テキストまたはボタンに置​​き換えることができます。  お問い合わせフォーム。 価格と価格を自動的に非表示にするルールをいくつでも作成できます。 パニエに追加r」あなたが望むものに応じて。

ダウンロード | デモ | ウェブホスティング

3。 WooCommerce通貨スイッチャ

このプラグインを使用すると、製品の価格をある通貨から別の通貨にリアルタイムで切り替えることができます。

これは全世界を対象としているため、eコマースでは特に重要です。 このプラグインにより、顧客がどこにいても、オンラインストアからいつでも注文できるようになります。

ダウンロード | デモ | ウェブホスティング

推奨リソース

あなたを助ける他の推奨リソースを発見してください オンラインストアのパフォーマンスを最適化します。 

• オンラインストアを向上させるために50 WooCommerceプラグイン
• アフィリエイトプログラムを作成するための9 WordPressプラグイン
• 9 WooCommerceのプラグインは、あなたの変数の製品の属性を強化する
• ブログのCSSを視覚的に編集するための5 WordPressプラグイン

まとめ

ここは ！ ボタンのカスタマイズ専用のこのチュートリアルは以上です。 カートに入れる WooCommerceから。 あなたの友人とそれを共有することを躊躇しないでください 社会的ネットワーク 好適。 

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...