DivXのWooCommerce製品にテキストを追加する方法

パー ブレアJersyer | Divi, WordPressのチュートリアル

前のチュートリアルでは、 あなたはディビを紹介しました. 知らない人のために、Diviは ワードプレスのテーマ チームがデザインしたプレミアム エレガントなテーマ WordPressでさまざまなサービスを提供し、プラグインとテーマを設計します。

Divi はレスポンシブ テーマであり、後者は他のいくつかのプラグインと互換性があります。 WooCommerce. 今日は、製品に別のアニメーションを付ける方法を紹介します WooCommerce.

時々のスタイル WooCommerce 特に CSS スタイルが少し異なる場合は、少し不十分かもしれません。 このチュートリアルは少し技術的になります (少しのCSSのみ）、これを修正することができます。

Diviテーマに関するその他のチュートリアル

のは、始めましょう。

woocommerce製品に画像を追加する方法

マウスオーバーしたテキストのアイコンの変更

デフォルトでは、DiviでWooCommerceを使用して製品にカーソルを合わせると、フォントである小さな「+」アイコンが表示されます（メイクアイコン）Diviによって提案され、次のとおりです。

デフォルトのwoocommerceアイコン

設定で別のアイコンに変更するのは本当に簡単ですが、テキストを追加したい場合は、それは別のことですか？ 今日のCSSスニペットを使用してこれを実現する方法を示します。また、サイトに追加するオプションのコードも含めます。

完了したら次のようになります。

Wordpress製品の変更の最終結果

とにかくアイコンの代わりにテキストを使用するのはなぜですか？

これを可能にするいくつかの理由を考えることができます。

ショップにユニークな外観を与えることを定義するには： Divi / WooCommerceサイトを別のサイトと区別するためにできることは、常に良いことです。

「表示」や「購入」などの単語を使用すると、コンバージョンが増える可能性があります：誰もが自分のウェブサイトに最適なことをする必要があり、それを支援するためにDiviの統合A / Bテストを利用できます。

インスピレーションの源

私は最近、商品がホバリングしているというテキストが掲載されているサイトを閲覧しました。 もちろん、製品の上にアイコンではなく文字が表示されている他の e コマース サイトを見たことがあるので、これは新しいコンセプトではありませんでした。 私はこれをする必要はありませんでした Diviテーマ、そしてこれを見たとき、私は自分自身に挑戦し、これを実装するのは本当に簡単だと気づきました. コードがほとんど必要ないため、ブログのパフォーマンスに影響を与えることはありません。

ウェブサイトの例

テキストの上にマウスを実装する

ステップ1：カラーオーバーレイ

まず、ホバーのホバーオーバーレイの色を変更します。 これはDiviで非常に簡単に行えます。 ストアモジュールで、「 高度な高度な設計パラメーター そして、あなたの色を選択します。

ディビカラーの選択

ステップ2：CSSの追加

「」の次のCSSコード テーマオプション>カスタムCSS または、子テーマのスタイルシート上。

.woocommerce .et_overlay：before {left：0; マージン左：0; 内容：「表示」; / ***テキストをここに*** / font-family： 'Source Without Pro'、Arial！ / ***フォントを選択してください*** / text-transform：uppercase; フォントサイズ：24px; 色：#fff; / ***テキストの色を設定*** / font-weight：bold; text-align：center; 幅：100％; パディング：5px 0; }

製品を丸くしたい場合は、次のオプションのコードを追加できます。

.woocommerce ul.products li.product A IMG、.et_overlay {ボーダー半径：50％以下; }

それはそれです！

これで、ストアにアクセスして、変更がどのように考慮されるかを確認できます。

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "＃18b69d" custom_hover_background = "＃118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"] DIVIテーマをダウンロード[/ vcex_button] [/ width_column] [»vc_column] [» vc_column] 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700″ style = "flat" custom_background = "＃c4226e" custom_hover_background = "＃8d184f" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"]ダウンロードTEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

他のDiviチュートリアル

5コメント

  1. ヨット
    ヨット 8年2019月22日午前58時XNUMX分

    製品ごとに異なるテキスト？ あなたはそれを新製品に加えると言いますか？ それはどうですか？そしてどこですか？

    返事
  2. ブライスベール
    ブライスベール 30年2018月5日午後18時XNUMX分

    スーパー記事、このヒントをありがとう。 製品ごとに異なるテキストが必要な場合はどうすればよいですか？

    返事
    • ティエリー・ベルトラン
      ティエリー・ベルトラン 31年2018月6日午後12時XNUMX分

      こんにちはブリス、

      この場合、新しいWooCommerce製品に別のテキストを追加します。

      返事
  3. Laura
    Laura 26年2018月16日48時間XNUMX分

    スーパー!! このヒントをありがとう。

    返事
    • ティエリー・ベルトラン
      ティエリー・ベルトラン 26年2018月17日21時間XNUMX分

      何もない

      返事

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.