title: Change button of WooCommerce Products Compare plugin
body: <p>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.</p>
  
  <p>I checked the docs (<a href="https://docs.woocommerce.com/document/woocommerce-products-compare/" rel="nofollow noreferrer">https://docs.woocommerce.com/document/woocommerce-products-compare/</a>) and found an hook to change the button. Unfortunately there is not much additional information.</p>
  
  <p>It says, that you can change the display of the compare button with the following hook:</p>
  
  <pre><code>apply_filters( 'woocommerce_products_compare_compare_button', html )
  </code></pre>
  
  <p>As I understand it, the <code>html</code> is the place where I need to add my custom code, right?</p>
  
  <p>I tried something like this:</p>
  
  <pre><code>$compare_btn = 'my button html';
  apply_filters( 'woocommerce_products_compare_compare_button', $compare_btn );
  </code></pre>
  
  <p>But the button doesn't change.
  Is there anything I miss?</p>
  
  <p>And how should I add the dynamic part of the HTML (like product IDs). The current output looks like this:</p>
  
  <pre><code>&lt;p class="woocommerce-products-compare-compare-button"&gt;
      &lt;label for="woocommerce-products-compare-checkbox-1876"&gt;&lt;input type="checkbox" class="woocommerce-products-compare-checkbox" data-product-id="1876" checked="checked" id="woocommerce-products-compare-checkbox-1876"&gt;&amp;nbsp;Compare&lt;/label&gt;
      &lt;a href="https://example.com/products-compare" title="Compare Page" class="woocommerce-products-compare-compare-link"&gt;&lt;span class="dashicons dashicons-external"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Edit: I found the function in the plugin files. This is it:</p>
  
  <pre><code>public function display_compare_button() {
      global $post;
  
      $name = __( 'Compare', 'woocommerce-products-compare' );
  
      $checked = checked( $this-&gt;is_listed( $post-&gt;ID ), true, false );
  
      $html = '&lt;p class="woocommerce-products-compare-compare-button"&gt;&lt;label for="woocommerce-products-compare-checkbox-' . esc_attr( $post-&gt;ID ) . '"&gt;&lt;input type="checkbox" class="woocommerce-products-compare-checkbox" data-product-id="' . esc_attr( $post-&gt;ID ) . '" ' . $checked . ' id="woocommerce-products-compare-checkbox-' . esc_attr( $post-&gt;ID ) . '" /&gt;&amp;nbsp;' . $name . '&lt;/label&gt; &lt;a href="' . get_home_url() . '/' . $this-&gt;get_endpoint() . '" title="' . esc_attr__( 'Compare Page', 'woocommerce-products-compare' ) . '" class="woocommerce-products-compare-compare-link"&gt;&lt;span class="dashicons dashicons-external"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;';
  
      echo apply_filters( 'woocommerce_products_compare_compare_button', $html, $post-&gt;ID, $checked );
  
      return true;
  }
  </code></pre>
  
  <p>Is there any way to overwrite the function?</p>