专注于外贸建站,分享WordPress教程和Elementor教程

如何用Elementor制作woocommerce产品详情页(视频实例)

更新日期:2021-05-22

本文将逐步介绍如何使用Elementor pro制作woocommerce产品详情页模板,下面进入正题。

2021/5更新详细的视频教程

下方是2021年写的简单版图文教程

  1. 点击菜单:模板》添加新模板,选择模板类型为single product,输入模板名称,譬如single product
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 9 - 如何用Elementor制作woocommerce产品详情页(视频实例)
  1. 点击“创建模板”按钮,可进入下图所示的library页面:
    • 左键移动到模板上方,将出现放大镜按钮,点击可预览模板;
    • 选择喜欢的模板,点击insert按钮即可导入;
elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 8 - 如何用Elementor制作woocommerce产品详情页(视频实例)

导入后,系统会自动选择一个产品数据嵌入,以便我们直观看到效果,但依然有一些看不到内容的元素,譬如价格、加入购物车,那是因为我们上传产品时没有填写对应内容

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 7 - 如何用Elementor制作woocommerce产品详情页(视频实例)

对不需要的元素可以使用右键删除功能。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 6 - 如何用Elementor制作woocommerce产品详情页(视频实例)

如果你想更换一个产品以预览效果,那么按照下图的数字顺序操作,以更换产品。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 5 - 如何用Elementor制作woocommerce产品详情页(视频实例)

最后,点击publish,点击add condition为include:products,保存即可,然后我们就可以去预览一下效果了。

elementor%E7%BC%96%E8%BE%91%E5%99%A8%E6%95%99%E7%A8%8B 4 - 如何用Elementor制作woocommerce产品详情页(视频实例)

现在打开一个产品页面预览一下效果。

elementor single product 12 - 如何用Elementor制作woocommerce产品详情页(视频实例)

接下来你还可以对模板进行样式调整、或者添加自定义的产品字段

点赞
0 / 5 0

Your page rank:

教程 分类

8 回复

    1. 不过依然建议你在安装elementor前做一下网站备份,也可以创建一个staging用于测试elementor与avada。

发表评论

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

相关 教程

我自用的 建站资源

当你点击本站的链接购买主机、主题、插件,我会得到一些佣金用于运营网站,但不会影响你的购买价格,我只推荐自己在用的,感谢有你的支持~比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程