WooCommerce製品ページテンプレートのスタイルを変更する方法

この記事では、WooCommerceの商品ページ表示スタイルをカスタマイズする方法を説明します。通常、いくつかの専用WooCommerce Theme会为产品页面做一些设计，而碰到没有设计的主题产品页面就比较单调，所以奶爸这里教大家如何修改产品详情页的展示效果。 我们修改WooCommerce这里需要借助到Elementor Pro这个工具。 注意，要Pro版本才支持自定义WooCommerce产品页面，没有购买的可以点击这里去购买。 接下来奶爸教大家如何使用Elementor来设计自己的产品页面模板布局。

具体的な手順：

一、WooCommerceオンラインショップサイトをインストールする

因为是编辑WooCommerce的产品页面，所以我们必须要在WordPress网站上安装一个WooCommerce才行。 关于WordPress网站的安装请参考：WordPressインストールチュートリアル 关于WooCommerce的使用方法可以参考：WooCommerceチュートリアル

二、商品詳細ページテンプレートを作成する

安装好WooCommerce和elementor插件后，点击新建，页面，然后选择Single Product，创建一个产品页的模板。

三、プリセットテンプレートを選択するか、自分でデザインする

购买了Pro版本的elementor构建器后，可以从预设的library里面找到几个预设的产品页模板，你可以直接选择一个导入。 当然，你也可以自行设计页面布局。 大概布局确定后，你还可以增加一些小部件，对应的小部件名称如下：

1. 菜单购物车图标
2. パンくずリストナビゲーション
3. 製品タイトル
4. 产品价格
5. 产品评分
6. 製品の短い説明
7. 产品库存
8. 添加到购物车
9. META标签
10. 产品描述标签
11. 产品图片
12. 关联产品
13. 相关产品

四、テンプレート効果のプレビュー

设计好了之后点击编辑器左下角的眼睛图标可以对设计效果进行预览。

五、商品テンプレートの表示条件を設定

预览效果满意后，就可以设置分类显示规则，然后Publish发布。 网站前台就可以看到你刚才设置的模板效果。

まとめ：

利用elementor的WooCommerce Builder工具，可以自己灵活设计产品详情页面。如果你对主题的产品页面模板显示效果不满意，那么使用这个方法可以建立一个符合自己预期的产品页面。 当然，更好的方法是直接从themeforest商城购买专门针对WooCommerce优化设计过的主题。