如何自定义 WooCommerce 产品页面

什么是 WooCommerce 产品页面？

在 WordPress 网站上安装 WooCommerce 插件时，它会立即创建一个商店页面，可以在其中列出所有产品。如果访问者点击目录中的任何项目，他们将被带到相应的产品页面。此页面的布局在很大程度上取决于主题，但它会包含有关产品的一些基本信息。 

可以通过导航到WordPress仪表盘的“产品”选项卡，找到您的产品，然后选择“编辑产品”来添加或编辑此信息。或者，可以单击“添加新产品”来创建新产品。

首先添加产品标题和产品描述。在右侧，可以附加产品图片。

如果向下滚动到产品数据部分，会看到可以创建简单产品、分组产品、可变产品或附属产品。在这里，还可以配置运输设置、属性、链接产品（用于交叉销售）等。

在这个页面上，还可以为产品选择一个类别并添加标签。这些功能使客户能够更轻松地浏览产品目录。 

完成产品配置后，点击“更新”按钮。默认产品页面在前端如下所示：

如上所见，此 WooCommerce 产品页面包含在线销售商品的基本功能。要注意的是，在网站前端看到的模板对于所有产品都是相同的。

自定义 WooCommerce 产品页面的三种方法

现在，让我们看看自定义 WooCommerce 产品页面的三种方法！

1. 使用站点编辑器

WordPress 的优点在于其原生功能非常适合初学者。借助站点编辑器，无需了解如何编写代码即可在 WooCommerce 中创建精美的自定义产品页面。

使用站点编辑器，可以使用块自定义在线商店。WooCommerce有自己的一组块，其中包括用于显示过滤器、搜索栏、畅销产品等的元素。

站点编辑器的工作方式与块编辑器非常相似。但是后者用于页面和博客文章，而站点编辑器可以自定义全局元素，例如页眉、页脚和 WooCommerce 产品页面模板。 

注意：只能在块主题中使用站点编辑器。如果在使用经典主题，则需要参考本指南中的第三种方法。

此外，每个产品页面的内容只能通过转到“产品”选项卡并在后端编辑器中打开项目来修改（如前所示）。我们要做的是自定义 WooCommerce 产品页面的页面组件和样式。

首先，转到外观 → 编辑器，然后单击模板。

向下滚动到WooCommerce部分并选择单一产品模板。

然后，单击铅笔图标在编辑器中打开模板。

首先，可以看到模板呈灰色。

点击模板区域，系统会提示将模板转换为块。点击“转换为块”按钮继续。

现在可以使用块编辑WooCommerce 产品页面。

如果不熟悉 WordPress 块或站点编辑器，可以使用以下几种有用的方法来调整此页面：

更改页面布局

要调整页面布局，单击较大的块并选择父块。

然后，水平菜单应显示箭头，能够向左或向右移动页面的该部分。

还可以上下移动块或块组。

此外，如果想添加一个块，只需将鼠标悬停在想要插入它的区域上，然后单击加号。

如果想修改布局，添加列或组的块是比较好的。

还可以通过选择模板布局然后打开块设置来对其进行全局更改。

在布局下，可以选择更改设计的对齐方式和位置。甚至可以将其转换为“粘性”元素。这意味着当访问者向下滚动页面时它不会消失。

如果对修改满意，点击屏幕顶部的“保存”按钮。

更改颜色和字体

在产品页面上自定义字体和颜色时，可以确保设计与视觉品牌保持一致。 

要在站点编辑器中修改颜色，选择要编辑的元素并在右侧打开块设置。

可以更改的元素取决于块，但通常可以修改文本、背景和链接颜色。

默认情况下，可以从主题的默认颜色中进行选择。

如果单击“未选择颜色”的区域，将获得一个颜色选择器。

在这里，可以拖动鼠标来选择颜色。如果选择了对比度较差的颜色，网站编辑器甚至会有提示。

还可以输入特定的 HEX、HSL 或 RGB 颜色代码。这是最好的选择，因为它能够匹配确切的公司颜色。

在“排版”选项卡中，可以将文本大小更改为小、中、大等。

要访问更多字体设置，请单击“Typography”旁边的三个点。

这里有很多选项。只需单击即可选择它们并将它们添加到排版菜单中。

如果不想要这些设置，可以随时取消选择这些设置。

添加新块

想要向产品页面添加元素？站点编辑器可实现这一点。

例如，进行全站促销时，可以在模板顶部添加横幅块。

或者，如果想让客户更轻松地导航，可以在页面上添加搜索块。

创建多种类型的产品页面

如上所见，有几种方法可以在站点编辑器中自定义 WooCommerce 产品页面模板。所做的更改将反映在所有 WooCommerce 产品页面上。

做零售类型的，需要为特定产品类型或类别创建独特的模板。例如：

• 新产品发布：为即将推出的新产品创建一个独特的产品页面。
• 节日促销：在节假日期间为某个产品类别创建一个销售页面。

这样可以确保页面更具针对性和吸引力。

要为不同目的创建多个模板，请转到外观 → 编辑器 → 模板。然后，单击加号以添加新模板并选择单个项目：产品。

这可以创建新的产品页面模板，但仅限一款产品。从菜单中选择所需的产品以启动站点编辑器。

默认情况下，系统会提示使用预先存在的模式。首选应该是通用产品页面模板。

使用预先存在的图案可以帮助加快设计过程。但是，如果从头开始，可以跳过此步骤。

现在，如果返回到模板屏幕并再次点击加号来添加新模板，会看到一个选择类别（product_cat）的选项。

该模板将适用于特定类别，如配饰、服装或装饰。 

只需选择您的类别并开始构建模板即可。步骤与“单个项目：产品”选项相同。

2.使用 WooCommerce 扩展

使用块主题时，站点编辑器能够以不同的方式自定义 WooCommerce 产品页面模板，而无需触及一行代码。 

但是，它不允许扩展页面的功能。幸运的是，有很多 WooCommerce 扩展可以帮助实现这一点，即使是没有技术技能的初学者。 

在本节中，我们会介绍一些可以使用新功能修改产品页面的工具。为了方便，我们将这些扩展分为三个用例：创建高级产品、优化 WooCommerce 产品页面和增加销售额。

创造先进产品

如果在线 WooCommerce 商店提供定制产品或高级产品变体，需要 WooCommerce 扩展来促进这些商品的销售。下面，我们一起看看。

高级产品变体

WooCommerce 默认可以创建可变产品，但这些项目的设置可能会有点受限。 

如果提供大量不同款式、颜色或尺寸的商品，可以考虑使用高级产品变体扩展。这可以帮助更有效地显示产品变体，以便客户更好地了解您的选择。

例如，它可以设置全局属性来创建变体样本。这些样本可以展示不同的颜色、图像、视频和文本，从而创建有效的产品展示。 

此外，该扩展可以自定义变体库并创建表格以清楚地显示可用选项。

WooCommerce 产品设计师

例如定制 类型的商品，需要WooCommerce 产品设计师之类的工具。此扩展程序会向页面添加“自定义产品”按钮。

你的客户将能够向你的产品添加图像、剪贴画、形状和模板。他们甚至可以直接从设计页面将它们添加到购物车中。它还可以创建可打印的文件，这有助于促进定制商品的生产。

复合产品

Composite Products是一款功能强大的扩展程序，非常适合处理复杂订单的在线商店。它可以帮助客户配置包含多个部件的产品，从而简化工作流程，使其尽可能方便用户使用。

Composite Products 的优点在于它内置了对产品包的支持。这意味着当客户创建他们独特的产品时，他们将能够从目录中的所有可用商品中进行选择。

WooCommerce 的公式价格计算器

有些定制产品需要更多资源，例如额外的布料或木材。如果没有合适的工具，为这些产品创建产品页面在后勤方面可能会很困难。

销售此类产品的传统方式是联系客户并给出报价。但这会大大减慢销售过程。事实上，购物者放弃购物车的主要原因之一是他们无法预先计算订单的总成本。

这就是WooCommerce 扩展的按公式计算价格计算器派上用场的地方。使用此工具，可以添加带有公式和规则的字段来计算产品的最终价格。这可以适应长度、体积等独特测量值。 

WooCommerce 批发

如果有大量库存，可以批发出售你的商品。WooCommerce的 Wholesale扩展提供了入门所需的一切。

可以创建和管理多个批发用户角色并设置基于角色的定价。它还附带一个拖放式注册表单生成器，因此可以创建批发应用程序。

此外，还可以选择向普通客户隐藏批发产品和价格。甚至可以获得一个批发仪表板，其中显示有关销售、退款、订单等的报告。这样，就可以看到你的WooCommerce 批发业务进展如何。

优化产品页面

拥有销售产品所需的最低限度的功能至关重要。但如果想创建高转换率的产品页面，可以增加一些趣味。

这里有一些可以帮助改善 WooCommerce 产品页面的扩展。

WooCommerce 的 360º 图像

当顾客购买家电或家具等大件商品时，他们可能希望在前往结帐页面之前尽可能详细地了解产品。 

虽然全面的产品规格、静态照片和视频可以起到很大作用，但提供 360º 图像可以帮助产品栩栩如生。 

如果有时间从各个角度拍摄产品， WooCommerce 的 360º Image可以帮助创建这种有用的视觉效果。此扩展非常用户友好且响应迅速。 

它还配有导航控制并提供全屏模式，以便客户可以很好地了解你的产品。

WooCommerce 单页结帐

漫长而复杂的结账流程是客户放弃购物车的主要原因之一。因此，可以使用WooCommerce 单页结账 来简化流程。

顾名思义，此扩展程序可以构建自定义产品页面，直接引导购物者进行购买。他们可以将商品添加到购物车或从购物车中移除，并完成付款，而无需等待新页面加载。

此工具非常适合产品较少的网站或与营销活动相关的目标登录页面。 

WooCommerce 标签管理器

良好的产品描述有助于提高销量。此外，基于产品的搜索引擎优化 (SEO)对每个电子商务商店都至关重要。可以利用产品描述作为有机机会来整合关键词，让网站在搜索结果中表现更好。

增加产品销量 

现在，这里有一些工具可以帮助使用传统和更微妙的营销方法来增加 WooCommerce 销售额。

促销 Flash Pro

营造紧迫感有助于提高转化率。我们常用方法就是进行限时抢购。

Sale Flash Pro将此功能添加到 WooCommerce 产品页面，并提供可自定义的方式在网站上突出显示这些销售：包括显示原价与销售价，让商品看起来更具吸引力。

WooCommerce 愿望清单

约40% 的在线购物者表示，如果零售商提供愿望清单，他们的用户体验会更好。鉴于这一比例如此之高，每家在线商店都应该将此功能添加到他们的优先考虑事项清单中。

WooCommerce Wishlists为客户提供完全的隐私控制和创建无限愿望清单的能力。他们不必担心在网站上注册，因为他们可以以访客身份保存他们的愿望清单。

产品推荐

如果想提高整体收入，追加销售和交叉销售策略推荐相关产品是最有效的方法之一。

使用产品推荐扩展，可以自动向客户提供智能建议。例如，该工具可以显示同一类别中的相关产品或经常一起购买的商品。

它可以根据购物者最近的浏览历史自动生成推荐。有用的报告还可以帮助你确定最有效的推荐策略。

产品附加功能

产品附加组件是增加 AOV 的另一种巧妙方法。这对于能够为订单提供高度个性化的小型精品店或在线商店非常有用。

产品附加组件扩展可帮助通过几个简单的步骤完成此操作。可以使用下拉菜单、文本框、复选框、示例图像等来整合这些附加组件。 

使用此工具时，可以全局或将产品附加组件应用于单个产品。此外，该扩展还与其他流行工具兼容，例如WooCommerce Subscriptions和WooCommerce Bookings。

产品包

只要你店铺目录中有少量商品，就可能从提供产品捆绑包中受益。虽然 WooCommerce 默认不提供此功能，但可以使用产品捆绑包扩展来获取它。

这个工具可以捆绑简单和可变的 WooCommerce 产品。甚至可以推荐可选商品并提供批量折扣。此外，还可以自定义捆绑和捆绑商品的外观。

还值得注意的是，该扩展兼容实体商品和虚拟商品。它可以用于在线课程和订阅等产品。

3. 使用自定义代码

还可以使用自定义代码修改产品页面。如果使用的是默认主题，无法访问站点编辑器，这个方法特别有用。 

注意：直接修改网站的主题文件是一个很微妙的过程。如果不具备技术专业知识，最终可能会损坏网站并导致停机。 

考虑到这一点，需要确保在继续操作之前备份你的 WooCommerce 商店。最好使用暂存网站来试验你的自定义设置。 

然后，一旦准备好使更改生效，可以使用WordPress 子主题。这样，自定义设置就不会因父主题的任何更新而丢失。

现在，可以使用以下一些方法使用自定义代码修改 WooCommerce 产品页面。

使用自定义 CSS

如果想使用代码自定义 WooCommerce 产品页面的样式，CSS是最好的选择。它能够修改颜色、字体、链接等内容。 

有几种方法可以实现这一点。让我们来看看。

在站点编辑器中

要使用站点编辑器将 CSS 添加到你的产品页面，请转到外观 → 编辑器 → 样式 → 附加 CSS。

可以将代码放在附加 CSS框中。

例如，如果想修改产品标题的颜色，可以使用如下代码片段：

h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {

    color: #ffffff;

    letter-spacing: 1px;

    margin-bottom: 10px !important;

}

只需将“ffffff”替换为喜欢的颜色代码。 

或者，如果想更改字体大小，可以使用此 CSS 代码片段：

.woocommerce div.product .product_title { font-size: 25px; }

只需确保发布您的更改即可。

当然，这些只是一些简单的例子，但机会是无穷无尽的。如果您有兴趣了解更多信息，可以查看WordPress 的 CSS 文档。

在定制器中

如果你的主题不支持完整的网站编辑，则必须在定制器中添加 CSS 代码。为此，请转到外观 → 定制 → 附加 CSS。

CSS 在这里的功能与在站点编辑器中相同。

在你的子主题的style.css文件中

可以在 WordPress 中添加 CSS 的最后一个位置是主题的style.css文件中。同样，需要使用子主题来确保的修改不会在更新中丢失。

转到外观 → 主题文件编辑器。

默认情况下，应该会选择style.css文件。如果没有，只需在屏幕右侧的主题文件菜单下选择它即可。

然后，可以将任何 CSS 添加到文件的最底部。完成后，只需更新它即可。

使用 PHP

CSS 非常适合改变 WordPress 的外观，但它无法向 WooCommerce 产品页面添加功能。 

要使用代码手动执行此操作，需要使用 PHP。可以将 PHP 代码添加到子主题的functions.php文件中，或使用Code Snippets等插件。

如果是经验丰富的 WordPress 用户，可以尝试以下一些选项：

WooCommerce 钩子（动作和过滤器）

对于喜欢手动修改 WooCommerce 元素的用户，可以使用WooCommerce 钩子。这些 PHP 代码片段能够执行“操作”和“过滤器”来修改 WooCommerce 产品页面。

下面是一个有用操作的示例：

/**

 * Allow shortcodes in product excerpts

 */

if (!function_exists('woocommerce_template_single_excerpt')) {

   function woocommerce_template_single_excerpt( $post ) {

      global $post;

       if ($post->post_excerpt) echo '<div itemprop="description">' . do_shortcode(wpautop(wptexturize($post->post_excerpt))) . '</div>';

   }

}

实现此钩子时，能够将短代码添加到你的产品摘录中。 

同时，如果想显示产品属性存档链接，可以使用以下代码片段：

/**

 * Display product attribute archive links 

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' );

// if you'd like to show it on archive page, replace "woocommerce_product_meta_end" with "woocommerce_shop_loop_item_title"

function wc_show_attribute_links() {

global $post;

$attribute_names = array( '<ATTRIBUTE_NAME>', '<ANOTHER_ATTRIBUTE_NAME>' ); // Add attribute names here and remember to add the pa_ prefix to the attribute name

foreach ( $attribute_names as $attribute_name ) {

$taxonomy = get_taxonomy( $attribute_name );

if ( $taxonomy && ! is_wp_error( $taxonomy ) ) {

$terms = wp_get_post_terms( $post->ID, $attribute_name );

$terms_array = array();

        if ( ! empty( $terms ) ) {

        foreach ( $terms as $term ) {

      $archive_link = get_term_link( $term->slug, $attribute_name );

      $full_line = '<a href="' . $archive_link . '">'. $term->name . '</a>';

      array_push( $terms_array, $full_line );

        }

        echo $taxonomy->labels->name . ': ' . implode( ', ' . $terms_array );

        }

     }

    }

}

WooCommerce 钩子还提供了许多有用的过滤功能来编辑产品数据。例如，可以使用以下代码片段重新排序产品标签：

/**

 * Reorder product data tabs

 */

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

function woo_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5; // Reviews first

$tabs['description']['priority'] = 10; // Description second

$tabs['additional_information']['priority'] = 15; // Additional information third

return $tabs;

}

或者，可以添加自定义选项卡：

/**

 * Add a custom product data tab

 */

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

function woo_new_product_tab( $tabs ) {

// Adds the new tab

$tabs['test_tab'] = array(

'title' => __( 'New Product Tab', 'woocommerce' ),

'priority' => 50,

'callback' => 'woo_new_product_tab_content'

);

return $tabs;

}

function woo_new_product_tab_content() {

// The new tab content

echo '<h2>New Product Tab</h2>';

echo '<p>Here's your new product tab.</p>';

}

全局页面模板

使用 WooCommerce 的 PHP 代码时，另一个选择是从头开始创建全局自定义产品页面模板。记住：此方法不适用于块主题。

首先，需要将新文件命名为template-custom-product.php，并在顶部写一个打开的 PHP 注释，说明模板的名称：

<?php /* Template Name: Example Template */ ?>

在这种情况下，可以用“全局自定义产品页面模板”或类似内容替换“示例模板”。

此模板将仿照默认的 WooCommerce 产品页面。然后，可以使用 Web 挂钩根据需要对其进行修改。

使用自定义 WooCommerce 产品页面提高销量

自定义 WooCommerce 产品页面可以帮助你有效地展示你的产品。它还能够为客户提供更多选择，并创造吸引受众的独特体验。正如上面提到的，有几种方法可以编辑此页面。

如果有块主题，则可以使用站点编辑器修改全局模板的外观。要添加更多功能，可以安装 WooCommerce 扩展。如果是经验丰富的 WordPress 用户，可以使用 CSS 或 PHP，但这个过程要小心。