how to add add-to-cart button into custom href link using woocommerce

1 Views

i am using a custom template for woo-commerce product page, here i display all the product name and product prize. now i want to add woocommerce add-to-cart option with product prize link. Is there a way to make this work? Thanks for your help. 

<?php
    $args = array( 'post_type' => 'product', 
                    'posts_per_page' => 5, 
                    'post_status' =>'any',
                    'order' => 'ASC'
                ); 
                 $allProduct = get_posts( $args );
                 if ( $allProduct ) {
                 foreach ( $allProduct as $products ) { ?>

<ul>
    <li class="product_name"><a href=""><?php  echo apply_filters( 'the_title' , $products->post_title ); ?></li>
    <li class="product_prize"><a href="ADD-TO-CART-URL"><span class="pdfIconSmall">&nbsp;</span></i>Purchase PDF - 
     <?php $price = get_post_meta( $products->ID, '_regular_price', true);
        echo "$ ",$price;
         ?></a>
    </li>
</ul>

<?php 
  }
   } ?>
Post Views: 1

Related posts

2 comments

  1. For a dynamic add to cart you’d need AJAX, but if you just want to show cart (with a widget included) you can add this:

    <?php if( in_array('woocommerce/woocommerce.php', get_option('active_plugins')) ):?>
    <div id="shop_links" class="cart_right"><?php _e('Cart:','your_theme_slug') ?>
        <a class="link_cart" href="<?php echo esc_url($woocommerce->cart->get_cart_url()); ?>">
            <span>
            <?php
                echo '<span class="items_count">' . $woocommerce->cart->cart_contents_count . '</span> ' ._n('item', 'items',  $woocommerce->cart->cart_contents_count ,'your_theme_slug') . ' ' . '&mdash; ' . $woocommerce->cart->get_cart_total() ;
            ?>
            </span>
            <i class="icon-shopping-cart"></i>
        </a>
        <div class="cart_dropdown_widget">
            <?php the_widget('WC_Widget_Cart'); ?>
        </div>
    </div>
<?php endif; ?>

    With some js for transitions:

    var menu_cart = $('#shop_links'), subelement = menu_cart.find('.cart_dropdown_widget').css({display:'none', opacity: 0});

menu_cart.hover(
    function(){
        subelement.css({display:'block'}).stop().animate({opacity:1});
    },
    function(){
        subelement.stop().animate({opacity:0}, function(){
            subelement.css({display:'none'});
        });
    }
);

    Styling is up to you.

    Hope this helps

Comments are closed.