如何添加除“新”和“销售”之外的其他徽章产品

时间:2016-04-20 17:18:32

标签: wordpress woocommerce product badge

我正在使用wordpress在电子商务网站上工作,有人可能会告诉我如何添加其他徽章而不是“新”和“销售”

2 个答案:

答案 0 :(得分:2)

我找到了几个插件,免费和优质的Woocommerce产品徽章。

在检查了我自己制作的所有选项之后。如果您使用woocommerce,它会将标签和基于类别的类添加到产品盒容器中。基于此,我们可以在元素之前添加CSS :: before和:: after。因此,我们可以将任何徽章文本添加为​​ content 属性。只需在产品中添加任何标记即可添加一些类,并根据需要执行CSS。

答案 1 :(得分:0)

我还没有完成,理想情况下我想把它移到一个插件中,但这就是我到目前为止所拥有的。

使用此代码(现在在functions.php中)为您的产品添加一个标签,为我指示新到货和特卖产品。你可以改变自己的喜好。

 /**
 *
 * 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');

我必须在子主题中修改我的主题中的mk_products.php以捕获新设置。

    // 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 = '';
    }

我还没有完成css位。 我意识到这是一个相当可恶的黑客。我希望将它移动到一个插件,它真正属于它,并用更自定义的东西替换css徽章。随着我的进步,我会更新。我真的偶然发现了你的帖子,在这个黑客的最后阶段寻找我自己的css更新问题的解决方案。