在WooCommerce产品页面中的“添加到购物车”按钮旁边添加额外的“结账”按钮

时间：2017-06-28 作者：gil hamer

我试图找到一个函数，它将ADDITIONAL woo commerce产品页面中标准“添加到购物车”按钮旁边的按钮。

为了修改单个产品=>添加到购物车=>简单，我在我的childe主题中添加了一个woocommerce文件夹。php内部简单。php我找到了标准的“添加到购物车”按钮，在它之后，我想添加我的自定义附加“结帐”按钮，我找到了以下函数：

function woo_redirect_to_checkout() {
    $checkout_url = WC()->cart->get_checkout_url();
    return $checkout_url;
}

这很好，但它修改了站点中的所有“添加到购物车”按钮，并且我只尝试将其添加到我尝试添加的新自定义按钮（新签出按钮）我成功添加了一个按钮，该按钮重定向到签出页面，但在前往签出之前不会将项目添加到购物车

任何人都知道如何添加新按钮+此按钮不仅需要转到结帐页，还需要同时触发“添加到购物车”操作

谢谢

2 个回复

最合适的回答,由SO网友:LWS-Mo 整理而成

您不需要为此修改模板文件，而是可以使用WooCommerce挂钩woocommerce_after_add_to_cart_button. 此挂钩将在“添加到购物车”按钮后添加内容。

如果客户点击这个按钮，产品应该被添加到购物车中，客户应该被发送到结帐页面，对吗？！

基本上，您可以通过以下链接将产品添加到购物车：

http://example.com/cart/?add-to-cart=<product ID>

因此，使用上面提到的钩子，并记住此URL，我们可以使用此代码段添加第二个按钮：

function add_content_after_addtocart() {

    // get the current post/product ID
    $current_product_id = get_the_ID();

    // get the product based on the ID
    $product = wc_get_product( $current_product_id );

    // get the "Checkout Page" URL
    $checkout_url = WC()->cart->get_checkout_url();

    // run only on simple products
    if( $product->is_type( \'simple\' ) ){
        echo \'<a href="\'.$checkout_url.\'?add-to-cart=\'.$current_product_id.\'" class="single_add_to_cart_button button alt">Checkout</a>\';
    }
}
add_action( \'woocommerce_after_add_to_cart_button\', \'add_content_after_addtocart\' );

这将在单个产品页面上的“添加到购物车”按钮之后添加一个按钮。如您所见，我还添加了一个检查，以查看当前产品是否为简单产品。如果您想将其与变体一起使用，则更加困难。使用这些产品，您需要生成如下URL：

http://example.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black

可能您还需要选中默认的WooCommerce选项Enable AJAX Add to cart （WooCommerce>Products>Display）。我没有用这个设置测试它。

<小时>Update 包括数量

如果要添加数量，还可以将参数附加到按钮URL，如下所示：

http://example.com/cart/?add-to-cart=<product ID>&quantity=<number of quantity>

但是，由于客户可以使用WooCommerce输入字段更改数量，因此我们需要一种方法来获取此字段的当前值。

所以我们有多种选择，

收听数量字段上的更改事件以更新我们的URL，

或将数量字段的当前值附加到URL，前提是单击了自定义按钮。

以下代码使用第二种方法，仅当单击按钮时，才会添加参数。

内部if( $product->is_type( \'simple\' ) ) 函数，在echo之前，输入以下脚本：

<script>
    jQuery(function($) {
    <?php /* if our custom button is clicked, append the string "&quantity=", and also the quantitiy number to the URL */ ?>

        // if our custom button is clicked
        $(".custom-checkout-btn").on("click", function() {

            // get the value of the "href" attribute 
            $(this).attr("href", function() {
                // return the "href" value + the string "&quantity=" + the current selected quantity number
                return this.href + \'&quantity=\' + $(\'input.qty\').val();
            });

        });
    });
    </script>

我没有在上面的代码中包含停止和启动PHP标记！因此，您需要在（？>）之前结束PHP，然后在脚本之后再次启动它(

SO网友:Afnan abbasi

我来这里只是为了粘贴我的代码，这帮助我解决了我的客户有两个按钮的问题，一个用于结账，一个用于添加到购物车。我使用了一种不同的方法，它也有助于处理各种产品。

function wpcoderpro_direct_checkout_button() {
global $product;
$id = $product->get_id();
if( $product->is_type( \'variable\' ) ){
    echo \'
<script>
jQuery(document).ready(function($){
  $(".redirect_to_checkout").click(function(){
  $("button.single_add_to_cart_button ").click();
  window.location.href="/checkout/";
  });
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;">CHECKOUT</div>
\';
}
elseif( $product->is_type( \'simple\' ) ){
  echo \'
<script>
jQuery(document).ready(function($){
$(".input-text.qty").change(function(){
  $(".redirect_to_checkout a").attr("href", "/checkout/?add-to-cart=\'. $id .\'" + "&quantity= " + $(this).val());
});
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;"><a href="/checkout/?add-to-cart=\'. $id .\'">CHECKOUT</a></div>
\';
}
}
add_action( \'woocommerce_after_add_to_cart_button\', \'wpcoderpro_direct_checkout_button\', 20 );

请注意，我为可变产品使用了AJAX添加到购物车的插件，而在简单产品上没有使用AJAX添加到购物车。

代码转到函数。子主题的php文件。如果您需要解释，请告诉我：）

结束

小码农CODE

在WooCommerce产品页面中的“添加到购物车”按钮旁边添加额外的“结账”按钮

相关推荐