WooCommerce add to cart redirect based on button clicked

Question

I'd like to create two different add-to-cart buttons on the product page. Based on what button you click it has to redirect to the cart page or shop (archive) page.

On the product page I created some extra custom fields (item data) the user have to fill in, before adding the product to their shopping bag. There are multiple explanations for redirecting your customers to the page you want with the woocommerce_add_to_cart_redirect hook, but I'd like to customize it a bit based on the button you click.

I've added a second submit button to the add to cart form on the product page. These buttons are inside the form, else the custom fields won't validate and products won't add to the cart. There are multiple explanations and hooks online to create extra add to cart buttons to your product page, but these won't work because of the validation that needed to be done.

    <button type="submit" name="add-to-cart" value="overview <?php echo esc_attr( $product->get_id() ); ?>" class="c-link"><?php _e('Save and go to shop', 'stackoverflowcom'); ?></button>

    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="c-btn --gold single_add_to_cart_button button alt"><?php _e('Go to shopping bag', 'stackoverflowcom'); ?></button>

Second step is I created a function for the woocommerce_add_to_cart_redirect hook, to check for the button that is clicked.

function custom_add_to_cart_redirect( $url ) {

if ($_POST['add-to-cart'] == 'overview') {

    $url = get_permalink( 17 );
    return $url;

} else {

    $url = get_permalink( wc_get_page_id( 'cart' ));
    return $url;

}} add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' );

Big issue however, you can't have multiple values (or names) inside your button. So the above function won't work. Does anyone have other solutions? Does anyone know how I can create a secondary add to cart button with a different redirect?

Thanks in advance!

“Big issue however, you can't have multiple values (or names) inside your button.” - you could make one value out of multiple, for example by encoding them as JSON - but that likely won’t work on the receiving end, if WP expects to get a post ID send by these buttons only. Might perhaps make the more sense, if you added a hidden input field to the form, and then via JS filled that with the value overview (or any other you might need to send) when the specific button is clicked … so that you could then access that hidden field’s value separately on the server side. — CBroe

Juliën Juliën · Accepted Answer · 2020-02-25T10:35:07

My solution based on what CBroe says, I created a javascript function:

<script>
    function overviewClick() {
        document.getElementById('overview').value="overview"
        document.getElementById('cart').submit();
    }
</script>

Created a hidden input field with the name 'overview'. Then I created a PHP function that checks if the input field is empty or not:

function custom_add_to_cart_redirect( $url ) {

if( ! empty( $_POST['overview'] ) ) {

    $url = get_permalink( 17 );
    return $url;

} else {

    $url = get_permalink( wc_get_page_id( 'cart' ));
    return $url;

}}

WooCommerce add to cart redirect based on button clicked

1 Answers