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

问题描述

互联网上的大多数文章都是关于如何删除/替换查看产品"或阅读更多"按钮.
我找不到与允许两个按钮一起使用的相关信息.

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

下方

目前，我的商店只显示加入购物车按钮.我正在使用店面主题(+ 自定义子主题).

有没有好心人告诉我怎么做?

解决方案

使用这个挂在 woocommerce_after_shop_loop_item 动作钩子中的自定义函数，添加链接到产品的自定义按钮(变量和分组产品类型除外):

add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5);函数 add_a_custom_button() {全球$产品；//不适用于没有添加到购物车"按钮的可变和分组产品if( $product->is_type('variable') || $product->is_type('grouped') ) return;//输出链接到产品的自定义按钮echo '<div style="margin-bottom:10px;"><a class="button custom-button" href="' .esc_attr( $product->get_permalink() ) .'">'.__('查看产品') .'</a>

';}

代码位于活动子主题(或活动主题)的functions.php 文件中.

在 WooCommerce 3.7.x 上测试并仍然完美运行(使用最后一个店面主题):

<小时>

嵌入你的样式(与作者评论相关):

add_action('wp_head', 'custom_button_styles', 9999);函数 custom_button_styles() {if( is_shop() || is_product_category() || is_product_tag() )://样式?><风格>.button.custom-button { 背景颜色:白色！重要；颜色:黑色！重要；边框:2px 实心 #4CAF50 !important;}.button.custom-button:hover { background-color: black !important;颜色:白色！重要；边框:2px纯黑色！重要；}</风格><?php万一;}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

经过测试并有效.

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?

解决方案

Use this custom function hooked in woocommerce_after_shop_loop_item action hook, to add your custom button linked to the product (except variable and grouped product types):

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>';
}

Code goes in functions.php file of your active child theme (or active theme).

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

---

Embedding your styles (related to author comments):

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;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.

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