wrodpress使用WooCommerce做商城，加入购物车的弹出层提示只是一句话，需要增加更丰富的内容，如下图所示，显示商品图片，名称，价格，变体属性
一，打开functions.php
wp-content\themes\主题目录\footer.php
增加
add_filter( 'wc_add_to_cart_message_html', 'my_custom_add_to_cart_message', 10, 2 );
function my_custom_add_to_cart_message( $message, $products ) {
if ( empty( $products ) || ! is_array( $products ) ) {
return $message;
}
$product_id = 0;
foreach ( $products as $id => $qty ) {
$product_id = $id;
break;
}
if ( ! $product_id ) {
return $message;
}
$product = wc_get_product( $product_id );
if ( ! $product ) {
return $message;
}
$thumb_html = $product->get_image( 'woocommerce_thumbnail' );
$link = $product->is_visible() ? $product->get_permalink() : '';
if ( $link && $thumb_html ) {
$thumb_html = '<a href="' . esc_url( $link ) . '" class="my-cart-message-thumb-link">' . $thumb_html . '</a>';
}
$product_name = $product->get_name();
$price_html = '';
$attributes = array();
$cart_item = null;
if ( function_exists( 'WC' ) && WC()->cart ) {
$cart_contents = WC()->cart->get_cart();
foreach ( $cart_contents as $item ) {
$pid = isset( $item['variation_id'] ) && $item['variation_id'] ? $item['variation_id'] : $item['product_id'];
if ( intval( $pid ) === intval( $product_id ) ) {
$cart_item = $item;
break;
}
}
if ( ! $cart_item && ! empty( $cart_contents ) ) {
$cart_item = end( $cart_contents );
}
}
if ( $cart_item ) {
$cart_product = isset( $cart_item['data'] ) ? $cart_item['data'] : $product;
if ( $cart_product instanceof WC_Product ) {
$unit_price = wc_get_price_to_display( $cart_product );
$price_html = wc_price( $unit_price );
}
$raw_atts = isset( $cart_item['variation'] ) && is_array( $cart_item['variation'] ) ? $cart_item['variation'] : array();
if ( ! empty( $raw_atts ) ) {
foreach ( $raw_atts as $attr_key => $attr_value ) {
if ( '' === $attr_value ) {
continue;
}
$taxonomy = 0 === strpos( $attr_key, 'attribute_' ) ? substr( $attr_key, 10 ) : $attr_key;
$label = wc_attribute_label( $taxonomy );
$term = $attr_value;
if ( taxonomy_exists( $taxonomy ) ) {
$term_obj = get_term_by( 'slug', $attr_value, $taxonomy );
if ( $term_obj && ! is_wp_error( $term_obj ) ) {
$term = $term_obj->name;
}
}
$attributes[] = array(
'label' => $label,
'value' => $term,
);
}
}
}
if ( '' === $price_html ) {
$price_html = $product->get_price_html();
}
$cart_url = wc_get_cart_url();
$checkout_url = wc_get_checkout_url();
$cart_count = function_exists( 'WC' ) && WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
$cart_count_in = $cart_count ? ' (' . intval( $cart_count ) . ')' : '';
ob_start();
?>
<div class="my-cart-message">
<div class="my-cart-message-header">
<span class="my-cart-message-status">ADDED TO CART</span>
</div>
<div class="my-cart-message-main">
<?php if ( $thumb_html ) : ?>
<div class="my-cart-message-left my-cart-message-thumb"><?php echo $thumb_html; ?></div>
<?php endif; ?>
<div class="my-cart-message-right">
<div class="my-cart-message-title"><?php echo esc_html( $product_name ); ?></div>
<?php if ( ! empty( $attributes ) ) : ?>
<div class="my-cart-message-attrs">
<?php foreach ( $attributes as $att ) : ?>
<div class="my-cart-message-attr-line">
<span class="my-cart-message-attr-label"><?php echo esc_html( $att['label'] ); ?>:</span>
<span class="my-cart-message-attr-value"><?php echo esc_html( $att['value'] ); ?></span>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if ( $price_html ) : ?>
<div class="my-cart-message-price"><?php echo wp_kses_post( $price_html ); ?></div>
<?php endif; ?>
</div>
</div>
<div class="my-cart-message-actions">
<a class="button my-cart-message-btn my-cart-message-view-cart" href="<?php echo esc_url( $cart_url ); ?>">VIEW CART<?php echo esc_html( $cart_count_in ); ?></a>
<a class="button my-cart-message-btn my-cart-message-checkout" href="<?php echo esc_url( $checkout_url ); ?>">BUY</a>
</div>
</div>
<?php
return ob_get_clean();
}样式
wp-content\themes\你的主题\style.css
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message {
display: flex;
flex-direction: column;
gap: 16px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-header {
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-main {
display: flex;
gap: 24px;
align-items: flex-start;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-left img {
display: block;
width: 180px;
height: auto;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-right {
flex: 1;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-title {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-attrs {
margin-bottom: 8px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-attr-line {
font-size: 14px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-attr-label {
margin-right: 4px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-price {
font-size: 18px;
font-weight: 700;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-actions {
display: flex;
gap: 16px;
margin-top: 8px;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-btn {
flex: 1;
text-align: center;
border-radius: 0;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-view-cart {
background: #fff;
color: #000;
border-color: #000;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-checkout {
background: #000;
color: #fff;
border-color: #000;
}
@media screen and (max-width: 768px) {
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-main {
flex-direction: column;
}
.woocommerce-notices-wrapper .woocommerce-message .my-cart-message-left img {
width: 100%;
}
}
湘公网安备 43100202000398
