Use ACF to display a customizable WooCommerce product add to cart button

Question

WooCommerce is notorious for not being all that customizable (except for templating that is a seriously convoluted process).

So, I am attempting to use Advanced Custom Fields (plugin) to create an add to cart button, that lets you choose your product, Input your button text, and then choose the style of your button.

I will attach some images of my admin interface as well as giving you all of my code. I need to find a way to pull the correct url to add the product ot the cart and to get this thing to display without repeating itself twenty times (!).

The way I have ACF set up, is that I'm creating a flexible layout, and then adding in the button using a post object field.

Here is the code:

//Applies the layout created on the "Features" page template
add_action( 'genesis_post_content', 'coursemarketer_features_page_layout' );
function coursemarketer_features_page_layout() { ?>

<?php while(has_sub_field("features_page_builder")): ?>

    <?php if(get_row_layout() == "headline"): // layout: Large Heading ?>

        <h2 class="large-heading">

            <?php the_sub_field("headline_1"); ?>

        </h2>

        <?php elseif(get_row_layout() == "buy_now_button"): // layout: Buy Now Button ?>

        <div class="buy-now-cm-button button">

            <?php
            global $woocommerce;
            global $post;
            $post_objects = get_sub_field('product_id');

            if( $post_objects ): ?>
                <div class="buy-button-surround <?php the_sub_field('button_type'); ?>">
                    <?php foreach( $post_objects as $post): // $post (IMPORTANT) ?>
                        <?php setup_postdata($post); ?>
                            <a href=" WHAT GOES HERE? ">
                                <div class="buy-button-inner">
                                    <span>
                                        <?php the_sub_field('button_text'); ?> $
                                        <?php   
                                            $price = get_post_meta( get_the_ID(), '_regular_price', true);
                                            $sale = get_post_meta( get_the_ID(), '_sale_price', true); 
                                            if ($sale) echo $sale; 
                                            else echo $price;
                                            break;
                                        ?>
                                    </span>
                                </div>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php wp_reset_postdata(); // IMPORTANT - Do not delete ?>
            <?php endif; ?>
      </div>
 <?php endwhile; ?>

And this is the image of the front end of the site with this code:

Here is an image of the field from the admin screen:

^{click to enlarge ⤴}

Just to let you know, I have omitted some of the code that I've used for the easy fields in order to save space in this post.

UPDATE! - I fixed the repeat using break; (duh) but the link to the product is still the hard part!!!

Answer 1

Alright, literally after hours and hours of trying to mess with this, I figured out how to rock this out.... It's a little sloppy, and does end up using basically an entire woocommerce template to do it, but here you go.... this is the individual subfield that did it for me :

<?php elseif(get_row_layout() == "buy_now_button"): // layout: Buy Now Button ?>
        <div class="<?php the_sub_field('button_type'); ?>">
            <?php
            global $woocommerce;
            global $post;
            $post_objects = get_sub_field('product_id');
            if( $post_objects ) : ?>
                <?php foreach( $post_objects as $post): ?>
                    <?php setup_postdata($post); ?>
                        <?php
                            global $product; 
                            $link   = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
                            printf('<a href="%s" rel="nofollow" data-product_id="%s">', $link, $product->id); ?>
                                <div class="buy-button-inner">
                                    <span class="buy-button-text"><?php the_sub_field('button_text'); ?></span> $<?php 
                                    $price = get_post_meta( get_the_ID(), '_regular_price', true);
                                    $sale = get_post_meta( get_the_ID(), '_sale_price', true); 
                                    if ($sale) echo $sale; 
                                    else echo $price; ?>
                                </div>   
                            </a> 
                        <?php break; ?>
                <?php endforeach; ?>
                    <?php wp_reset_postdata(); ?>                
            <?php endif; ?> 
        </div>