Add Extra button under Add to cart on shop page of Woocommerce 3

2
votes

I'm a nube coder and am trying to add an extra button under the add to cart button on the products feed on my main page. I use a shortcode to display just one category of products on the frontpage of my Woocommerce website (which works as a landing page in this case and is a Wordpress microsite).

Problem is I can't get it to display under the button. I have a plugin that can add an extra button which links to a preview document but only on single product pages. So, I'm using that DIV class in my code and trying to insert it under products feed. What I'm trying to achieve is PDF previews of print books. You can find my code below and I'm sure it's many shades of wrong.

I also don't know how to code the so that it uses the links that I insert in the backend for each product preview document. Right now I have a generic link setup for testing purposes.

add_action( 'woocommerce_after_shop_loop_item', 'content_after_addtocart_button'); function content_after_addtocart_button() { 
echo '<div class="product_meta wcdp-preview-btn-div"><a class="wcdp-preview-btn thickbox" href="https://www.google.com/">Citește fragment</a></div>'; }
2
phpwordpressbuttonwoocommerceproduct

2 Answers

2
votes

The following code will add a custom button under default exiting button in Woocommerce archives as shop (I have increased the hook priority as other plugins seems to make trouble):

add_action( 'woocommerce_after_shop_loop_item', 'add_loop_custom_button', 1000 );
function add_loop_custom_button() {
    global $product;

    $product_link = $product->get_permalink(); // Link to the product (if needed)

    // Define your button link
    $custom_link = home_url( "/something/" ) ;

    // Output
    echo '<div class="product_meta wcdp-preview-btn-div">
    <a class="button thickbox" href="' . esc_url( $custom_link ) .'">' . __( "Citește fragment" )  . '</a>
    </div>';
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

Addition - Usage with Woo Document Preview plugin:

To get the preview document link for the button, you will use the following…

But this plugin seems to enable a special Javascript on single product pages only, that is not active on shop and archives pages, so the link doest open a preview lightbox, but opens the preview in Google docs instead.

add_action( 'woocommerce_after_shop_loop_item', 'add_loop_custom_button', 1000 );
function add_loop_custom_button() {
    global $product;

    // The PDF doc preview button link
    if( $pdf_doc = $product->get_meta('wcdp_preview_attachment') ){
        $preview_link  = "https://docs.google.com/viewer?url=" . urlencode($pdf_doc['url']);
        $preview_link .= "&embedded=true&TB_iframe=true&width=600&height=550";

        // Output
        echo '<div class="product_meta wcdp-preview-btn-div">
        <a class="button alt thickbox wcdp-preview-btn" href="' . esc_url( $preview_link ) .'">' . $pdf_doc['name']  . '</a>
        </div>';
    }
}

Code goes in function.php file of your active child theme (or active theme). The link works.

0
votes
add_action('woocommerce_after_shop_loop_item', 'content_after_addtocart_button');

function content_after_addtocart_button() {
   global $woocommerce;
   foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
      $_product = $values['data'];
      if( get_the_ID() == $_product->id ) {
         echo '<div class="product_meta wcdp-preview-btn-div"><a class="wcdp-preview-btn thickbox" href="http://localhost/cartsection/cart/">View Cart</a></div>';
      }
   }
}