WooCommerce

定制 WooCommerce 模板和产品页面

科马尔-博特拉
2023 年 6 月 30 日

如今，Woocommerce 凭借其突破性的灵活性和定制选项在电子商务行业掀起了一场风暴。在电子商务领域，它的排名非常靠前。截至目前，它占据了27% 的电子商务市场份额。

但是，预制模板和产品页面并不能满足每个企业的需求。WooCommerce 有很多自定义选项。

要想表现出色，您的商店必须遵循最佳的定制实践。定制的一个关键组成部分在于产品页面和模板。实施良好的定制策略可以减少放弃购物车的数量。

由于大多数客户都会访问您的网店，因此您应该让浏览和定制产品及模板变得更容易，以确保成功。

本文将向您介绍如何自定义 WooCommerce 模板、编辑产品模板和自定义产品页面。

为什么定制 WooCommerce 模板对店主很重要？

WooCommerce 拥有大量自定义选项。从结账到商店页面、分类页面、感谢页面等，您可以自定义任何内容。这有助于您的商店在众多商店中脱颖而出，但要真正做到与众不同，定制 WooCommerce 模板可能会有所帮助。

编辑网站的默认页面至关重要，这样才能拥有与竞争对手不同的外观和感觉。您还可以自定义默认模板，为您的业务增添优势。

您可以自定义所使用的模板，为您的网店添加功能和细节。有了这些功能，您就可以为购物者提供更好的客户体验。因此，您必须深入了解 WooCommerce 模板编辑，使您的电子商务商店与时俱进。请继续阅读，探索编辑 WooCommerce 模板的方法。

阅读:如何在 WooCommerce 上更新我的借记卡

用 PHP 定制 WooCommerce 模板

通过插件和代码片段，您几乎可以编辑网站的任何方面。使用 WooCommerce，您可以以编程方式编辑模板。

以下是以编程方式自定义模板的两种方法：

重写模板
带挂钩

这两种方法都可以使用，因此请选择最适合您的方法。您应该了解这两种方法的原理区别，以确定何时使用每种方法。

钩子与重写模板

通过钩子，可以使用操作和过滤器进行简单的修改。通过覆盖模板文件，可以执行更复杂的自定义操作。

此外，如果在特定模板文件中使用了钩子，请注意不要用钩子覆盖模板文件。覆盖模板会导致该文件中使用的钩子被替换，不再有效。

在弄清自己的需求后，选择适合自己的方法。

通过覆盖模板修改 WooCommerce 模板

在进行复杂的定制时，覆盖模板比使用钩子更好。

同样，编辑 functions.php 也非常相似。必须编辑 WooCommerce 模板主文件，而不是主题文件。

点击插件 > 插件编辑器，从下拉菜单中选择 WooCommerce，然后选择模板查看模板文件。

本部分包含您需要编辑的所有主要文件，即 archive-product.php、content-product-cat.php 和 content-product.php。还可以编辑多个地方的模板文件，如购物车、结账和电子邮件。

WooCommerce 模板文件中有很多可以更改的内容。这让您可以自定义子目录和文件夹。

下一步是查看定制的 WooCommerce 模板。

为 WooCommerce 模板添加简码。

简码是自定义 WooCommerce 代码的常用方法。在编辑模板时，WordPress 和 WooCommerce 为您提供了大量简码。

以下脚本可在每个产品页面上显示 WooCommerce "我的账户 "仪表板。将其添加到 single-product.php 文件并更新。

<?php
if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}
get_header( ‘shop’ );
while ( have_posts() ) :
the_post();
wc_get_template_part( ‘content,’ ‘single-product’ );
endwhile; // end of the loop.
do_action( ‘woocommerce_sidebar’ );
$t= ‘<div id=”myacc”><h4>My Account</h4>’;
$t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ );

预览产品页面后，仪表板就会出现。

确保客户知道他们之前买过这个产品

还可以修改 WooCommerce 模板，为忠诚客户提供折扣。同样，将代码复制并粘贴到 single-product.php 页面即可。

get_header( ‘shop’ );
while ( have_posts() ) :
the_post();
wc_get_template_part( ‘content’, ‘single-product’ );
endwhile; // end of the loop.
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo ‘<div class=”user-bought”>&hearts; Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’;
endif;
get_footer( ‘shop’ );

客户在查看已购买的产品后会看到结账信息。

探索:Magento 与 WooCommerce：2023 年哪种选择更好？

使用钩子编辑 WooCommerce 模板

如果你不喜欢重写模板文件，钩子对定制 WooCommerce 模板也很有帮助。您可以将钩子作为操作或过滤器添加到网站中，以快速增加网站功能并进行简单更改。

此外，您还可以通过 WooCommerce 钩子编辑店铺模板。这种方法仅适用于简单的定制。复杂的修改最好覆盖模板。

在外观 > 主题编辑器中打开 functions.php 文件，复制并粘贴包含动作或过滤器钩子的代码片段。

以下是一些可用于编辑 WooCommerce 模板的钩子示例。

为单个产品图像添加信息

如果您希望在图片上方显示有关产品的其他信息，请在 functions.php 中插入以下代码。

// Add custom function
function quadlayers_before_single_product() {
echo ‘<h2>Everything is 25% off for this week!</h2>’;
}
// Add the action
add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 );

在单个产品页面上，将显示此信息。

使用插件定制 WooCommerce 模板

在编码方面有困难？没问题。您仍然可以使用插件定制 WooCommerce 模板。随着行业的发展，定制模板的插件层出不穷。

最高效的插件来了：编辑 WooCommerce 模板。这是一个易于使用的免费插件，可让您自定义主题模板。只需点击几下，您就可以交换模板并随时恢复默认值。

以下是一些附加的 WooCommerce插件，可让您自定义模板并提高店铺性能。

WooCommerce 自定义字段： 使用该插件，用户可以在 WooCommerce 产品页面、结账页面等创建独特的字段。
WooCommerce 定制器:该插件专用于 WooCommerce 模板，可为您的商店提供各种额外的自定义选项。
WooCommerce 单个产品页面自定义器:该插件允许您修改 WooCommerce 中单一产品页面的外观。

知道:如何设置 WooCommerce 预订？

定制 WooCommerce 产品页面：为什么它必不可少？

定制 WooCommerce 产品页面至关重要，因此您不能错过。定制 WooCommerce 产品页面的好处和优势数不胜数。有了它，您就可以消除客户的顾虑，建立与众不同的展示方式，并提高客户满意度。

以下是对产品页面进行定制的一些重要好处：

转化优化页面

定制的产品页面可以提高转换率。可以实施许多选项，包括搜索和过滤选项。因此，客户可以更轻松地找到并购买产品，减少摩擦点。

使其更具吸引力

定制的目的通常是设计和布局能吸引客户的产品页面。吸引人的图片、诱人的产品描述以及美观的元素都能激发客户的兴趣。

用户体验有待提高

确保您的设计选择清晰直观、加载速度快、导航简便，让客户获得良好的体验。这将提高转化率，让您的客户成为回头客。

知道:最佳 WooCommerce 产品附加组件

自定义产品页面的方法

为了保持店铺的视觉吸引力，您需要定制产品页面。以下是成功定制产品页面的三个关键方法：

使用插件增强 WooCommerce 产品页面的功能

使用 WooCommerce，您可以轻松创建一个网上商店。您可以使用各种插件（包括自定义产品页面的插件）来改进您的商店。

使用 WooCommerce 插件定制产品页面非常简单：

插件

WooCommerce 产品附加组件:使用此插件，您可以在产品页面上添加复选框、下拉式和文本框。
WooCommerce 360º 图片:使用该插件，您可以按照自己的喜好旋转图片。
用于 WooCommerce 的产品视频:该插件允许添加产品视频。
适用于 WooCommerce 的尺寸表:此插件可轻松为您的产品添加尺寸图。
产品推荐: 此插件可为您的产品页面添加推荐部分。

相关:40+ 最佳 WooCommerce 插件 [免费+付费］

使用 CSS 定制 WooCommerce 产品页面

使用 CSS 来定制 WooCommerce 产品可以让你的网店脱颖而出，给顾客带来独特的体验。要更改产品页面，请编写 CSS 代码。

登录后，转到外观 → 自定义。

黑色 CTA 的 CSS 代码

在附加 CSS 中添加此代码后，默认的 CTA 颜色将变为黑色。

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 的 CSS 代码

此外，要将黑色转换为蓝色，请使用以下 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: #4f5dd5;
border-color: #333333;
color: #ffffff;
}

为 WooCommerce 产品页面添加自定义代码

如果你对技术有一定的了解，可以通过自定义代码方便地实现产品页面自定义。

学习:为什么常见问题对您的 WooCommerce 商店至关重要？

步骤 1：建立全球模板

首先，有必要建立一个用于所有产品页面的全局模板。

首先在顶部添加一个 PHP 注释，说明模板的名称。

创建模板-自定义-产品.php 文件，并将其放入已激活的主题中。

<?php /*Template Name: Customize Product*/ ?>

本模板使用 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_content() - 显示产品的完整描述。
the_excerpt() - 显示产品的简要描述。
the_ID() - 显示产品的 ID。
the_title() - 显示产品的名称。
the_post_thumbnail() - 显示产品图片。

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

显示 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>

显示产品类别缩略图

每个产品类别都有一个缩略图。准备好设置自定义产品显示时，请将此代码添加到主题的 template.php 或 functions.php。

<?php
function cwresponse_get_thumbnail(){
if(is_page(205)){
$args = array(
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>
<div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div>
<?php
endforeach;
wp_reset_postdata();
}
}
add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’);

处理说明标题。

使用 Woocommerce 时，只需取消选中每个产品标签页的描述字段，并编辑 functions.php 文件以包含以下代码。

add_filter( 'woocommerce_product_description_heading', '__return_null' )；

删除产品标题

以下是消除 woocommerce 单个产品标签中标题的方法：在 functions.php 中输入以下代码。

remove_action( 'woocommerce_single_product_summary',
'woocommerce_template_single_title' )；

步骤 3：更改 WooCommerce 模板

将以下代码放入 content-single-product.php 文件或 woocommerce/templates 下的单个产品目录。最好使用 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; }

终于你完成了

了解更多： 如何为 WooCommerce 添加发货功能？