On this publish I’m going to point out you the way to customise Woocommerce store and class web page. These hacks are actually helpful for each Woocommerce store and they’re very easy to make use of.
With a view to use all these snippets proven on this publish you want add them inside your youngster theme’s capabilities.php file or higher but, use Code Snippets plugin. This manner you’re not going to lose these modifications in case you’re switching your theme.
Additionally, check out the video tutorial right here beneath after which it should in all probability be a bit simpler to know what’s what.
Video: Find out how to customise Woocommerce store and class web page?
Find out how to Add conditional Woocommerce product class web page messages
With the assistance of this code snippet right here you’ll be able to add a message to all Woocommerce product class pages.
add_action( 'woocommerce_before_main_content', 'shop_message', 20 );
perform shop_message() {
echo '<p class="woocommerce-message">Free transport for all orders
// Customized message on Woocommerce store web page and all class pages
add_action( 'woocommerce_before_main_content', 'shop_message', 20 );
perform shop_message() {
echo '<p class="woocommerce-message">Free transport for all orders</p>'; // Change your message right here
}Find out how to add message to particular Woocommerce class web page?
If it’s good to add a message to the scpecific Woocommerce product class web page (Storage catogory, for instance) then use this code as a substitute.
add_action( 'woocommerce_before_main_content', 'category_message', 20 );
perform category_message() {
if ( is_product_category( 'storage' ) ) { // Change your vategory slug right here
echo '<p class="woocommerce-message">Estimated transport time: 2-3 weeks
// Message for particular class
add_action( 'woocommerce_before_main_content', 'category_message', 20 );
perform category_message() {
if ( is_product_category( 'storage' ) ) { // Change your vategory slug right here
echo '<p class="woocommerce-message">Estimated transport time: 2-3 weeks</p>'; // Change your message right here
}
}Find out how to add one message to particular Woocommerce class web page and one other message to all different class pages?
Now lets add a one message to the Sotrage class web page and one other message to all different classes.
add_action( 'woocommerce_before_shop_loop', 'conditional_message', 1 );
perform conditional_message() {
if ( is_product_category( 'storage' ) ) { // Change your vategory slug right here
echo '<p class="woocommerce-message">Estimated supply time: 2-3 weeks</p>';// Change your Storage class message right here
} else {
echo '<p class="woocommerce-message">Estimated supply time: 1 week
// One message for particular class (storage) and one other for all different classes
add_action( 'woocommerce_before_shop_loop', 'conditional_message', 1 );
perform conditional_message() {
if ( is_product_category( 'storage' ) ) { // Change your vategory slug right here
echo '<p class="woocommerce-message">Estimated supply time: 2-3 weeks</p>';// Change your Storage class message right here
} else {
echo '<p class="woocommerce-message">Estimated supply time: 1 week</p>'; // Change your shop-wide message right here
}
}Find out how to add a Woocommerce product class dropdown and attributes filter above the product loop?
Step 1: Create a widget space
With the assistance of this code snippet right here beneath we create a widget space and add it above the Woocommerce product loop.
add_action( 'widgets_init', 'product_filter_widget_area' );
perform product_filter_widget_area() {
register_sidebar( array(
'id' => 'product_filter_sort',
'title' => __( 'Product filter widgets', 'themename' ),
'description' => __( 'Right here goes your filter objects', 'themename' ),
'before_widget' => '<div class="product-category-dropdown">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '
// Create a brand new widget space known as Product Class filter
add_action( 'widgets_init', 'product_filter_widget_area' );
perform product_filter_widget_area() {
register_sidebar( array(
'id' => 'product_filter_sort',
'title' => __( 'Product filter widgets', 'themename' ),
'description' => __( 'Right here goes your filter objects', 'themename' ),
'before_widget' => '<div class="product-category-dropdown">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
) );
}
// Add this widget space on high of the class and store pages
add_action( 'woocommerce_before_shop_loop','add_widget_area' ); // Hook it after headline and earlier than loop
perform add_widget_area() {
if ( is_active_sidebar( 'product_filter_sort' ) ) {
dynamic_sidebar( 'product_filter_sort' );
}
}Step 2: Add Woocommerce product class and filter by attributes widgets
Now go to Look >> Widgets and add your Woocommerce Product Classes filter in “Product filter widgets” space. Set it to point out as dropdown.
Subsequent add your Filter by attributes widgets and set them to point out as dropdown
Step 3: Add {custom} CSS
Go to Appearace >> Customise >> Further CSS and this piece of CSS.
@media solely display screen and (min-width: 668px) {
.product-category-dropdown {
margin: 0px 10px 20px 0px;
show: inline-block;
width: 32.5%;
}
}
@media solely display screen and (max-width: 667px) {
.product-category-dropdown {
margin-bottom: 10px;
}
}The tip outcome ought to appear like this.
Find out how to take away Woocommerce Uncategorized product class from store and class pages?
This code right here beneath hides Uncategorized class from store web page
// Conceal Uncategorized product class from store web page
add_filter( 'woocommerce_product_subcategories_args', 'hide_uncategorized_cat_from_shop_page' );
perform hide_uncategorized_cat_from_shop_page( $args ) {
$args['exclude'] = get_option( 'default_product_cat' );
return $args;
}Find out how to take away Woocommerce Uncategorized product class from Product class widget?
This code right here beneath hides Uncategorized class from the sidebar widget
// Conceal Uncategorized product class from widget
add_filter( 'woocommerce_product_categories_widget_args', 'hide_uncategorized_cat_from_widget' );
perform hide_uncategorized_cat_from_widget( $args ) {
$args['exclude'] = get_option( 'default_product_cat' );
return $args;
}Find out how to take away class product rely in product archives?
As you in all probability have seen the class loop has a product rely proven subsequent to the class title. This code will cover Woocommerce product rely in product archives.
add_filter( 'woocommerce_subcategory_count_html', '__return_false' );Find out how to present the Low cost Share on the Woocommerce Sale Badge?
By default Woocommerce reveals a badge with the “Sale” textual content. In case you would kike to point out a reduction share as a substitute, then use this code right here beneath.
perform sale_badge_percentage() {
world $product;
if ( ! $product->is_on_sale() ) return;
if ( $product->is_type( 'easy' ) ) {
$max_percentage = ( ( $product->get_regular_price() – $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} elseif ( $product->is_type( 'variable' ) ) {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$value = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $value != 0 && ! empty( $sale ) ) $share = ( $value – $sale ) / $value * 100;
if ( $share > $max_percentage ) {
$max_percentage = $share;
}
}
}
if ( $max_percentage > 0 ) echo "<span class='onsale'>-" . spherical($max_percentage) . "%
add_action( 'woocommerce_sale_flash', 'sale_badge_percentage', 25 );
perform sale_badge_percentage() {
world $product;
if ( ! $product->is_on_sale() ) return;
if ( $product->is_type( 'easy' ) ) {
$max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} elseif ( $product->is_type( 'variable' ) ) {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$value = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $value != 0 && ! empty( $sale ) ) $share = ( $value - $sale ) / $value * 100;
if ( $share > $max_percentage ) {
$max_percentage = $share;
}
}
}
if ( $max_percentage > 0 ) echo "<span class='onsale'>-" . spherical($max_percentage) . "%</span>"; // If you need to point out -40% off then add textual content after % signal
}Find out how to Show “NEW” Badge for Woocommerce Current Merchandise which are lower than 30 days previous?
Step 1: Add the code snippet right here beneath
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
perform new_badge() {
world $product;
$newness_days = 30; // Variety of days the badge is proven
$created = strtotime( $product->get_date_created() );
if ( ( time() – ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="new-badge onsale">' . esc_html__( 'NEW', 'woocommerce' ) . '
// New badge for current merchandise
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
perform new_badge() {
world $product;
$newness_days = 30; // Variety of days the badge is proven
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="new-badge onsale">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
}
}Step 2: Customise your badge
Concentrate thought that the CSS proven right here beneath may have tweaking and it rely in your theme. So, tweak it accordingly.
// “NEW” Badge for Woocommerce Current Merchandise which are lower than 30 days previous
.woocommerce ul.merchandise li.product .new-badge.onsale {
background: #ffcc00;
high: 50px;
z-index: 10;
left: 0px;
shade: #000;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9em;
border-radius: 0px;
min-width: 60px;
padding-left: 19px !essential;
}
span.new-badge.onsale:after {
border: 5px stable #ffcc00;
border-color: clear clear #ffcc00 #ffcc00;
border-width: 9px 6px;
place: absolute;
proper: -10px;
backside: 0;
content material: '';
}
span.new-badge.onsale:earlier than {
border: 5px stable #ffcc00;
border-color: #ffcc00 clear clear #ffcc00;
border-width: 9px 6px;
place: absolute;
proper: -10px;
high: 0;
content material: '';
}If you need to point out it as a vertical ribbon then add this piece of CSS.
span.new-badge.onsale {
min-width: 60px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
rework: rotate(90deg);
}Find out how to show Woocommerce product class title above the product title?
This answer accommodates two components.
add_action( 'woocommerce_shop_loop_item_title', 'show_category_on_loop', 1 );
perform show_category_on_loop() {
world $product;
$phrases = get_the_terms( $product->get_id(), 'product_cat' );
if( $phrases ) {
$names = array();
foreach ( $phrases as $time period ) {
$names[] = $term->title;
}
print '<span class="category-text"> '.be part of( ', ', $names ).'
// Show Woocommerce product class title above the product title on product class web page
add_action( 'woocommerce_shop_loop_item_title', 'show_category_on_loop', 1 );
perform show_category_on_loop() {
world $product;
$phrases = get_the_terms( $product->get_id(), 'product_cat' );
if( $phrases ) {
$names = array();
foreach ( $phrases as $time period ) {
$names[] = $time period->title;
}
print '<span class="category-text"> '.be part of( ', ', $names ).'</span>'.PHP_EOL;
}
}Now, did you see the “category-text” class over there? This one lets you customise it with the {custom} CSS. For instance:
/* show Woocommerce product class title above the product title */
.category-text {
font-size: 13px;
margin-bottom: 1em;
}Find out how to show Woocommerce SKU within the product loop pages?
If it’s good to add Woocommerce product SKU within the Woocommerce loop pages then simply use this snippet right here.
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_before_title', 15 );
perform custom_before_title() {
world $product;
if ( $product->get_sku() ) {
echo '<span class="sku-text">SKU: ' . $product->get_sku() . '
// show Woocommerce SKU within the product loop pages
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_before_title', 15 );
perform custom_before_title() {
world $product;
if ( $product->get_sku() ) {
echo '<span class="sku-text">SKU: ' . $product->get_sku() . '</span>';
}
}And if you want to customise the oputput then add this piece of CSS to the customizer.
/* show Woocommerce SKU within the product loop pages */
.sku-text {
font-size: 13px;
margin: 5px 0px;
}Find out how to show saved quantity for Woocommerce discounted merchandise?
This snippet right here lets you show saved quantity in your Woocommerce product loop pages. For instance: “You save: XX €”. See the screenshot right here beneath.
add_action( 'woocommerce_after_shop_loop_item', 'you_save_for_archives', 1 ); // Change your hook precedence
perform you_save_for_archives() {
world $product;
// works for Easy and Variable kind
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true ); // For instance: 49.99
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true ); // For instance: 39.99
if( !empty($sale_price) ) {
$saved_amount = $regular_price – $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$share = spherical( ( ( $regular_price – $sale_price ) / $regular_price ) * 100 );
?>
<span class="you-save-price">You save: <?php echo $currency_symbol .''. number_format($saved_amount, 2, '.', ''); ?></span>
// Show saved quantity for Woocommerce discounted merchandise
add_action( 'woocommerce_after_shop_loop_item', 'you_save_for_archives', 1 ); // Change your hook precedence
perform you_save_for_archives() {
world $product;
// works for Easy and Variable kind
$regular_price = get_post_meta( $product->get_id(), '_regular_price', true ); // For instance: 49.99
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true ); // For instance: 39.99
if( !empty($sale_price) ) {
$saved_amount = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();
$share = spherical( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<span class="you-save-price">You save: <?php echo $currency_symbol .''. number_format($saved_amount, 2, '.', ''); ?></span>
<?php
}
}Additionally, don’t neglect to customise the output with the assistance of this piece of CSS.
/* show saved quantity for Woocommerce discounted merchandise */
.you-save-price {
font-size: 13px;
margin-bottom: 10px;
}Find out how to show saved quantity on Woocommerce single product web page?
Simply use this code right here. It reveals the saved quantity each for easy and ariable merchandise.
add_action( 'woocommerce_single_product_summary', 'simple_product_saving_amount', 11 );
perform simple_product_saving_amount() {
world $product;
if( $product->is_type('easy') && $product->is_on_sale() ) {
$regular_price = (float) wc_get_price_to_display( $product, array('value' => $product->get_regular_price() ) );
$active_price = (float) wc_get_price_to_display( $product, array('value' => $product->get_sale_price() ) );
$saved_amount = $regular_price – $active_price;
$share = spherical( $saved_amount / $regular_price * 100 );
echo '<p id="saving_total_price">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$share.'%)</p>';
}
}
// For product variations (on variable merchandise)
add_filter( 'woocommerce_available_variation', 'variable_product_saving_amount', 10, 3 );
perform variable_product_saving_amount( $knowledge, $product, $variation ) {
if( $variation->is_on_sale() ) {
$saved_amount = $knowledge['display_regular_price'] – $knowledge['display_price'];
$share = spherical( $saved_amount / $knowledge['display_regular_price'] * 100 );
$knowledge['price_html'] .= '<p id="saving_total_price">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$share.'%)
// For easy merchandise
add_action( 'woocommerce_single_product_summary', 'simple_product_saving_amount', 11 );
perform simple_product_saving_amount() {
world $product;
if( $product->is_type('easy') && $product->is_on_sale() ) {
$regular_price = (float) wc_get_price_to_display( $product, array('value' => $product->get_regular_price() ) );
$active_price = (float) wc_get_price_to_display( $product, array('value' => $product->get_sale_price() ) );
$saved_amount = $regular_price - $active_price;
$share = spherical( $saved_amount / $regular_price * 100 );
echo '<p id="saving_total_price">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$share.'%)</p>';
}
}
// For product variations (on variable merchandise)
add_filter( 'woocommerce_available_variation', 'variable_product_saving_amount', 10, 3 );
perform variable_product_saving_amount( $knowledge, $product, $variation ) {
if( $variation->is_on_sale() ) {
$saved_amount = $knowledge['display_regular_price'] - $knowledge['display_price'];
$share = spherical( $saved_amount / $knowledge['display_regular_price'] * 100 );
$knowledge['price_html'] .= '<p id="saving_total_price">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$share.'%)</p>';
}
return $knowledge;
}Find out how to show {custom} textual content in Woocommerce product loops and single product pages?
Typically you might must have a must show {custom} textual content in Woocommerce product loops and archive pages. Let’s see how can we accomplish that.
First, let’s create a brand new Woocommerce single product {custom} subject and let’s output it within the desired place.
add_action( 'woocommerce_product_options_general_product_data', 'wpsh_add_text_field' );
perform wpsh_add_text_field() {
woocommerce_wp_text_input( array(
'id' => '_shipping_time',
'label' => __( 'Transport information', 'woocommerce' ),
'description' => __( 'This can be a {custom} subject, you’ll be able to write right here something you need.', 'woocommerce' ),
'desc_tip' => 'true',
'kind' => 'textual content'
) );
}
// Save {custom} subject values
add_action( 'woocommerce_admin_process_product_object', 'wpsh_save_field', 10, 1 );
perform wpsh_save_field( $product ) {
if ( isset( $_POST['_shipping_time'] ) ) {
$product->update_meta_data( '_shipping_time', sanitize_text_field( $_POST['_shipping_time'] ) );
}
}
// Show this tradition subject on Woocommerce single product pages
add_action( 'woocommerce_product_meta_end', 'wpsh_display_on_single_product_page', 10 );
perform wpsh_display_on_single_product_page() {
world $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get meta
$textual content = $product->get_meta( '_shipping_time' );
// NOT empty
if ( ! empty ( $textual content ) ) {
echo '<div class="woocommerce-message">Estimated transport time: ' . $textual content . '</div>';
}
}
}
// Show this tradition subject on Woocommerce archive pages
add_action( 'woocommerce_after_shop_loop_item', 'wpsh_display_on_archive_page', 10 );
perform wpsh_display_on_archive_page() {
world $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get meta
$textual content = $product->get_meta( '_shipping_time' );
// NOT empty
if ( ! empty ( $textual content ) ) {
echo '<div class="custom-text">Estimated transport time: ' . $textual content . '
// Add {custom} subject to Woocommerce backend below Basic tab
add_action( 'woocommerce_product_options_general_product_data', 'wpsh_add_text_field' );
perform wpsh_add_text_field() {
woocommerce_wp_text_input( array(
'id' => '_shipping_time',
'label' => __( 'Transport information', 'woocommerce' ),
'description' => __( 'This can be a {custom} subject, you'll be able to write right here something you need.', 'woocommerce' ),
'desc_tip' => 'true',
'kind' => 'textual content'
) );
}
// Save {custom} subject values
add_action( 'woocommerce_admin_process_product_object', 'wpsh_save_field', 10, 1 );
perform wpsh_save_field( $product ) {
if ( isset( $_POST['_shipping_time'] ) ) {
$product->update_meta_data( '_shipping_time', sanitize_text_field( $_POST['_shipping_time'] ) );
}
}
// Show this tradition subject on Woocommerce single product pages
add_action( 'woocommerce_product_meta_end', 'wpsh_display_on_single_product_page', 10 );
perform wpsh_display_on_single_product_page() {
world $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get meta
$textual content = $product->get_meta( '_shipping_time' );
// NOT empty
if ( ! empty ( $textual content ) ) {
echo '<div class="woocommerce-message">Estimated transport time: ' . $textual content . '</div>';
}
}
}
// Show this tradition subject on Woocommerce archive pages
add_action( 'woocommerce_after_shop_loop_item', 'wpsh_display_on_archive_page', 10 );
perform wpsh_display_on_archive_page() {
world $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get meta
$textual content = $product->get_meta( '_shipping_time' );
// NOT empty
if ( ! empty ( $textual content ) ) {
echo '<div class="custom-text">Estimated transport time: ' . $textual content . '</div>';
}
}
}
