In this tutorial we will explain simple solution to create auction lots for items in an optimized, flexible and easily customized way. Each item will be its own auction and we will use tags to group auctions into a lot for this purpose. Theme used is StoreFront along with some of our code snippets, we will explain all details later, ofcourse you will need our Simple Auctions plugin. End result should look like image below:
In order to create auction lots first thing to do is to create auctions and tag them with same tag, say tag name is “Lot1”.
Now that you have these ready, create new page like one below:
Details about [products] shortcode are here. Page is set to full width, you can also use Elementor to style this page and just place shortcode where you want content to be displayed. Now we want to have bid input on that page too, so users can place bids instantly on Lot1 page. We will add this code snippet into our StoreFront child theme functions.php file to enable that feature (with some checks like to load this only on Lot1 page not everywhere):
add_action( 'template_redirect', 'wpgenie_add_bid_button_template_redirect' );
function wpgenie_add_bid_button_template_redirect() {
if ( is_page('auction-lot-1') ) {
add_action( 'woocommerce_after_shop_loop_item_title', 'wpgenie_add_bid_button',50 );
}
}
function wpgenie_add_bid_button(){
global $product, $post;
if ( $product->get_type() !== 'auction' ){
return;
}
if(($product->is_closed() === FALSE ) and ($product->is_started() === TRUE )) :
do_action('woocommerce_before_bid_form'); ?>
<form class="auction_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $product->get_id(); ?>">
<?php do_action('woocommerce_before_bid_button'); ?>
<input type="hidden" name="bid" value="<?php echo esc_attr( $product->get_id() ); ?>" />
<?php if($product->get_auction_type() == 'reverse' ) : ?>
<div class="quantity buttons_added">
<input type="button" value="+" class="plus" />
<input type="number" name="bid_value" data-auction-id="<?php echo esc_attr( $product->get_id() ); ?>" value="<?php echo $product->bid_value() ?>" max="<?php echo $product->bid_value() ?>" step="any" size="<?php echo strlen($product->get_curent_bid())+2 ?>" title="bid" class="input-text qty bid text left">
<input type="button" value="-" class="minus" />
<button type="submit" class="bid_button button alt"><?php echo apply_filters('bid_text', __( 'Bid', 'wc_simple_auctions' ), $product->get_type()); ?></button>
</div>
<?php else : ?>
<div class="quantity buttons_added">
<input type="button" value="+" class="plus" />
<input type="number" name="bid_value" data-auction-id="<?php echo esc_attr( $product->get_id()); ?>" value="<?php echo $product->bid_value() ?>" min="<?php echo $product->bid_value() ?>" step="any" size="<?php echo strlen($product->get_curent_bid())+2 ?>" title="bid" class="input-text qty bid text left">
<input type="button" value="-" class="minus" />
</div>
<button type="submit" class="bid_button button alt"><?php echo apply_filters('bid_text', __( 'Bid', 'wc_simple_auctions' ), $product->get_type() ); ?></button>
<?php endif; ?>
<input type="hidden" name="place-bid" value="<?php echo $product->get_id(); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->get_id()); ?>" />
<?php if ( is_user_logged_in() ) { ?>
<input type="hidden" name="user_id" value="<?php echo get_current_user_id(); ?>" />
<?php } ?>
<?php do_action('woocommerce_after_bid_button'); ?>
</form>
<?php do_action('woocommerce_after_bid_form');
endif;
}Once this is completed, we can style it a bit using child theme style.css:
.page-id-2316 button.bid_button.button.alt {width: 100%}
.page-id-2316 .quantity .qty {width: 70%}
.page-id-2316 li.product.type-product.product-type-auction {
border: 1px solid #eee;
}
a.button.wp-element-button.product_type_auction {
display: none;
}Please note that CSS selectors are made only for Auction Lot 1 page (hence page id 2316 selector .page-id-2316). Once everything is done you should get this:
If you want to have 1 auction for a lot of items then just create auction stating that auction is for example “Auction for lot of 3 drinking glasses” and in description you write “You are bidding for 3 drinking glasses”, something like this:
In our tutorial we have shown how to create auction lots – specifically a lot of 3 separate auctions for each glass while this is single auction for all 3 drinking glasses together, this example is very simple and is just matter of properly setting title and image for auction. In case you have problems setting up all of this you can contac us via ticket system.
