WooCommerce今天是电子商务网站建立在WordPress的流行的插件。这是相当直观的和已经有相当长的一段时间，使得它在WordPress社区–信誉好的主食，它是免费的！

在这篇文章中，我们不会在WooCommerce详细有关Divi WooCommerce的一篇很好的文章，只是近发表在我们的博客上，你可以找到它在这里

有时造型WooCommerce可以是一个有点棘手，特别是如果你的CSS游戏有点缺乏或有点不存在。我们要做的是改变今天的用户看到他们停留在一个产品。

让我们开始吧

改变图标的文本对产品徘徊

默认情况下，当你使用WooCommerce与分和悬停在你的产品上看到一个小“”图标，从优雅的主题图标字体，像这样：

它真的很容易改变这个商店模块内不同的图标，但如果你想要的文字也没有呢？我会告诉你如何达到今天的CSS代码段，我也有一些可选的代码包括使产品容器圆而不是方的。

这就是我们要完成时：

而不是一个图标无论如何为什么使用文本？

我能想到的几个理由这样做：

设置你的商店除了开箱看：你能做什么来区分你的分/ WooCommerce网站从另一个始终是一个加。

使用“视图”或“购买”可能会导致更高的转化率：每个人都需要做自己什么是适合自己的网站，你可以利用分内置的A/B测试功能来帮助这。发现更多在这里

我的灵感

我的工作是在一个白色的标签分工作，采用WooCommerce处理存储和客户端有一个网站，我们应该借鉴。该网站有文本产品徘徊。我当然见过，有话不在产品图标悬停在电子商务网站，所以这不是新的概念。它没想到我搞砸这一分网站通过特定的CSS，结果终被很容易转换为文本的图标。很少的代码是必要的，它可以让你的网站尽可能轻。这样做后，客户后我用在我自己的股利溢价儿童主题店我很高兴的结果

在盘旋在你的网站实施WooCommerce文本分

步骤1：覆盖的颜色

首先我们要改变覆盖层的颜色在盘旋。这是做分极易。在你去商店模块先进的设计设置选项卡，选择你的颜色。

步骤2：添加CSS

下面的CSS代码进入你分主题选项>自定义CSS盒（一般设置在底部）或你的孩子的样式表

<trans data-src=".woocommerce .et_overlay:before { left: 0; margin-left: 0; content: 'view'; /*** YOUR TEXT ***/ font-family: 'Source Sans Pro', Arial !important; /*** YOUR CHOSEN FONT FAMILY ***/ text-transform: uppercase; font-size: 24px; color: #fff; /*** COLOR OF YOUR TEXT ***/ font-weight: bold; text-align: center; width: 100%; padding: 5px 0;}" data-dst="。WooCommerce。et_overlay：前{左：0；margin-left: 0；内容：&#39;看&#39;；/ *** ***你的文字/字体：源无亲”，Arial！重要的；/ * * *你选择的字体*** /文本转换：大写；字体大小：24px；颜色：# FFF；/ ***色你的文本*** /字体重量：大胆；文本对齐：中心；宽度：100%；padding: 5px 0；}">。WooCommerce。et_overlay：前{左：0；margin-left: 0；内容：&#39;看&#39;；/ *** ***你的文字/字体：源无亲”，Arial！重要的；/ * * *你选择的字体*** /文本转换：大写；字体大小：24px；颜色：# FFF；/ ***色你的文本*** /字体重量：大胆；文本对齐：中心；宽度：100%；padding: 5px 0；}</trans>

如果你想你的产品是不是方圆形添加在同一地点如下：

<trans data-src=".woocommerce ul.products li.product a img,.et_overlay { border-radius: 50%;}" data-dst="。WooCommerce ul.products li.product IMG，。et_overlay {边界半径：50%；}">。WooCommerce ul.products li.product IMG，。et_overlay {边界半径：50%；}</trans>

这里的.

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/10834.html