wpgenie

We have received some inquries from our clients regarding countdown to an event on their page like Next Draw or Auction / Group Buy Event ending soon – basically you want to attract some attention to an event which ends soon and might be of interest to your users. This is not limited to our plugins you can use it for anything like next big discount, sale, new product coming to your store, maintenance ending, etc.

There are really a lot of countdown plugins for WordPress, both free available on WordPress Plugin directory or paid (on CodeCanyon or pro version of free plugin). We tested two free plugins and one standalone JavaScript / CSS version.

Countdown Block

This plugin https://wordpress.org/plugins/countdown-block/ implements countdown block for Gutenberg with variety of options to style timer itself and attributes like timestamp to which countdown timer will do the countdown.

And here is screenshot of its options:

There are 8 preset designs, you can turn of days, hours, minutes and seconds independently.

This is how it looks on page in frontend with basically no styling.

Countdown Builder

Full name of this plugin is Countdown, Coming Soon, Maintenance – Countdown & Clock and its url https://wordpress.org/plugins/countdown-block/ on WordPress plugin directory. It implements countdown timer via shortcodes. You get new section in wp-admin where you add and define your timers along with their shortcode which is then inserted into the page:

This is how it looks like in Gutenberg editor, you can also easily add shortcode to Classic Editor:

And in frontend:

All details for Countdown Builder can be found on WordPress plugin page. This plugin has also pro version which is paid but free version has plenty of features.

Standalone JS/CSS countdown timer

This timer consists of a bit html5, some JavaScript and CSS code and can be inserted anywhere using child theme functions.php file, customization plugin, you can implement it as shortocde or via CodeSnippets plugin.

Once timer reached timestamp it outputs a message like this:

Working index.html page and all code can be downloaded here. Everything can be customized and parts that are zero can be automatically hidden.

If you have any questions implementing some of these countdown solutions open support ticket or drop us email, we will be glad to help.

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.

We have created two video tutorials about process of adding orders manually for user for Lottery product with ticket numbers and question / answers. First of all make sure you have latest WooCommerce Lottery and Pick Number Mod addon v2.4.0 – you can find all about pick number mod features here.

Usually we have suggested clients to use Login As User plugin and do regular checkout as client using coupon code to manually create order for user but with latest updates we have fixed everything so you can manually create order for Lottery using WooCommerce Orders > Add Order.

We need to pay some attention to how this is done because we need to add two order meta fields called “Ticket number” and “Answer”. If you need to add more than 1 ticket you need to select appropriate quantity and add tickets one by one in its meta field “Ticket number”. For lotteries with randomly assigned tickets, meta “Ticket number” will be automatically added when you save “Answer” meta field. Answer in meta field is not string but number for example if first answer is “Red” you will enter number 1 instead of string “Red”.

Please check video tutorials below.

How to add WooCommerce Lottery order for lotteries with ticket numbers and question / answers:

https://www.youtube.com/watch?v=E7w8e911z5U

How to WooCommerce Lottery order for lotteries with randomly assigned ticket numbers and question / answers:

https://www.youtube.com/embed/mN8bbdAxK0Q

Here is screenshot of Lottery History for order that was added manually:

This topic was covered in WooCommerce Lottery documentation FAQ item no 34 which is now updated to with explanation of this additional way of adding orders (participants) manually for WooCommerce Lottery.