如何自定义WooCommerce的产品详情页布局，添加更多更丰富的元素

我们之前介绍过如何在其他页面调用产品的ID从而来实现自定义产品详情页，但是不少粉丝觉得每创建一个产品都要这样操作显得比较麻烦。

所以今天这篇文章就教你如何以更加灵活的方式，用古腾堡-块主题完成详情页设置。

视频教程

第一步. 更改详情页布局

默认情况下，WooCommerce的产品添加和修改页面是下面的样式，我们只能在产品描述区域放置文字和图片等内容，显然自定义详情内容不是很方便。

第二步. 修改编辑器

将下面的代码复制下来。

// Enable Gutenberg editor for WooCommerce
function j0e_activate_gutenberg_product($can_edit, $post_type) {
    if ($post_type == 'product') {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'j0e_activate_gutenberg_product', 10, 2);

// enable taxonomy fields for woocommerce with gutenberg on
function j0e_enable_taxonomy_rest($args) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter('woocommerce_taxonomy_args_product_cat', 'j0e_enable_taxonomy_rest');
add_filter('woocommerce_taxonomy_args_product_tag', 'j0e_enable_taxonomy_rest');

然后到WordPress后台选择外观下的主题文件编辑器。