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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
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.
Leave a Reply