Customize Pre-Order Products

Do you want your customers to pre-order their favorite products? Then WooCommerce Pre-Orders is what you need!

This extension allows you to create a product, and start selling before it is actually available to the customer. You can choose if you want them to pay in advance or at the moment of the release, and many other options! Have a look at the documentation to know more!

The only thing missing with this plugin is a bit of customisation for products that can be pre-ordered. The products have no specific class, nor a badge that indicates the possibility to pre-order them.

Let’s see how to add these things!

Make Pre-Order Products Easily Customizable

Open the file functions.php in wp-content/themes/your-child-theme/ and add this code at the end of the file:


add_filter( 'body_class', 'add_preorder_class' );
add_filter( 'post_class', 'add_preorder_class' );
function add_preorder_class( $classes ) {
global $post;
$product = wc_get_product( $post->ID );
if ( $product && 'yes' === get_post_meta( $product->get_id(), '_wc_pre_orders_enabled', true ) ) {
$classes[] = 'pre-order';
}
return $classes;
}
add_action( 'woocommerce_before_shop_loop_item_title', 'show_preorder_badge' );
add_action( 'woocommerce_before_single_product_summary', 'show_preorder_badge' );
function show_preorder_badge() {
global $post, $product;
?>
<?php if ( 'yes' === get_post_meta( $product->get_id(), '_wc_pre_orders_enabled', true ) ) : ?>
<?php echo '<span class="onsale pre-order">' . esc_html__( 'Pre-Order!', 'domain' ) . '</span>'; ?>
<?php endif;
}

view raw

functions.php

hosted with ❤ by GitHub

What does this code do?

The first function from line 1 to 12 adds the class pre-order to the body tag when on the single product page, and the same class to the product item in the shop pages.

This would allow you to target those specific products both on the single product page and in the shop pages for simple or advanced style customizations.

The second function instead, from line 14 to 25, adds a badge to the product that indicates that it can be pre-ordered. This is an immediate visual feedback for the customer that makes them understand what kind of product they are looking at.

The badge has the classes onsale and pre-order. The first one is to inherit all the style from the Sale badge that comes with WooCommerce. This way we will have to add minimal style to the badge with the class pre-order to make it look different from the sale badge.

Style The Pre-Order Badge

Now that we have the badge, we just have to style it!

As we said, this badge inherits the style from the Sale one from WooCommerce so we will add only some minimal style, like the background color.

Open the file style.css in wp-content/themes/your-child-theme/ and add this code at the end:

span.pre-order { background-color:#09b3c7; }

This code will simply change the background color to a light blue.


More Posts That You Might Like…


One response to “Customize Pre-Order Products”

  1. What the pre-order plugin is really missing is the ability in the administration to filter the products that are in pre-order, the possibility to have specific shipping rules for pre-order product as well as specific coupon rules…

Leave a Reply

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Blog at WordPress.com.

%d bloggers like this: