After moving to Woocommerce, we’ve built a page that showing several categories and all the products of each of these categories. The idea is to allow a customer to build their own product.
We’ve got the categories and products showing with their name, image, a price, add to cart and quantity field aside each product.
We’d like to add the flexibility for the page to display a total calculation of all their selections and provide an ‘Add All Selections to Cart’ type of button, is this possible?
I’ll outline what we’ve done so far in case more details are needed. To get the ‘add to cart’ to appear next to each product we used a modified version of the following ‘override loop template…‘ as follows:
<?php
/**
* Loop Add to Cart
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.2.0
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product;
$mode = get_option('catalog_mode');
?>
<?php if ( ! $product->is_in_stock() || $mode == 'on' ) : ?>
<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>
<?php else : ?>
<?php
$link = array(
'url' => '',
'label' => '',
'class' => ''
);
$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
switch ( $handler ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
break;
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
break;
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
break;
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
}
break;
}
//EDIT for Add to Cart
//printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label);
if ( $product->product_type == 'simple' ) {
?>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" class="button alt"><?php echo $label; ?></button>
</form>
<?php
} else {
printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label);
}
//END Add to Cart
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
?>
Finally, we added the categories to the page and showed their products by adding a few of the following to a page template:
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => -1, 'product_cat' => 'INSERT CATEGORY HERE', 'orderby' => 'rand' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="product">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
</a>
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!--/.products-->
<!--End Display Products-->
This could apply to anyone building out separate products for a brand. We’re not into building cars, but say we were, the desired workflow is relatively the same for any series of products – if cars were the case, what we’d be trying to complete is a functional place a build your own car for each model on their own pages.
To break down each model, we’ve categorized parts of the car, that might interest that car consumer, into categories; so we might have a category that is composed of wheels and tires for X car and another category for wheels and tires for Y car.
Let’s say we’re writing the page build car x. We would like them to be able to select all the quantities of all applicable products that compose ‘car x’. To do so, we have displayed all the categories that apply to car x, and all the products in said categories. We have a quantity field and add to cart next to the quantity.
We would like to get that to total and allow for an add all selections to cart button at the bottom of the page.
