Change button of WooCommerce Products Compare plugin

Question

I want to change the appearance of the compare button from the plugin WooCommerce Products Compare. At the moment, it shows an checkbox with label and a link to open the compare page.

I checked the docs (https://docs.woocommerce.com/document/woocommerce-products-compare/) and found an hook to change the button. Unfortunately there is not much additional information.

It says, that you can change the display of the compare button with the following hook:

apply_filters( 'woocommerce_products_compare_compare_button', html )

As I understand it, the html is the place where I need to add my custom code, right?

I tried something like this:

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

But the button doesn't change. Is there anything I miss?

And how should I add the dynamic part of the HTML (like product IDs). The current output looks like this:

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

Edit: I found the function in the plugin files. This is it:

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;
}

Is there any way to overwrite the function?

Answer 1

Try the following (where you will have to make your button changes):

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;
}

Code goes in function.php file of your active child theme (or active theme).