添加“查看产品" WooCommerce存档页面中添加到购物车下方的按钮 [英] Add "View Product" button below add to cart button in WooCommerce archives pages

问题描述

Internet上的大多数文章都是关于如何删除/替换查看产品"或阅读更多"按钮的.
我找不到与允许两个按钮一起工作相关的东西.

Most of the articles on the internet are about How to remove / replace the "view product" or "read more" button.
I couldn't find something related to allowing both buttons working together.

我有兴趣让两个按钮同时(同时)工作. 要显示的第一个按钮应该是"查看产品"(将在同一页面上打开)，然后在"添加到购物车"

I am interested in having both buttons working in parallel ( at the same time ). The first button to be displayed should be "View product" (to be opened on the same page) then underneath "Add to Cart"

此刻，我的商店仅显示添加到购物车按钮. 我正在使用店面主题(+自定义子主题).

At the moment, my store only displays the Add to cart button. I am using Storefront theme ( + custom child theme ).

有人会这么好心，告诉我该怎么做吗?

Would anyone be so kind and tell me how to do this?

推荐答案

使用挂钩在 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 (具有最后一个店面主题)上正常运行:

Tested and still perfectly works on WooCommerce 3.7.x (with last storefront theme):

嵌入样式(与作者评论有关):

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文件或任何插件文件中.

经过测试，可以正常工作.

Tested and works.

这篇关于添加“查看产品" WooCommerce存档页面中添加到购物车下方的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！