添加“查看产品"下面的按钮添加到 WooCommerce 档案页面中的购物车按钮

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 档案页面中的购物车按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！