在本教程中，我将演示如何操作和自定义 WooCommerce 产品页面设计布局以提供更多详细信息。这是使用可用数据来增强用户体验的绝佳方式。
自定义 WooCommerce 产品页面布局设计
由于 WooCommerce 产品页面只是附加了产品类型的帖子，因此我将利用标准 WordPress 帖子功能来创建显示元素，例如：
- the_title() – 显示产品的名称。
- the_excerpt() – 显示产品的简要说明。
- the_content() – 显示产品的完整描述。
- the_permalink() – 显示产品的 URL。
- the_ID() – 显示产品的 ID。
- the_post_thumbnail() – 显示产品图像。
1234567891011121314151617181920212223242526272829 <?php get_header ( ) ; $参数 = 数组( 'posts_per_page' = > 3 , '帖子类型' = > '产品' ） ; $wc_查询 = 新的 WP_Query ( $params ) ; ? > <ul> _ <?php 如果 ( $wc_query – > have_posts ( ) ) : ?> <?php 尽管 ( $wc_query – > have_posts ( ) ) : $wc_query – > the_post ( ) ; ?> <李> <h3> _ _ <一 href = " <?php the_permalink ( ) ; ?> >> <?php 标题（ ） ; ?> </a> _ _ </h3> _ _ <?php the_post_thumbnail ( ) ; ?> <?php the_摘录（ ） ； ?> </li> _ _ <?php 最后; ?> <?php wp_reset_postdata ( ) ; ?> <?php 别的： ?> <李> <?php _e （ “未找到产品” ） ； ?> </li> _ _ <?php 万一; ? > </ul> <? php 获取页脚（ ） ； ?>
您可以将此代码放入您的主题文件中。或者，您可以创建自定义页面模板。为此，请使用以下命令：
12345 <?php /* 模板名称：修改产品 */ ?>
WooCommerce 产品展示
显示产品价格的最简单的解决方案是使用 get_price_html 方法：
1234567891011121314151617181920212223242526272829303132333435363738394041 <?php 尽管 ( $wc_query – > have_posts ( ) ) : $wc_query – > the_post ( ) ; ?> < li > < h3 > < a href = " <?php the_permalink ( ) ; ?> >> < ?php 标题（ ） ; ? > </a> </h3> < ? php _ the_post_thumbnail ( ) ; ?> <?php the_excerpt ( ) ;回声 $产品– > get_price_html ( ) ;回声 $产品– > get_sale_price ( ) ;回声 $产品– > get_regular_price ( ) ;回声 $产品– > get_price ( ) ;回声 $产品– > get_price_without_tax ( ) ;回声 $产品– > get_sale_price ( ) ;回声 wc_price ( $product – > get_price_include_tax ( 1 , $产品– > get_sale_price ( ) ) ) ; ? > </li> < ?php 最后; ?>
我希望您已经理解了上述代码片段中的代码，现在您可以轻松自定义 Woocommerce 产品的布局”。这是完整的代码，通过它您可以轻松显示 WooCommerce 变量产品布局。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 676869707172737475 <?php get_header ( ) ; $参数 = 数组( 'posts_per_page' = > 3 , '帖子类型' = > '产品' ） ; $wc_查询 = 新的 WP_Query ( $params ) ; ? > <ul> < ?php 如果 ( $wc_query – > have_posts ( ) ) : ?> <?php 尽管 ( $wc_query – > have_posts ( ) ) : $wc_query – > the_post ( ) ; ?> < li > < h3 > < a href = " <?php the_permalink ( ) ; ?> >> < ?php 标题（ ） ; ? > </a> </h3> < ? php _ the_post_thumbnail ( ) ; ?> <?php the_excerpt ( ) ;回声 $产品– > get_price_html ( ) ;回声 $产品– > get_sale_price ( ) ;回声 $产品– > get_regular_price ( ) ;回声 $产品– > get_price ( ) ;回声 $产品– > get_price_without_tax ( ) ;回声 $产品– > get_sale_price ( ) ;回声 wc_price ( $product – > get_price_include_tax ( 1 , $产品– > get_sale_price ( ) ) ) ; ? > </li> < ?php 最后; ?> <?php wp_reset_postdata ( ) ; ?> <?php 别的： ? > <li> < ?php _e （ “未找到产品” ） ； ? > </li> < ?php 万一; ?> </ul> < ? php get_footer ( ) ; ?>
结论
在本教程中，我们讨论了如何轻松更改或自定义 WooCommerce 产品页面布局设计，以便为访问者提供更多信息。如果您需要代码方面的帮助或想添加到讨论中，请在下面发表评论。
RSS