如何使WooCommerce产品属性更加突出

最新推荐文章于 2024-08-22 08:51:08 发布

cunjie3951

最新推荐文章于 2024-08-22 08:51:08 发布

阅读量1.8k

点赞数

文章标签： python java php 大数据 html

WooCommerce产品属性是一个非常有用的功能，但是默认情况下，它们在页面的“ 其他信息”部分中被隐藏了很深。根据您的主题，在用户单击选项卡之前，它们可能不可见，这意味着许多用户可能不会看到它们。

有时，将它们与产品类别一起列出在单个产品页面的上部会更有帮助。在本教程中，我将向您展示如何将产品属性从“ 其他信息”标签移动到页面的顶部。

您需要什么

要继续进行，您需要：

WordPress的开发安装。
代码编辑器。
WooCommerce已安装并激活。
添加的产品-我已经导入了WooCommerce随附的虚拟产品数据；有关如何执行此操作的详细信息，请参阅本指南。
添加了一个或多个产品属性（带有虚拟数据的内置颜色属性无法以标准方式运行）。
激活了与WooCommerce兼容的主题，我正在使用Storefront 。

要在单个产品页面顶部附近添加属性，我们将执行以下操作：

创建一个空插件并激活它。
查看WooCommerce源代码，以识别控制添加到页面底部标签的产品属性的过滤器。
添加连接到该过滤器的函数，以删除属性选项卡。
再次查看源文件，以确定在页面顶部引入内容的挂钩。
与此挂钩的功能。

让我们先来看一下默认情况下产品属性的显示方式。我创建了一个名为Size的属性，并向其中添加了三个值：small，medium和large。此处显示在产品页面底部的“ 其他信息”部分中：

我们希望将这些产品属性从屏幕底部移到产品说明下方的左上角。

创建插件

在您的wp-content / plugins文件夹中，创建一个新文件。我叫woocommerce-prominent-product-attributes.php 。打开该文件，然后添加以下内容：

<?php

/**
 * Plugin Name: WooCommerce Prominent Product Attributes
 * Plugin URI: https://code.tutsplus.com/tutorials/making-woocommerce-product-attributes-more-prominent--cms-25438
 * Description: Make WooCommerce product attributes more prominent by moving them out of the "more information" tab onto the top of the page on single product pages (requires WooCommerce to be activated).
 * Version: 1.0.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 * License: GPL-3.0+
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 * Domain Path: /lang
 * Text Domain: tutsplus
 */

保存文件，然后转到WordPress仪表板中的“ 插件”屏幕。激活插件。

WooCommerce源代码：产品属性显示

让我们首先确定用于输出产品属性的函数和挂钩。这涉及浏览一些插件文件：

输出单个产品页面的woocommerce/templates/single-product.php是woocommerce/templates/single-product.php 。
在该文件中，有一个对content-single-product.php文件的get_template_part()调用。
在该文件中，有一个名为woocommerce_after_single_product_summary的操作。它具有三个功能：我们需要查看的一个功能是woocommerce_output_product_data_tabs() 。
您可以在woocommerce/includes/wc-template-functions.php找到woocommerce_output_product_data_tabs() woocommerce/includes/wc-template-functions.php 。
该函数使用wc_get_template()获取另一个模板部分，在本例中为wooocommerce/templates/single-product/tabs/tabs.php 。
在那个文件中（我保证到达那里），有一个名为$tabs的变量，定义为apply_filters( 'woocommerce_product_tabs', array() ); 。
因此，要删除产品属性选项卡，我们需要创建一个函数来删除该选项卡，并将其挂接到woocommerce_product_tabs过滤器。

！我们到了最后。

使用过滤器从选项卡中删除产品属性

幸运的是，WooCommerce文档提供了有关如何使用此过滤器删除选项卡的指南，这使我们的工作更加轻松。

在您的插件文件中，添加以下代码：

/**
 * Removes the "Additional Information" tab that displays the product attributes.
 * 
 * @param array $tabs WooCommerce tabs to display.
 * 
 * @return array WooCommerce tabs to display, minus "Additional Information".
 */
function tutsplus_remove_product_attributes_tab( $tabs ) {

    unset( $tabs['additional_information'] );
    
    return $tabs;

}

add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100 );

此函数将$tabs作为其对象，因为这是我们正在使用的变量。它从$tabs变量存储的值数组中删除'additional_information'选项$tabs 。请注意，在挂钩函数时，我使用了100的高优先级，以确保它在首先添加选项卡的函数之后触发。

保存文件并刷新产品页面：

因此，该选项卡已删除。现在，我们需要在页面顶部重新添加产品属性。

在代码中查找要添加属性的位置

我们再次需要确定在代码中的何处需要添加一个函数来显示产品属性。换句话说，我们需要找到一个动作挂钩。

回到content-single-product.php文件，有一个名为woocommerce_single_product_summary的钩子，由七个函数使用，每个函数输出有关产品的不同数据，即：

标题
等级
价格
摘录（即简短描述）
添加到购物车按钮
元数据
分享连结

我想在用于元数据的部分中添加我的属性，因此让我们看一下输出该属性的函数。

该函数位于wc_template_functions.php文件中，它使用wc_get_template()调用另一个包含文件woocommerce/templates/single/product/meta.php 。

在meta.php文件中，有代码来对产品输出的元数据，与woocommerce_product_meta_start前钩和woocommerce_product_meta_end后钩。因此，我们可以使用这两个挂钩之一来输出我们的产品属性。让我们使用最后一个，因为这将使属性出现在类别和标记之后。

编写函数以输出产品属性

复制WooCommerce已经提供的代码

要输出我们产品的分类术语列表，我们可以使用WooCommerce提供的名为list_attributes()的函数。您可以在templates/single/product/tabs/additional-information.php文件中找到此功能。

在您的插件文件中，添加以下内容：

/**
 * Displays product attributes in the top right of the single product page.
 * 
 * @param $product
 */
function tutsplus_list_attributes( $product ) {
    
    global $product;

    $product->get_attributes();
        
}

add_action( 'woocommerce_product_meta_end', 'tutsplus_list_attributes' );

请注意，您不需要使用优先级，因为WooCommerce没有将任何其他功能挂钩到该动作挂钩。

现在刷新您的产品页面：

现在显示属性。他们使用的是带有Storefront主题的类似于选项卡的界面，因为这是为默认的“ 其他信息”选项卡设置的，输出HTML使用了一个表，该表提供了默认的布局。

没有表的替代方法

该表并不理想：最好有一个产品属性列表，以使其上方的产品类别列表匹配。来做吧。

WooCommerce将属性存储为自定义分类法。当将属性存储到数据库时，为每个属性值创建的pa_前面带有pa_后缀。

但是，它不会像在WordPress中注册常规自定义分类法时那样将这些分类法存储在wp_term_taxonomy表和wp_terms表中。相反，WooCommerce为属性创建表，这意味着数据存储方式不同。这意味着在输出列表时，我们必须采取一种更round回的方法来访问每种分类的标签。

在您的tutsplus_list_attributes()函数中，删除函数内部的两行。用以下代码替换它们：

global $product;
global $post;

$attributes = $product->get_attributes();

if ( ! $attributes ) {
    
    return;
    
}

foreach ( $attributes as $attribute ) {
             
    // Get the taxonomy.
    $terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );
    $taxonomy = $terms[ 0 ]->taxonomy;
         
    // Get the taxonomy object.
    $taxonomy_object = get_taxonomy( $taxonomy );
    
    // Get the attribute label.
    $attribute_label = $taxonomy_object->labels->name;
    
    // Display the label followed by a clickable list of terms.
    echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );
    
}

该代码的作用如下：