如何自定义 woocommerce产品页面（3种方法）

WooCommerce 产品页面是什么

WooCommerce 产品页面的示例。

WooCommerce 中的产品页面是显示单个产品的页面。页面包含所有产品详细信息，例如其名称、描述、价格、图片和变体（多属性产品有）。

下面是 WooCommerce 产品页面上的一些关键组件：

1. 产品名称：产品名称通常会在顶部显著位置显示。
2. 产品描述：详细的产品描述，包括其特性和优点。
3. 产品图片：从不同角度拍摄的高质量产品图片对于帮助客户直观地了解产品至关重要。
4. 产品价格：产品价格和折扣或促销信息显示在页面上。查看 Cloudways 的一些托管优惠券。
5. 添加到购物车按钮：添加到购物车按钮允许客户将产品添加到他们的购物车中。
6. 产品变体：如果产品有不同的尺寸、颜色或其他变体，这些选项通常会显示在产品页面上。
7. 产品评论：客户评论和评分可显示在产品页面上，以帮助其他客户做参考。
8. 相关产品：可以在产品页面上显示与正在查看的产品相关的其他产品。

定制产品页面的优势

以下因素是管理员可能需要考虑自定义 WooCommerce 产品页面的一些原因：

• 为了将商店与可能使用相同默认 WooCommerce 产品页面布局的竞争对手区分开来。
• 通过将品牌颜色、字体和设计元素融入产品页面来强化品牌形象。
• 通过让客户更轻松地找到所需信息改善用户体验。例如，可以添加产品图片，包括客户评论或相关展示产品。

如何自定义 WooCommerce 产品页面

有三种方法可以自定义 WooCommerce 产品页面。

方法 1：通过扩展自定义 WooCommerce 产品页面

WooCommerce 是一个功能强大的电子商务平台。它提供了广泛的扩展，可以为商店添加新特性和功能，包括自定义产品页面。

一些流行的 WooCommerce 扩展可以帮助管理员自定义产品页面：

方法 2：通过 CSS 自定义 WooCommerce 产品页面

使用 CSS 自定义 WooCommerce 产品是让电商网站更精美，给客户创造独特外观和感觉的好方法。如果有 CSS 知识，可以简单地编写代码来更改产品页面。

登录WooCommerce 仪表板后，转到外观 → 自定义。

然后转到附加 CSS添加自定义 CSS。

黑色 CTA 的 CSS 代码

如果想将 CTA 颜色从默认更改为黑色，请在“附加 CSS”中添加以下代码。

button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt {
background-color: #1d1a1a;
border-color: #333333;
color: #ffffff;
}

CTA 的外观如下。

这就是在 WooCommerce 中使用产品页面设计元素的方法。

方法 3：通过自定义代码自定义 WooCommerce 产品页面

如果有技术和编码基础，可以通过自定义代码定制 WooCommerce 产品页面。

步骤 1：创建全局模板

第一步是创建一个全局模板，该模板对于所有产品页面都相同。

• 在文件顶部写一个打开的 PHP 注释，指出模板的名称。
• 在激活的主题文件夹下创建一个名为template-custom-product.php的模板文件

<?php /*模板名称：定制产品*/ ?>

该模板基于默认的 WooCommerce 产品页面。它将包含以下代码。

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>
<?php _e( 'No Products'); ?>
</p>
<?php endif; ?>

这是一个非常基本的模板。虽然它确实可以完成工作，但可以通过几个内置的 WooCommerce 功能进一步扩展此页面的功能。

以下列表是 WooCommerce 功能的有限选择，其中包含有关自定义产品展示页面的广泛信息：

• the_permalink() – 显示产品 URL。
• the_content() – 显示产品的完整描述。
• the_excerpt() – 显示产品的简要描述。
• the_ID() – 显示产品的 ID。
• the_title() – 显示产品的名称。
• the_post_thumbnail() – 显示产品图像。

步骤 2：在激活主题的 functions.php 中添加功能

2.1. 显示 WooCommerce 产品的类别

类别是商店中对多种产品进行分类的重要方式。如果想要在页面上显示产品类别，将此代码段放置在已激活主题的functions.php文件中。

<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2. 显示产品类别的缩略图

每个产品类别都有自己的缩略图。如果需要将其包含在自定义产品显示中，将此代码段放在激活主题的functions.php或template.php文件中。

2.3. 删除描述标题

如果想从 Woocommerce 单个产品选项卡中删除描述标题，在激活主题的functions.php文件中添加下面代码。

add_filter( 'woocommerce_product_description_heading', '__return_null' );

2.4. 删除产品标题

如果想从 Woocommerce 单个产品标签中删除产品标题，在激活主题的functions.php中添加以下代码。

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' );

步骤 3：在 WooCommerce 插件中自定义 Woocommerce 模板

转到woocommerce\templates目录并将以下代码插入content-single-product.php或 single product 文件夹。但是，建议使用functions.php文件。

<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => get_the_title( get_post_thumbnail_id() )
) );

$attachment_count = count( $product->get_gallery_attachment_ids() );

if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

} else {

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

}
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>

如果不想编写编码，编写简单的 CSS 代码即可。

.images { float: right !important; }

产品页面的关键考虑因素

自定义产品页面对于改善用户体验至关重要。下面是自定义产品页面时需要记住的一些关键注意事项：

1. 用户体验：定制产品页面时最重要的考虑因素是用户体验。页面应易于浏览并提供有关产品的所有必要信息。
2. 产品信息：产品信息是产品页面的关键元素。它应该详细准确，并包含图片、视频和评论等。
3. 移动优化：越来越多的客户用手机端在线购物。确保产品页面针对移动设备进行优化、导航方便、图片大、号召性用语明确，这一点很重要。
4. SEO 优化：优化搜索引擎的产品页面对于确保产品对潜在客户可见非常重要。确保产品页面具有相关且描述性的标题、元描述和关键字。
5. 个性化：个性化产品页面有助于提高参与度和销量。使用客户数据根据客户的浏览和购买历史记录显示个性化的产品推荐、相关产品和促销活动。
6. 社会证明：包括客户评论、评级和推荐可以帮助与潜在客户建立信任并提高转化率。
7. 清晰的定价和运输信息：客户在做出购买决定之前需要了解产品的价格和任何运输费用。确保这些信息在产品页面上清晰显示。
8. 追加销售和交叉销售：使用追加销售和交叉销售选项定制产品页面有助于提高平均订单价值。显示客户可能有兴趣购买的相关产品或互补产品。

总结

在 WooCommerce 中自定义产品页面可以为客户创造独特的购物体验。借助 WooCommerce 的内置功能和灵活性，可以轻松修改布局、添加新元素以及调整 CSS 和 HTML 代码，让产品页面更有特色。

常见问题

问：我可以自定义 WooCommerce 产品页面吗？
是的，可以使用主题、Elementor 等插件，或者通过编辑模板文件和使用 WooCommerce 挂钩来自定义它。

问：如何更改 WooCommerce 中的产品列表页面布局？
通过主题定制器修改它，使用页面构建器插件，应用自定义 CSS，或编辑 archive-product.php 模板。

问) 如何以编程方式自定义 WooCommerce 单个产品页面？
要以编程方式自定义 WooCommerce 单个产品页面，按照以下步骤操作：

首先，创建一个子主题，以确保更改在主题更新期间不会被覆盖。
将 single-product.php 文件从 WooCommerce 插件目录复制到子主题的 woocommerce 文件夹中。

add_action( 'woocommerce_after_single_product_summary', 'custom_function', 10 );
function custom_function() {
    echo '<p>Custom text or HTML here</p>';
}

使用 WooCommerce 操作挂钩和过滤器添加或删除元素。

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'custom_title_function', 5 );
function custom_title_function() {
    echo '<h1>Custom Title</h1>';
}

通过修改 functions.php 文件中的函数来自定义产品数据（价格、说明等）。
使用自定义 CSS 进一步调整产品页面的外观。

问）如何在 WooCommerce 中编辑单个产品页面？
可以使用页面构建器、自定义字段、WooCommerce 挂钩或覆盖 single-product.php 模板。