CODEWITHSUNDEEP
wordpresswoocommerceproductbadge
MiraTech
MiraTech

Reputation: 1302

How to add products other badges than "new" and "sale"

I am working on e-commerce website using wordpress, may someone tell me how to add on products other badges than "new" and "sale"

Upvotes: 4

Views: 10206

Answers (2)

Phil Rushworth
Phil Rushworth

Reputation: 51

I'm not done yet and ideally I would like to move this to a plugin, but here's what I have so far.

Use this code (in functions.php for now) to add a tab to your products indicating, for me, new arrivals and exlusive products. You can change to your liking.

 /**
 *
 * This creates a tab on simple and variable products to hold
 * ZhenTea custom settings.
 * 
 * Thanks to http://jeroensormani.com/adding-custom-woocommerce-product-fields/
 * 
 * Relies on customizations to 
 * /zhenteadev/wp-content/themes/jupiter-child/components/shortcodes/mk_products/mk_products.php
 * in order to render badges.
 *
 */
function zt_custom_product_data_tab($tabs)
{
    $tabs['zt_custom_product_settings'] = array(
        'label' => __('ZhenTea', 'woocommerce'),
        'target' => 'zt_custom_product_options',
        'class' => array(
            'show_if_simple',
            'show_if_variable'
        ),
        'priority' => '10'
    );

    return $tabs;
}

add_filter('woocommerce_product_data_tabs', 'zt_custom_product_data_tab');

// add_filter('woocommerce_product_data_panels', 'zt_custom_product_data_tab'); // WC 2.6 and up

/**
 * This is the content of the ZhenTea custom
 * product tab
 *
 * http://jeroensormani.com/adding-custom-woocommerce-product-fields/
 */
function zt_custom_product_tab_contents()
{
    global $post;
    // Note the 'id' attribute needs to match the 'target' parameter set above
    ?><div id='zt_custom_product_options' class='panel woocommerce_options_panel'><?php
    ?><div class='options_group'><?php
    woocommerce_wp_checkbox(array(
        'id' => '_zt_new_arrival',
        'label' => __('Is this a new arrival?', 'woocommerce')
    ));
    woocommerce_wp_checkbox(array(
        'id' => '_zt_zhentea_exclusive',
        'label' => __('Is this a ZhenTea exclusive?', 'woocommerce')
    ));
    ?></div>

    </div><?php
}
add_filter('woocommerce_product_data_panels', 'zt_custom_product_tab_contents');

/**
 * Save the custom fields.
 * http://jeroensormani.com/adding-custom-woocommerce-product-fields/
 */
function zt_save_custom_product_settings($post_id)
{
    $zt_new_arrival = isset($_POST['_zt_new_arrival']) ? true : false;

    update_post_meta($post_id, '_zt_new_arrival', $zt_new_arrival);

    $zt_zhentea_exclusive = isset($_POST['_zt_zhentea_exclusive']) ? true : false;
    update_post_meta($post_id, '_zt_zhentea_exclusive', $zt_zhentea_exclusive);
}
add_action('woocommerce_process_product_meta_simple', 'zt_save_custom_product_settings');
add_action('woocommerce_process_product_meta_variable', 'zt_save_custom_product_settings');

I had to modify mk_products.php from my theme in a child theme to catch the new settings.

    // Check if product is new arrival and apply badge
    $newArrival = get_post_meta($product_id, '_zt_new_arrival');
    if ($newArrival) {
        $sale_badge = apply_filters('woocommerce_sale_flash', '<span class="onsale"><span>' . __('Sale', 'mk_framework') . '</span></span>', $post, $product);
    }
    // check if product is ZhenTea Exclusive and apply badge

    if ($mk_options['woocommerce_loop_show_desc'] == 'true') {
        $item_desc = apply_filters('woocommerce_short_description', $post->post_excerpt);
    } else {
        $item_desc = '';
    }

And I haven't got the css bit done yet. I realize this is a fairly abominable hack. I'm hoping to move it to a plugin, where it really belongs and replace the css badges with something more custom. I'll update as I progress. I literally stumbled across your post, looking for a solution to my own css update issues in the last phase of this hack.

Upvotes: 2

Iggy
Iggy

Reputation: 2121

I've found several plugins, free and premium for Woocommerce product badges.

After checking all the options I've made it myself. If you use woocommerce, it adds tags and category-based classes to product box containers. Based on this we can add CSS ::before and ::after to elements. So we can add any badge text as content property there. Just add any tag to your product to have some class added and do CSS as needed.

Upvotes: 3

Related Questions