在带有WooCommerce的产品商店页面中显示“添加到购物篮”和“阅读更多”按钮

时间：2021-03-06 作者：Alberto Marin

我一直在玩woocommerce店面主题和woocommerce，我想展示；“添加到篮子”；和；阅读更多“；在可能的情况下，在每个产品的店铺页面上同时显示。I came out with a solution, but I wonder if there is a different way to do this 所以我不必使用CSS来隐藏；阅读更多“；按钮旁边的另一个“；阅读更多信息；。理想情况下，我不需要CSS，只有一个“；阅读更多“；无法添加到购物车时的按钮。

以下是我使用的代码：

add_action( \'woocommerce_after_shop_loop_item\', \'woocommerce_template_loop_add_to_cart\', 10 );
function woocommerce_template_loop_add_to_cart() {
    global $product;

    $link = apply_filters( \'woocommerce_loop_product_link\', get_the_permalink(), $product );
    echo \'<div class="woocommerce-LoopProduct-buttons-container">\';
        echo \'<a href="\' . esc_url( $link ) . \'" class="button button--read-more">\'.__( \'Read more\', \'woocommerce\' ).\'</a>\';
        echo apply_filters(
            \'woocommerce_loop_add_to_cart_link\', // WPCS: XSS ok.
            sprintf(
                \'<a href="%s" data-quantity="%s" class="%s" %s>%s</a>\',
                esc_url( $product->add_to_cart_url() ),
                esc_attr( isset( $args[\'quantity\'] ) ? $args[\'quantity\'] : 1 ),
                esc_attr( isset( $args[\'class\'] ) ? $args[\'class\'] : \'button\' ),
                isset( $args[\'attributes\'] ) ? wc_implode_html_attributes( $args[\'attributes\'] ) : \'\',
                esc_html( $product->add_to_cart_text() )
            ),
            $product,
            $args
        );
    echo \'</div>\';
}
还有一些CSS（SCS）实现了这一功能：

...
      .button {
        margin: 5px 15px;
        & ~ a[href^="http"] {
            display: none;
        }
      }
...
下面是它的外观，希望有助于更好地了解我要优化的内容：

enter image description here

enter image description here

2 个回复
最合适的回答,由SO网友:MattHorne 整理而成

这样的事情会实现你的目标吗？可以通过使用默认的“读取更多”功能而不是重复该功能来进行更多优化。

function add_extra_read_more_btn() {
    global $product;
    if ($product->is_purchasable()) {
        echo \'<div class="woocommerce-LoopProduct-buttons-container">\';
        echo \'<a class="button product_type_simple" href="\'.get_permalink($product->ID).\'">Read more</a>\';
    }
}
add_action( \'woocommerce_after_shop_loop_item\', \'add_extra_read_more_btn\', 9 );

function close_extra_read_more_btn_wrap() {
    global $product;
    if ($product->is_purchasable()) {
        echo \'</div>\';
    }
}
add_action( \'woocommerce_after_shop_loop_item\', \'close_extra_read_more_btn_wrap\', 11 );

SO网友:Alberto Marin

以下是我的解决方案：

function woocommerce_template_loop_add_to_cart() {
    global $product;
    
    $defaults = array(
        \'quantity\'   => 1,
        \'class\'      => implode(
            \' \',
            array_filter(
                array(
                    \'button\',
                    \'product_type_\' . $product->get_type(),
                    $product->is_purchasable() && $product->is_in_stock() ? \'add_to_cart_button\' : \'\',
                    $product->supports( \'ajax_add_to_cart\' ) && $product->is_purchasable() && $product->is_in_stock() ? \'ajax_add_to_cart\' : \'\',
                )
            )
        ),
        \'attributes\' => array(
            \'data-product_id\'  => $product->get_id(),
            \'data-product_sku\' => $product->get_sku(),
            \'aria-label\'       => $product->add_to_cart_description(),
            \'rel\'              => \'nofollow\',
        ),
    );

    $args = apply_filters( \'woocommerce_loop_add_to_cart_args\', wp_parse_args( $args, $defaults ), $product );

    $link = apply_filters( \'woocommerce_loop_product_link\', get_the_permalink(), $product );
    echo \'<div class="woocommerce-LoopProduct-buttons-container">\';
        if ( $product->is_purchasable() ) {
            echo \'<a href="\' . esc_url( $link ) . \'" class="button button--read-more">\'.__( \'Read more\', \'woocommerce\' ).\'</a>\';
        }
        echo apply_filters(
            \'woocommerce_loop_add_to_cart_link\', // WPCS: XSS ok.
            sprintf(
                \'<a href="%s" data-quantity="%s" class="%s" %s>%s</a>\',
                esc_url( $product->add_to_cart_url() ),
                esc_attr( isset( $args[\'quantity\'] ) ? $args[\'quantity\'] : 1 ),
                esc_attr( isset( $args[\'class\'] ) ? $args[\'class\'] : \'button\' ),
                isset( $args[\'attributes\'] ) ? wc_implode_html_attributes( $args[\'attributes\'] ) : \'\',
                esc_html( $product->add_to_cart_text() )
            ),
            $product,
            $args
        );

    echo \'</div>\';
}
这是关键因素：

if ( $product->is_purchasable() ) {
    echo \'<a href="\' . esc_url( $link ) . \'" class="button button--read-more">\'.__( \'Read more\', \'woocommerce\' ).\'</a>\';
}
缺少$args，因此我也添加了它。

标签： woocommerce-offtopic   小码农  

相关推荐