phpajaxwordpresswoocommerceshortcode

Woocommerce Add to cart link Ajax enabled in other post or pages


In Woocommerce, I Would like co create add to cart link on a simple page of WordPress website (not product page).

So I have tried this code (Where 123 is the product ID):

<a href="http://example.com/cart/?add-to-cart=123">Buy</a>

I have enabled AJAX add to cart on archives pages Woocommerce option setting.

But It doesn't work and Ajax functionality is not enabled on my custom Add-to-cart link.

How to enable ajax add-to-cart on a custom link (in other pages than woocommerce ones)?


Solution

  • To enable ajax in a custom add to cart button, there is 3 ways at least:

    1. A simple HTML Ajax add to cart link:

      <a rel="nofollow" href="/?add-to-cart=37" data-quantity="1" data-product_id="123" data-product_sku="" class="add_to_cart_button ajax_add_to_cart">Add to cart</a>
      
    2. Using Woocommerce existing [add_to_cart id='123'] shortcode (same usage than above)
      enter image description hereenter image description here

    3. The most customizable: A custom shortcode without price included (customizable button text, additional classes, quantity and many others possibilities)

      if( ! function_exists('custom_ajax_add_to_cart_button') && class_exists('WooCommerce') ) {
          function custom_ajax_add_to_cart_button( $atts ) {
              // Shortcode attributes
              $atts = shortcode_atts( array(
                  'id' => '0', // Product ID
                  'qty' => '1', // Product quantity
                  'text' => '', // Text of the button
                  'class' => '', // Additional classes
              ), $atts, 'ajax_add_to_cart' );
      
              if( esc_attr( $atts['id'] ) == 0 ) return; // Exit when no Product ID
      
              if( get_post_type( esc_attr( $atts['id'] ) ) != 'product' ) return; // Exit if not a Product
      
              $product = wc_get_product( esc_attr( $atts['id'] ) );
      
              if ( ! $product ) return; // Exit when if not a valid Product
      
              $classes = 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' ) ? 'ajax_add_to_cart' : '',
              ) ) ).' '.$atts['class'];
      
              $add_to_cart_button = sprintf( '<a rel="nofollow" href="%s" %s %s %s class="%s">%s</a>',
                  esc_url( $product->add_to_cart_url() ),
                  'data-quantity="' . esc_attr( $atts['qty'] ) .'"',
                  'data-product_id="' . esc_attr( $atts['id'] ) .'"',
                  'data-product_sku="' . esc_attr( $product->get_sku() ) .'"',
                  esc_attr( isset( $classes ) ? $classes : 'button' ),
                  esc_html( empty( esc_attr( $atts['text'] ) ) ? $product->add_to_cart_text() : esc_attr( $atts['text'] ) )
              );
      
              return $add_to_cart_button;
          }
          add_shortcode('ajax_add_to_cart', 'custom_ajax_add_to_cart_button');
      }
      

      This code goes on function.php file of your active child theme (or theme). Tested and works.

      USAGE:

      In posts and pages text editor:

      [ajax_add_to_cart id='123' text='Buy']
      

      In PHP files or templates:

      echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" );
      

      Inserted in HTML code on a php page:

      <?php echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" ); ?>
      

      enter image description hereenter image description here

      Hide Ajax "view cart"

      For custom shortcode, to hide the Ajax "view cart" behavior, you can add in the code, before return $add_to_cart_button; the following:

      $style = '<style>a.added_to_cart.wc-forward { display:none !important; }</style>';
      
      $add_to_cart_button = $style . $add_to_cart_button ;