如何用Elementor制作Woocommerce产品列表

最新推荐文章于 2024-07-15 08:48:13 发布

桜丸子

最新推荐文章于 2024-07-15 08:48:13 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/penny_cheng/article/details/111047304

版权

本文提供了一步一步的教程，指导如何使用Elementor Pro制作 WooCommerce 产品列表模板。教程包括视频和图文说明，涉及选择模板、删除预设元素、添加自定义标题和产品展示设置，如列数、每页产品数量、图片展示等。完成设置后，可在任意产品分类页面应用该模板。

摘要由CSDN通过智能技术生成

本文是LOYSEO的外贸网站建设教程内容之一，我将逐步介绍如何使用Elementor Pro制作woocommerce产品列表模板，下面进入正题。

原文首发于：https://loyseo.com/creating-a-woocommerce-archive-template-with-elementor-pro/

视频教程

frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=a3208zk0jam" allowfullscreen="true" height="600">

20201129备注：1.你也可以用下面图文教程中的post元素块来制作产品列表；2.在视频中，在侧边栏插入的搜索按钮换行问题是主题Bug,你可以安装一个Ajax Search for WooCommerce来替代它（相关教程排期中）

图文教程

进入“ 模板”>“添加新模板”，选择类型为 “Product archive”，为其命名，然后单击“ 创建模板”

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

桜丸子

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品列表）

weixin_48884617的博客

04-19

8532

黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品列表）

element-ui封装dialog组件提供商品选择(支持单选/全选及已选择商品翻页保存)

Timora_的博客

07-15

1013

父组件调用及需传入值说明 ① parentSelectArr：此属性主要传入父组件表格已选择的商品数据 ① handleSubmit：此事件在子组件点击确定按钮时触发，接收子组件传递过来的商品数据，然后把商品数据push到父组件的商品列表中父组件显示的商品数据如上（调用的element-ui的table标签展示商品数据） <add :visible.sync="showAddDialog" @onSubmit="handleSubmit" :paren

参与评论您还未登录，请先登录后发表或查看评论

如何给woocommerce订单列表加上产品图片的参数列

最新发布

星光途网络外贸建站的博客

07-15

186

在WooCommerce中，由于订单列表（如订单管理页面上的列表）通常是通过管理界面（admin dashboard）的模板和PHP逻辑来呈现的，而不是通过前端的模板，因此直接在订单列表中显示产品图片需要一些自定义的PHP代码。不过，需要注意的是，WooCommerce核心并没有直接提供在订单列表中显示产品图片的内置功能，所以我们需要通过插件或自定义代码来实现。你可以根据需要调整图片大小。这个示例中，我添加了一个名为“产品图片”的新列到订单列表中，并且只为每个订单的第一个产品显示了一个图片链接。

elementui 展示列表模板_二、vue＋ElementUI开发后台管理模板—布局

weixin_33423874的博客

01-26

2035

0、写在前面关于布局：我们常见的后台管理页面结构一般有下图中显示的三种，如果把Tabs(导航的多标签显示)、Crumbs(面包屑)、Content(页面内容)和Footer(底部)当做中间区域视为一块整体，可以看到主要的区别就是Menu(菜单栏)位置的区别，待会我们就根据这些来设立vuex(vuex官网)的布局状态值，主要考虑以下两点：(1)菜单栏的位置；(2)设置是否需要该模块，包括Tabs、C...

想要用elmentor的主题上增加产品类目，包括有产品，产品类别，产品技能和产品标签...

weixin_35752122的博客

01-17

370

要在 Elementor 主题中增加产品类目，您可以使用 WooCommerce 插件。 WooCommerce 是一个免费的电子商务插件，可以帮助您在 Elementor 主题中添加产品，产品类别，产品技能和产品标签。您可以使用 Elementor 的 WooCommerce 模板来设计产品页面和类别页面。如果您不知道如何安装和使用 WooCommerce，请查看 WooCommerce 官方...

elementui 展示列表模板_vue element-ui 实现表格列表动态展示

weixin_39581719的博客

12-18

2089

思路：把列名都放在columns这个数组中，动态改变这个数组的内容，就能实现动态展示列的目的，代码如下：columns数组包含的内容格式如下：// 字段headerthis.columns.push({label: 实际的字段名，比如id,value: 实际的字段名，比如id,key: Date.now()});代码全部如下：关闭// 获取样本数据的请求import {getSampleDat...

如何使用WooCommerce简码

桜丸子的博客

12-30

1493

WooCommerce简码（shortcode）可以让我们将产品、购物车等内容加入到页面或者文章中。我们在外贸建站时，可以直接通过Elementor Pro的Product元素块来配置产品的展示，但如果元素块或是主题无法提供所需的产品配置呢？那学习WooCommerce简码能让你自定义所需的产品展示，譬如在网站首页，以tab标签的形式展示不同类目的产品。此外，如果你使用WordPress默认的古腾堡编辑器来编辑页面或者文章，如下图所示，点击左上角的加号按钮，在面板中你可以找到WooCommerce区块，单

9个最适合Elementor的免费主题【官方推荐】

桜丸子的博客

09-11

1777

如何用Astra主题免费版建外贸网站

桜丸子的博客

09-21

9250

超详细10000+字的外贸建站教程，图文、视频兼备。除了域名和主机，WordPress主题、插件通通是免费版，零经验的你也能建个靠谱的外贸网站，只要肯花点时间照着步骤做就能行~我选用了大牌的Astra主题，速度快、质量有保证，配套的功能插件也都是选择了用户多、评价好的插件，对起步阶段的Soho外贸人很有帮助~ 原文地址：https://loyseo.com/create-business-website-with-astra/ 本教程的外贸建站要花多少钱？域名费用：20~30元/首年，次年起50-6

wordpress建站模板Zoa主题

04-13

Zoa是一个使用Elementor页面构建器构建的最小和现代的WordPress电子商务主题。适用于手表店、男装店、女装店、服装店、家具店、书店、化妆品店、奢侈珠宝店、配饰店等类型的网购网站。内置自定义小部件，方便快速...

vue+elementUI 框架模板

05-06

该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

详解elementui之el-image-viewer(图片查看器)

11-30

前言随着版本的更新Element UI新增了新的组件，例如：Image，没错今天被我发了Image下面可通过 previewSrcList 开启预览大图的功能。这是官方文档中有写的，但是我想不使用Image组件又想使用预览大图的功能是否可行呢？答案是当然可以。使用方法翻看了Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default:

前端学习之vue+element-ui电商项目（五）商品列表

CathyleeQ的博客

03-25

2374

文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现 0. 准备工作 component下新建文件夹power下新建文件Roles.vue，并在路由中引入文件 1.搜索与添加 1.1 界面样式 1.2 数据添加 1.3 方法实现 2.搜索与添加 2.1 界面样式 2.2 数据添加 2.3 方法实现 3.搜索与添加 3.1 界面样式 3.2 数据添加 3.

elementui+vue 商品列表模块之 Steps 步骤条

wangmj518的专栏

02-12

1373

el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}上一步，填写商品属性

2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品列表篇

超逸の学习技术博客

01-23

2056

文章目录1、引言2、商品列表篇2.1 通过路由加载商品列表组件2.2 渲染商品列表数据2.3 自定义格式化时间的全局过滤器2.4 实现商品列表的分页功能2.5 实现搜索与清空的功能2.6 根据id删除商品数据2.7 通过编程式导航跳转到商品添加页面2.8 渲染添加页面的基本结构2.9 实现步骤条和tab栏的数据联动效果2.10 绘制基本信息面板的UI结构2.11 绘制商品分类的级联选择器2.12 ...

vue+elementUI 通用模板组件form+button+table

jiufan1872的博客

06-20

2933

该组件使用vue + elementUI进行开发包含form搜索栏、button按钮组、table列表、render拓展先来看下效果。

element ui 前台模板_element-ui 菜单模板封装（递归）

weixin_39873208的博客

12-19

1233

1.使用vue-cli后src路径找个文件夹创建menu.vue;注意：1.数据需要通过父页面传递进来，在模板中会造成数据溢出模板需要有name属性，调用模板的父页面的组件名称和模板name需一致，才能实现递归。//menu.vue; //循环数据；数据menuList通过props传递{{ list.resourceName}} //当有子集数据再次使用这个模板，:menuList通过prop...

2021 Vue全家桶开发电商管理系统（Element-UI）08 商品列表功能的实现

一只蒻蒻的博客

01-17

1142

商品列表功能的实现 1 自定义格式化时间的全局过滤器打开main.js，创建过滤器 Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal); const y = dt.getFullYear(); const m = (dt.getMonth() + 1 + '').padStart(2, '0'); const d = (dt.getDate() + '').padStart(2, '

写个woocommerce产品页产品缩略图应用

03-02

要在WooCommerce产品页上添加产品缩略图，可以通过以下步骤完成： 1. 在WordPress管理面板中，找到并点击“产品”选项，选择您要编辑的产品。 2. 进入产品编辑页面后，在右侧“产品图像”选项卡下上传并选择您要使用的产品缩略图。 3. 点击“设置产品图像”按钮，选择“使用作为产品缩略图”的选项，然后保存更改。 4. 您可以在“外观”->“编辑器”中打开您的主题的functions.php文件。 5. 在functions.php文件中添加以下代码： ``` add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); ``` 这将在产品页面上显示产品缩略图。 6. 保存并更新您的主题文件，然后刷新产品页面，您应该能够看到您上传的产品缩略图了。这是一个简单的方法来为WooCommerce产品页添加产品缩略图，但要注意的是，您的主题可能需要进一步的自定义来使缩略图与其他元素相匹配，并确保最佳的外观和用户体验。