プラグインWooCommerceのwoocommerce_emogrifierフィルタの使用方法・解説

概要

woocommerce_emogrifier フィルタは、WooCommerceのカスタマイズにおいて、HTMLメールの本文に埋め込むためのスタイルを操作する際に使用されます。このフィルタを利用することで、WooCommerceのメールテンプレートに対して、柔軟な変更やカスタマイズが可能になります。以下は、woocommerce_emogrifier がよく使用されるケースの例です。

HTMLメールのスタイルの追加
独自のCSSルールの挿入
既存のスタイルの上書き
メールのレスポンシブデザインの強化
ショッピングカートの内容のスタイリング
注文確認メールのカスタマイズ

構文

add_filter( 'woocommerce_emogrifier', 'my_custom_emogrifier', 10, 2 );

パラメータ

$html (string): メールテンプレートのHTMLコンテンツ
$email_type (string): メールのタイプ（例：新規注文、顧客のメールなど）

戻り値

(string): 修正されたHTMLコンテンツ

バージョン

WooCommerce バージョン: 5.0.0 以降
WordPress バージョン: 5.0.0 以降

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプルコード 1

add_filter( 'woocommerce_emogrifier', 'custom_email_styles', 10, 2 );

function custom_email_styles( $html, $email_type ) {
    if ( 'customer_invoice' === $email_type ) {
        $html = str_replace( '</head>', '<style>.invoice { font-size: 14px; }</style></head>', $html );
    }
    return $html;
}

このコードは、顧客請求書のメールに特定のスタイルを追加します。

サンプルコード 2

add_filter( 'woocommerce_emogrifier', 'prepend_custom_css', 10, 2 );

function prepend_custom_css( $html, $email_type ) {
    $custom_css = 'body { background-color: #f0f0f0; }';
    $html = str_replace( '</head>', "<style>{$custom_css}</style></head>", $html );
    return $html;
}

このコードは、すべてのメールに背景色を追加します。

サンプルコード 3

add_filter( 'woocommerce_emogrifier', 'remove_default_styles', 10, 2 );

function remove_default_styles( $html, $email_type ) {
    $html = preg_replace( '/<style.*?</style>/is', '', $html );
    return $html;
}

このコードは、メールからデフォルトのスタイルを削除します。

サンプルコード 4

add_filter( 'woocommerce_emogrifier', 'inline_styles_for_order_confirmation', 10, 2 );

function inline_styles_for_order_confirmation( $html, $email_type ) {
    if ( 'customer_processing_order' === $email_type ) {
        $html = str_replace( '</head>', '<style>.order-details { font-weight: bold; }</style></head>', $html );
    }
    return $html;
}

このコードは、顧客の処理中の注文メールの詳細を太字にします。

サンプルコード 5

add_filter( 'woocommerce_emogrifier', 'add_custom_font_style', 10, 2 );

function add_custom_font_style( $html, $email_type ) {
    $font_style = 'body { font-family: Arial, sans-serif; }';
    $html = str_replace( '</head>', "<style>{$font_style}</style></head>", $html );
    return $html;
}

このコードは、すべてのメールに新しいフォントスタイルを適用します。

すべてのサンプルコードは一般的なカスタマイズ例であり、著作権フリーです。

概要

構文