Я хочу изменить внешний вид кнопки сравнения из плагина WooCommerce Products Compare. На данный момент он показывает флажок с меткой и ссылку, чтобы открыть страницу сравнения.
Я проверил документы (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 (например, идентификаторы продуктов). Текущий вывод выглядит так:
<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"> 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 ) . '" /> ' . $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;
}
Есть ли способ перезаписать функцию?
Попробуйте следующее (где вам придется вносить изменения в кнопки):
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 ) . '" /> ' . $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 вашей активной дочерней темы (или активной темы).
Других решений пока нет …