在 WooCommerce 存档页面的“添加到购物车”按钮下方添加 "View Product" 按钮

Question

Internet 上的大多数文章都是关于 如何删除/替换 "view product" 或 "read more" 按钮。
我找不到与允许两个按钮一起工作相关的内容。

我有兴趣让两个按钮并行（同时）工作。要显示的第一个按钮应该是“查看产品”（将在同一页面上打开），然后在“添加到购物车”下方。 11=]

目前，我的商店仅显示添加到购物车 按钮。我正在使用 Storefront 主题（+ 自定义子主题）。

有好心人告诉我怎么做吗？

Answer 1

使用挂接到 woocommerce_after_shop_loop_item 操作挂钩中的此自定义函数，添加链接到产品的自定义按钮 （可变和分组产品类型除外):

add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5 );
function add_a_custom_button() {
    global $product;

    // Not for variable and grouped products that doesn't have an "add to cart" button
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;

    // Output the custom button linked to the product
    echo '<div style="margin-bottom:10px;">
        <a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('View product') . '</a>
    </div>';
}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。

经过测试，仍然可以在 WooCommerce 3 上完美运行。7.x （使用最后一个店面主题）：

嵌入您的样式（与作者评论相关）:

add_action('wp_head', 'custom_button_styles', 9999 );
function custom_button_styles() {
    if( is_shop() || is_product_category() || is_product_tag() ):

    // The styles
    ?>
    <style>
        .button.custom-button { background-color: white !important;
            color: black !important; border: 2px solid #4CAF50 !important; }
        .button.custom-button:hover { background-color: black !important;
            color: white !important; border: 2px solid black !important; }
    </style>
    <?php
    endif;
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件。

已测试并有效。

在 WooCommerce 存档页面的“添加到购物车”按钮下方添加 "View Product" 按钮

Add "View Product" button below add to cart button in WooCommerce archives pages

php

wordpress

storefront

woocommerce

hook-woocommerce