wooCommerce 中“查看购物车”按钮旁边的“继续购物”按钮 - 更好地对齐/排序

Question

一个原始问题在这里得到了“解决”： 如何在 WooCommerce 中的“查看购物车”按钮旁边添加“继续购物”按钮？ 使用以下代码：

function filter_wc_add_to_cart_message_html( $message, $products ) { 

    $return_to = apply_filters( 
        'woocommerce_continue_shopping_redirect', 
        wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) 
    );

    $continue   = sprintf( 
        '<a href="%s" class="button wc-forward">%s</a>', 
        esc_url( $return_to ), 
        esc_html__( 'Continue','woocommerce' ) 
    );

    $message .= $continue;
    return $message; 
}; 

add_filter( 'wc_add_to_cart_message_html', 'filter_wc_add_to_cart_message_html', 10, 2 );

但它会生成以下 html：

<div class="woocommerce-message" role="alert">
    <a href="https://.../cart/" tabindex="1" class="button wc-forward">View cart</a>
     &ldquo;Front Suspension Bump Stop Spacer&rdquo; has been added to your cart.
    <a href="https://.../product/.../" class="button wc-forward">Continue Shopping</a>  
</div>

即

• 查看购物车按钮。
• 产品已添加短信
• 继续购物按钮。

是否可以/容易改变顺序，以便：

• 产品已添加..消息
• 后面是两个按钮。

这将使 css 更容易在宽屏和窄屏上更好地对齐两个按钮？

Answer 1

您可以使用以下命令先显示文本，然后再显示 2 个按钮：

add_filter( 'wc_add_to_cart_message_html', 'filter_wc_add_to_cart_message_html', 10, 3 );
function filter_wc_add_to_cart_message_html( $message, $products, $show_qty ) { 
    $titles     = array();
    $count      = 0;
    $product_id = null;

    foreach ( $products as $product_id => $qty ) {
        /* translators: %s: product name */
        $titles[] = apply_filters( 'woocommerce_add_to_cart_qty_html', ( $qty > 1 ? absint( $qty ) . ' × ' : '' ), $product_id ) . apply_filters( 'woocommerce_add_to_cart_item_name_in_quotes', sprintf( _x( '“%s”', 'Item name in quotes', 'woocommerce' ), strip_tags( get_the_title( $product_id ) ) ), $product_id );
        $count   += $qty;
    }
    $titles = array_filter( $titles );
    
    /* translators: %s: product name */
    $added_text = sprintf( _n( '%s has been added to your cart.', '%s have been added to your cart.', $count, 'woocommerce' ), wc_format_list_of_items( $titles ) );
    $message    = esc_html( $added_text );
    $btn_class  = wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '';
    $return_to  = apply_filters( 'woocommerce_continue_shopping_redirect', wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) );
    $message   .= sprintf( ' <a href="%s" tabindex="1" class="button wc-forward%s">%s</a>', esc_url( $return_to ), esc_attr( $wp_button_class ), esc_html__( 'Continue', 'woocommerce' ) );
    return $message . sprintf( ' <a href="%s" tabindex="1" class="button wc-forward%s">%s</a>', esc_url( wc_get_cart_url() ), esc_attr( $wp_button_class ), esc_html__( 'View cart', 'woocommerce' ) );
}

您将得到以下 HTML 结构：

<div class="woocommerce-message" role="alert"> 
    “Front Suspension Bump Stop Spacer” has been added to your cart. 
    <a href="https://xxxxxx/product/xxxxxx/" class="button wc-forward">Continue</a>
    <a href="https://xxxxxx/cart/" class="button wc-forward">View cart</a>
</div>