如何复制单个产品页面上的添加到购物车按钮，但重定向到另一个页面？

Question

我们正在构建一个网上商店，其中添加了许多自定义代码并与 WooCommerce 挂钩。

在单个产品页面上，我们当然有添加到购物车按钮，它会自动重定向到购物车页面。

在添加到购物车按钮下方，我们添加了一个按钮，用于将产品添加到 'quotation'。我一般来说，这个按钮必须完全复制添加到购物车按钮功能，但不是重定向到购物车页面，而是必须重定向到自定义页面。

在您的购物车中添加产品时，有此代码可以更改重定向 url，但这还不够。

function my_custom_add_to_cart_redirect( $url ) {
    $url = get_permalink( 1 ); // URL to redirect to (1 is the page ID here)
    return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'my_custom_add_to_cart_redirect' );

当点击加入购物车按钮 -> 购物车页面时

当点击添加到报价按钮 -> 自定义页面时

是否有可能 'copy' 添加到购物车按钮的功能，但更改之后发生的重定向？

注意：我们使用了一些 WooCommerce 功能，例如添加购物车项目数据，因此所有这些功能也必须 'copied'。

Answer 1

我把我的回答分为三个部分。目的是添加现有添加到购物车按钮的副本，但有 1 个差异，我们将使用该差异进行重定向。

步骤 1) 添加（复制）添加到购物车按钮可以通过 adjusting/overwriting 模板文件完成，但是也可以通过使用模板文件中可用的挂钩，例如 woocommerce_after_add_to_cart_button 挂钩

// Add new/extra button
function action_woocommerce_after_add_to_cart_button() {
    global $product;
    
    // Button text
    $button_text = __( 'My new text', 'woocommerce' );
    
    // Is a WC product
    if ( is_a( $product, 'WC_Product' ) ) {
        // Simple products
        if ( $product->is_type( 'simple' ) ) {
            echo '<button type="submit" name="add-to-cart" value="'. esc_attr( $product->get_id() ) . '" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
        // Variable products
        } elseif( $product->is_type( 'variable' ) ) {
            echo '<button type="submit" class="single_add_to_cart_button button alt custom_redirect_button">' . $button_text . '</button>';
        }
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'action_woocommerce_after_add_to_cart_button', 10 );

这为简单和可变产品添加了一个 现有添加到购物车按钮的副本，但有 1 个区别。即：单击按钮时，通过 jQuery（步骤 2）添加一个隐藏的输入字段。

步骤2)这是添加具有特定值的隐藏输入字段的代码。我通过动作挂钩添加了 jQuery，但这也可以包含在外部 js 文件中。

// Add jQuery to footer
function action_wp_footer() {
    // Only on single product page
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
        jQuery( function($) {           
            // Add to cart button or custom button is clicked
            $( document ).on( 'click', '.custom_redirect_button', function () {
                // NOT disabled
                if ( ! $( this ).hasClass( 'disabled' ) ) { 
                    // Add hidden input field after
                    $( this ).after( '<input type="hidden" name="custom-redirect" value="my-value" />' );
                }
            });
        });
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'action_wp_footer', 10 );

步骤 3) 从隐藏的输入字段中获取值，当它匹配时，这就是我们的自定义按钮，我们应用我们自己的 url.

// Redirect
function filter_woocommerce_add_to_cart_redirect( $redirect_url, $product ) {   
    // If value isset
    if ( isset( $_REQUEST['custom-redirect'] ) ) {      
        // If equal to
        if ( $_REQUEST['custom-redirect'] == 'my-value' ) { 
            // URL to redirect to (1 is the page ID here)
            $redirect_url = get_permalink( 1 );
        }
    }

    return $redirect_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'filter_woocommerce_add_to_cart_redirect', 10, 2 );

如何复制单个产品页面上的添加到购物车按钮，但重定向到另一个页面？

How can I duplicate the add to cart button on the single product page, but redirect to another page?

php

jquery

wordpress

woocommerce

product