更改 WooCommerce 电子邮件通知中产品图片的位置
Changing the position of the product image in WooCommerce email notifications
基于 答案代码,我编写了以下内容以在 WooCommerce 电子邮件通知中显示产品图片。
add_filter( 'woocommerce_email_order_items_args', 'custom_email_order_items_args', 10, 1 );
function custom_email_order_items_args( $args ) {
$args['show_image'] = true;
$args['image_size'] = array( 32, 32 );
$args['show_sku'] = true;
return $args;
}
add_filter( 'woocommerce_order_item_thumbnail', 'add_email_order_item_permalink', 10, 2 ); // Product image
add_filter( 'woocommerce_order_item_name', 'add_email_order_item_permalink', 10, 2 ); // Product name
function add_email_order_item_permalink( $output_html, $item, $bool = false ) {
// Only email notifications
if( is_wc_endpoint_url() )
return $output_html;
$product = $item->get_product();
return '<a href="'.esc_url( $product->get_permalink() ).'">' . $output_html . '</a>';
}
function cw_edit_order_item_name( $name ) {
$name = '<br><br/>' .$name;
return $name . '<br><br /><center><strong>SKU:</strong></center>';
}
add_filter( 'woocommerce_order_item_name', 'cw_edit_order_item_name' );
我在订单电子邮件中的 WooCommerce 订单项 table 遇到了这个问题,需要将产品缩略图移动到产品标题的左侧,并且标题应该整齐地放在右侧。
我们将不得不更改订单项 tables 列的宽度,以便很好地适应。这也需要移动响应。
这是我想要实现的目标的屏幕截图:
这就是我所拥有的:
需要考虑的事情,
- 必须显示SKU
- Link必须包含产品
- 栏目需要更宽。
非常感谢任何帮助。
您可以通过多种方式解决您的问题。
为了理解我的回答,我 copied/pasted 负责 templates/emails/email-order-items.php 行 33 - 58 @version 3.7.0
的电子邮件中输出的一段代码
if ( is_object( $product ) ) {
$sku = $product->get_sku();
$purchase_note = $product->get_purchase_note();
$image = $product->get_image( $image_size );
}
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'order_item', $item, $order ) ); ?>">
<td class="td" style="text-align:<?php echo esc_attr( $text_align ); ?>; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap:break-word;">
<?php
// Show title/image etc.
if ( $show_image ) {
echo wp_kses_post( apply_filters( 'woocommerce_order_item_thumbnail', $image, $item ) );
}
// Product name.
echo wp_kses_post( apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ) );
// SKU.
if ( $show_sku && $sku ) {
echo wp_kses_post( ' (#' . $sku . ')' );
}
// allow other plugins to add additional product information here.
do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, $plain_text );
如您所见,如果$show_image
为真,将显示产品图片。 默认情况下这是 false,但这可以通过 woocommerce_email_order_items_args
过滤器挂钩进行更改。
产品名称默认显示,但不是link
sku is/can 的显示也是通过 woocommerce_email_order_items_args
过滤器挂钩 (默认为 false) 确定的,但是有没有选项可以将 HTML 标签添加到 sku
的输出
所以你可以使用几个不同的过滤器钩子来放置从 false 到 true 的值
以及向输出添加额外的 HTML(sku 除外)。所以这只是部分 controllable/adaptable.
但是,在最后一行 我们找到了woocommerce_order_item_meta_start
动作挂钩。这允许其他插件添加额外的产品信息。所以我们要使用那个钩子,因为它可以 hold/modify 以前的过滤器钩子包含的任何东西。
所以你得到:
// Displayed by default, so hide!
function filter_woocommerce_order_item_name( $item_name, $item, $false ) {
// Only email notifications
if ( is_wc_endpoint_url() ) return $item_name;
$item_name = '';
return $item_name;
}
add_filter( 'woocommerce_order_item_name', 'filter_woocommerce_order_item_name', 10, 3 );
// NEW OUTPUT
function action_woocommerce_order_item_meta_start( $item_id, $item, $order, $plain_text ) {
// Only email notifications
if ( is_wc_endpoint_url() ) return;
// Settings
$image_size = array( 64, 64 );
// Get product
$product = $item->get_product();
if ( is_object( $product ) ) {
$sku = $product->get_sku();
$image = $product->get_image( $image_size );
}
// OUTPUT
// Show image
echo '<span style="float:left;width: fit-content;">' . $image. '</span>';
// Product name + link + SKU (if set).
if ( $sku ) {
echo '<span><a href="' . esc_url( $product->get_permalink() ). '">' . $item->get_name() . ' (#' . $sku . ')' . '</a></span>';
} else {
echo '<span><a href="' . esc_url( $product->get_permalink() ). '">' . $item->get_name() . '</a></span>';
}
}
add_action( 'woocommerce_order_item_meta_start', 'action_woocommerce_order_item_meta_start', 10 , 4 );
结果
注意:通过在我的回答中调整 HTML 和随附的 CSS,您可以根据自己的意愿完全调整输出
基于
add_filter( 'woocommerce_email_order_items_args', 'custom_email_order_items_args', 10, 1 );
function custom_email_order_items_args( $args ) {
$args['show_image'] = true;
$args['image_size'] = array( 32, 32 );
$args['show_sku'] = true;
return $args;
}
add_filter( 'woocommerce_order_item_thumbnail', 'add_email_order_item_permalink', 10, 2 ); // Product image
add_filter( 'woocommerce_order_item_name', 'add_email_order_item_permalink', 10, 2 ); // Product name
function add_email_order_item_permalink( $output_html, $item, $bool = false ) {
// Only email notifications
if( is_wc_endpoint_url() )
return $output_html;
$product = $item->get_product();
return '<a href="'.esc_url( $product->get_permalink() ).'">' . $output_html . '</a>';
}
function cw_edit_order_item_name( $name ) {
$name = '<br><br/>' .$name;
return $name . '<br><br /><center><strong>SKU:</strong></center>';
}
add_filter( 'woocommerce_order_item_name', 'cw_edit_order_item_name' );
我在订单电子邮件中的 WooCommerce 订单项 table 遇到了这个问题,需要将产品缩略图移动到产品标题的左侧,并且标题应该整齐地放在右侧。
我们将不得不更改订单项 tables 列的宽度,以便很好地适应。这也需要移动响应。
这是我想要实现的目标的屏幕截图:
这就是我所拥有的:
需要考虑的事情,
- 必须显示SKU
- Link必须包含产品
- 栏目需要更宽。
非常感谢任何帮助。
您可以通过多种方式解决您的问题。
为了理解我的回答,我 copied/pasted 负责 templates/emails/email-order-items.php 行 33 - 58 @version 3.7.0
的电子邮件中输出的一段代码if ( is_object( $product ) ) {
$sku = $product->get_sku();
$purchase_note = $product->get_purchase_note();
$image = $product->get_image( $image_size );
}
<tr class="<?php echo esc_attr( apply_filters( 'woocommerce_order_item_class', 'order_item', $item, $order ) ); ?>">
<td class="td" style="text-align:<?php echo esc_attr( $text_align ); ?>; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap:break-word;">
<?php
// Show title/image etc.
if ( $show_image ) {
echo wp_kses_post( apply_filters( 'woocommerce_order_item_thumbnail', $image, $item ) );
}
// Product name.
echo wp_kses_post( apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ) );
// SKU.
if ( $show_sku && $sku ) {
echo wp_kses_post( ' (#' . $sku . ')' );
}
// allow other plugins to add additional product information here.
do_action( 'woocommerce_order_item_meta_start', $item_id, $item, $order, $plain_text );
如您所见,如果
$show_image
为真,将显示产品图片。 默认情况下这是 false,但这可以通过woocommerce_email_order_items_args
过滤器挂钩进行更改。产品名称默认显示,但不是link
sku is/can 的显示也是通过
的输出woocommerce_email_order_items_args
过滤器挂钩 (默认为 false) 确定的,但是有没有选项可以将 HTML 标签添加到 sku
所以你可以使用几个不同的过滤器钩子来放置从 false 到 true 的值 以及向输出添加额外的 HTML(sku 除外)。所以这只是部分 controllable/adaptable.
但是,在最后一行 我们找到了woocommerce_order_item_meta_start
动作挂钩。这允许其他插件添加额外的产品信息。所以我们要使用那个钩子,因为它可以 hold/modify 以前的过滤器钩子包含的任何东西。
所以你得到:
// Displayed by default, so hide!
function filter_woocommerce_order_item_name( $item_name, $item, $false ) {
// Only email notifications
if ( is_wc_endpoint_url() ) return $item_name;
$item_name = '';
return $item_name;
}
add_filter( 'woocommerce_order_item_name', 'filter_woocommerce_order_item_name', 10, 3 );
// NEW OUTPUT
function action_woocommerce_order_item_meta_start( $item_id, $item, $order, $plain_text ) {
// Only email notifications
if ( is_wc_endpoint_url() ) return;
// Settings
$image_size = array( 64, 64 );
// Get product
$product = $item->get_product();
if ( is_object( $product ) ) {
$sku = $product->get_sku();
$image = $product->get_image( $image_size );
}
// OUTPUT
// Show image
echo '<span style="float:left;width: fit-content;">' . $image. '</span>';
// Product name + link + SKU (if set).
if ( $sku ) {
echo '<span><a href="' . esc_url( $product->get_permalink() ). '">' . $item->get_name() . ' (#' . $sku . ')' . '</a></span>';
} else {
echo '<span><a href="' . esc_url( $product->get_permalink() ). '">' . $item->get_name() . '</a></span>';
}
}
add_action( 'woocommerce_order_item_meta_start', 'action_woocommerce_order_item_meta_start', 10 , 4 );
结果
注意:通过在我的回答中调整 HTML 和随附的 CSS,您可以根据自己的意愿完全调整输出