在WooCommerce中如何在“添加到购物车”按钮旁边添加查看产品详细信息按钮链接？

Question

通过“ Add "View Product" button below add to cart button in WooCommerce archives pages” 应答代码，可以在存档页面上的添加到购物车按钮下方显示其他“查看产品”按钮。

如何让此附加按钮显示在旁边添加到购物车按钮（不在下方）？

感谢您的帮助。

Answer 1

在活动主题的functions.php中添加以下代码段-

add_action('woocommerce_loop_add_to_cart_link', 'add_a_custom_button', 99, 3 );
function add_a_custom_button( $add_to_cart_button, $product, $args = array() ) {
    if( $product->is_type('variable') || $product->is_type('grouped') ) return $add_to_cart_button;
    $custom_button = '<a class="button primary is-outline mb-0 is-small" style="margin-left: 5px !important;" href="' . esc_attr( $product->get_permalink() ) . '">' . __('DETAIL PRODUCT') . '</a>';
    return $add_to_cart_button . $custom_button;
}

Answer 2

对我有用。需要添加CSS以使它们都在该位置： 您添加的div（最好不要使用内联CSS：

    display: inline-block;
    width: 49%;

“添加到购物车”按钮：

display: inline-block;
width: 49%;
margin-left: 2%;

将id用于添加的按钮以及添加到购物车按钮。 （请参见下图）。

一个更好的解决方案，但是要实现起来有点困难，那就是将它们都包装在div中并使用flex CSS

Answer 3

我认为您的模板会更改挂钩顺序。您可以更具攻击性，并通过以下过滤器添加按钮：

add_filter('woocommerce_loop_add_to_cart_link', 'add_my_custom_button', 20, 3);
function add_my_custom_button($html, $product, $args){
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;
    $html .= '<div style="margin-bottom:10px;">
        <a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('DETAIL PRODUCT') . '</a>
    </div>';
return $html;
}