Question

我想从插件WooCommerce产品比较中更改比较按钮的外观。目前，它显示一个带标签的复选框和一个打开比较页面的链接。

我检查了文档（https://docs.woocommerce.com/document/woocommerce-products-compare/）并找到了一个更改按钮的钩子。不幸的是，没有太多额外的信息。

它说，您可以使用以下钩子更改比较按钮的显示：

apply_filters( 'woocommerce_products_compare_compare_button', html )

据我了解，html是我需要添加自定义代码的地方，对吗？

我试过这样的事情：

$compare_btn = 'my button html';
apply_filters( 'woocommerce_products_compare_compare_button', $compare_btn );

但按钮没有变化。我有什么想念吗？

我应该如何添加HTML的动态部分（如产品ID）。当前输出如下所示：

<p class="woocommerce-products-compare-compare-button">
    <label for="woocommerce-products-compare-checkbox-1876"><input type="checkbox" class="woocommerce-products-compare-checkbox" data-product-id="1876" checked="checked" id="woocommerce-products-compare-checkbox-1876">&nbsp;Compare</label>
    <a href="https://example.com/products-compare" title="Compare Page" class="woocommerce-products-compare-compare-link"><span class="dashicons dashicons-external"></span></a>
</p>

编辑：我在插件文件中找到了该功能。就是这样：

public function display_compare_button() {
    global $post;

    $name = __( 'Compare', 'woocommerce-products-compare' );

    $checked = checked( $this->is_listed( $post->ID ), true, false );

    $html = '<p class="woocommerce-products-compare-compare-button"><label for="woocommerce-products-compare-checkbox-' . esc_attr( $post->ID ) . '"><input type="checkbox" class="woocommerce-products-compare-checkbox" data-product-id="' . esc_attr( $post->ID ) . '" ' . $checked . ' id="woocommerce-products-compare-checkbox-' . esc_attr( $post->ID ) . '" />&nbsp;' . $name . '</label> <a href="' . get_home_url() . '/' . $this->get_endpoint() . '" title="' . esc_attr__( 'Compare Page', 'woocommerce-products-compare' ) . '" class="woocommerce-products-compare-compare-link"><span class="dashicons dashicons-external"></span></a></p>';

    echo apply_filters( 'woocommerce_products_compare_compare_button', $html, $post->ID, $checked );

    return true;
}

有没有办法覆盖这个功能？

Answer 1

尝试以下操作（您必须更改按钮）：

add_filter( 'woocommerce_products_compare_compare_button', 'custom_products_compare_compare_button', 20, 3 );
function custom_products_compare_compare_button( $html, $post_id, $checked ){
    global $post;

    $name = __( 'Compare', 'woocommerce-products-compare' );

    // HERE below, make your changes to the HTML ($this need to be replaced by an instance of the class object)
    $html = '<p class="woocommerce-products-compare-compare-button"><label for="woocommerce-products-compare-checkbox-' . esc_attr( $post->ID ) . '"><input type="checkbox" class="woocommerce-products-compare-checkbox" data-product-id="' . esc_attr( $post->ID ) . '" ' . $checked . ' id="woocommerce-products-compare-checkbox-' . esc_attr( $post->ID ) . '" />&nbsp;' . $name . '</label> <a href="' . get_home_url() . '/' . $this->get_endpoint() . '" title="' . esc_attr__( 'Compare Page', 'woocommerce-products-compare' ) . '" class="woocommerce-products-compare-compare-link"><span class="dashicons dashicons-external"></span></a></p>';

    return $html;
}

代码放在活动子主题（或活动主题）的function.php文件中。

WooCommerce产品比较插件

1 个答案: