许多wordpress站长在搭建wordpress商城时,想要多样化展示自己的产品样式,但是woocommerce自带默认的设置的样式固定,只能使用大量的css代码修改,十分繁琐,这里推荐大家一个Woocommerce插件 – WOOCOMMERCE PRODUCTS LAYOUTS,能够实现产品样式的多重化展现。

WOOCOMMERCE PRODUCTS LAYOUTS 下载链接

1.产品标题设置

  • Heading – 标题文字
  • Heading Color- 标题文字颜色
  • Heading Font Size- 标题文字大小

效果如下图

2.产品显示筛选

产品显示筛选可以从以下9种功能种进行选择显示你要的产品

  • 包含产品
  • 排除产品
  • 包含分类
  • 排除分类
  • 包含品牌
  • 排除品牌
  • 包含标签
  • 排除标签
  • 产品属性

3.产品排序&排列

  • Products Per Page – 产品分页 最多几个产品进行分页
  • Products Per Row – 每行显示的产品个数
  • Show – 可以选择只显示正在销售的产品或特色产品
  • Products Ordering – 排序方式 可以按时间,ID等
  • Ascending or Descending – 升序或降序

4.产品排列形式

  • Hide free products – 隐藏免费产品
  • Show hidden products – 显示隐藏产品
  • Display type – 展现形式 可选网格 列表布局等
  • Use default style of Theme – 使用默认主题的风格形式

5.产品页修饰

  • Hide result count – 隐藏总数
  • Hide Ordering List – 隐藏排序列表
  • Show Pagination – 显示分页
  • Item Border Style – 产品边框风格
  • Item Border Color – 产品边框颜色
  • Item Border Width – 边框宽度

6.缩略图边框设置

  • Row Separator Color – 分隔线颜色
  • Row Separator Height – 分隔线高度
  • Row Separator Border Style – 分隔线边框风格
  • Hide Thumbnail – 隐藏特色图片
  • Hover Thumbnail Effects – 鼠标经过缩略图特效(未实现)
  • Thumbnail Background Color – 特色图片背景颜色(添加padding才有效)
  • Thumbnail Border Style – 缩略图边框风格

7.特色图片设置

  • Thumbnail Border Color – 缩略图边框颜色
  • Thumbnail Border Width – 缩略图边框宽度
  • Thumbnail Border Radius – 缩略图边框圆角
  • Thumbnail Padding – 缩略图内边距
  • Thumbnail Margin – 缩略图外边距

8.缩略图及标题设置

  • Thumbnail Width – 缩略图宽度
  • Thumbnail Height – 缩略图高度
  • Hide Title – 隐藏产品名称
  • Title Align – 产品名称对齐
  • Title Color – 产品名称颜色
  • Title Hover Color – 产品名称鼠标经过颜色
  • Title Font Size – 产品名称字体

9.产品标题及摘要

  • Title Padding – 产品标题内边距
  • Title Margin – 产品标题外边距
  • Show Excerpt – 显示摘要
  • Excerpt Words -摘要字数
  • Excerpt Align – 摘要对齐
  • Excerpt Color – 摘要颜色
专业网站开发网页设计公司

深度阅读:

wordpress外贸企业建站设计过程中几个需要注意的知识点 随着互联网的飞速发展以及外贸的竞争的日趋白热化,搜索引擎的规范,那就降低了网站的访问量,从而影响了企业品牌的推广。 那企业建立外贸英文站都需要注意些什么呢?要有完整的内容:优质的内容不仅能促进客户对企业的产品和服务有跟深刻的了解,而且原创的内容会给予好的网络营销...
Visual Composure建站教程5 – 如何添加全宽的行 【教学目的】一般的行元素模块,都遵循盒子模型(box),浏览器两边会留白,有时候需要设置全宽的行元素,让样式更加美观,比如你在用一张图片做背景的时候,当然不希望两边留白。这个时候你仍然存在一个疑惑,为什么当前的行模块背景图只是一个局部居中的背景,而不是一个全宽的背景。这时候就涉及到行模块的基...
在wordpress中添加幻灯片 在幻灯片的方法很简单,通过使用Meta Slider就可以简单地给wordpress幻灯片的内容以及幻灯片的过渡方式。Meta Slider是一款完全免费的插件,通过使用这个幻灯片插件,让你的网站与众不同!...
【WP可视化编辑器】lightbox-lightbox-M 预览地址: http://massive.mpcthemes.net/lightbox/ 作用:
google的个性化搜索简介以及对wordpress的影响 如果你建立了一个排名,这时候需要注意一个点,就是Google的个性化搜索结果。简单说,假设你有谷歌的账号了,在你登录你的谷歌账号前,你在wordpress建站中,也是值得关注的一个点。那么WP花园致力于做有SEO知识,我们会尽可能地给客户提出建议。这里WP花园推荐2款基于谷歌...
【WP可视化编辑器】价格框-price-box 预览地址:https://ultimate.brainstormforce.com/price-box/ 作用: 有6种展示的风格,对商品的套餐,价格,简介进行展示,为用户提供一个连接按钮,可用作加入购物车或购买 预览效果:后台:...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

wechat logo