我正在使用wordpress在电子商务网站上工作,有人可能会告诉我如何添加其他徽章而不是“新”和“销售”
答案 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更新问题的解决方案。