在 WooCommerce 中,我使用
目前,四个单选选项中每个选项的变体名称都是红色",我希望每个选项都有不同的颜色.
为了实现这一点,我必须对代码进行哪些更改?
谢谢
2021 更新
这是您重新访问的代码,它将仅显示在标签"周围.属性单选按钮自定义显示文本 标记具有基于属性 slug 和
$term_slug<的不同类值的不同类值/code>
.
因此,您将能够仅将一些 CSS 样式颜色应用于每个单选按钮显示的pa_tab"属性的自定义文本,将这些 CSS 规则添加到您的活动主题 style.css
...>
这是重新访问的代码:
//从产品属性选项名称中获取变体ID的自定义函数函数 get_variation_id_from_option_name( $term_slug, $taxonomy, $product_id ) {全球 $wpdb;返回 $wpdb->get_var( $wpdb->prepare( "选择 pm.post_idFROM {$wpdb->prefix}postmeta pmLEFT JOIN {$wpdb->prefix}posts p ON pm.post_id = p.IDWHERE pm.meta_key LIKE '%s'AND pm.meta_value = '%s'AND p.post_parent = %d", '属性_' .$taxonomy, $term_slug, $product_id ) );}//在变体下拉菜单中显示产品变体价格.add_filter('woocommerce_variation_option_name', 'display_price_in_variation_option_name');函数 display_price_in_variation_option_name( $option_name ) {全球$产品;$taxonomy = 'pa_tab';//HERE 定义目标产品属性分类法 pa_color$term = get_term_by( 'name', $option_name, $taxonomy );if ( is_admin() || !is_a( $term, 'WP_Term' ) || !is_a( $product, 'WC_Product' ) ) {返回 $option_name;}$variation_id = get_variation_id_from_option_name( $term->slug, $taxonomy, $product->get_id() );如果( $variation_id > 0 ){$variation = wc_get_product( $variation_id );$price_html = wc_price( wc_get_price_to_display( $variation ) );if ( has_term( $option_name, $taxonomy, $product->get_id() ) ) {$output = ' <span class="'.$taxonomy.'-price">'.strip_tags( $price_html ) .'</span><span class="'.$taxonomy.'-'.$term->slug.'">- ('.$option_name.')</span>';} 别的 {$输出 = ' ' .$option_name;}返回 $output;}返回 $option_name;}
代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.
此代码已经过测试且有效.
生成的html代码是这样的:
<div><输入类型=收音机"name="attribute_pa_color";值=选项蓝"id=pa_tab_v_option-blue"><label for="pa_tab_v_option-blue"><span class="pa_tab-price">$99.00</span><span class="pa_tab-option-blue">-(选项蓝色)</span>标签><div><输入类型=收音机"name="attribute_pa_color";值=选项-绿色"id="pa_tab_v_option-green"><label for="pa_tab_v_option-green"><span class="pa_tab-price">$299.00</span><span class="pa_tab-option-green">-(选项绿色)</span>标签>
<!-- .../... ... --></td>
<块引用>因此,您将这个特定的单选按钮定位为显示自定义文本的 CSS 规则如下:
span.pa_tab-price {字体系列:拉托,无衬线;字体大小:中等;}span.pa_tab-option-blue, span.pa_tab-option-green,span.pa_tab-option-purple, span.pa_tab-option-orange {字体系列:拉托,无衬线;字体大小:中等;字体样式:正常;字体粗细:300;}span.pa_tab-option-blue {颜色:蓝色;}span.pa_tab-option-green {颜色:绿色;}span.pa_tab-option-purple {颜色:紫色;}span.pa_tab-option-orange {颜色为橙色;}
这只是一个例子
In WooCommerce I am using WC Variations Radio Buttons plugin (by 8manos) to replace the typical dropdown selectors with Radio Buttons.
I've added the below code to my child themes function.php
:
// Display the product variation price inside the variations dropdown.
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
function display_price_in_variation_option_name( $term ) {
global $wpdb, $product;
if ( empty( $term ) ) return $term;
if ( empty( $product->id ) ) return $term;
$result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
$term_slug = ( !empty( $result ) ) ? $result[0] : $term;
$query = "SELECT postmeta.post_id AS product_id
FROM {$wpdb->prefix}postmeta AS postmeta
LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
WHERE postmeta.meta_key LIKE 'attribute_%'
AND postmeta.meta_value = '$term_slug'
AND products.post_parent = $product->id";
$variation_id = $wpdb->get_col( $query );
$parent = wp_get_post_parent_id( $variation_id[0] );
if ( $parent > 0 ) {
$_product = new WC_Product_Variation( $variation_id[0] );
return '' ."<font size='3' face='Lato'>". wp_kses( woocommerce_price( $_product->get_price() ), array() ) . "<font size='3' color='red' face='Lato' style='normal' weight='300'>".' - ('.$term.')';
}
return $term;
}
I've been able to style all four variation names just to see if it was possible. Although, I need each of them to be 4 different colours. That's where I can use some help.
The image below shows what I want (different colours for each "Option"):
Ignore "Color" variation. Just need to modify the "Tab" variation.
For the moment, the variation name in each of the four radio options is 'red', and I would like a different color for each.
What do I have to change in my code, to achieve that?
Thanks
解决方案 2021 Update
Here is your revisited code that will display only around the "Tab" attribute radio buttons custom displayed text a <span>
tag with a different class value based on a combination of the attribute slug and the $term_slug
.
So you will be able to apply some CSS style colors to each radio button displayed custom text for the 'pa_tab' attribute only, adding those CSS rules to your active theme style.css
…
Here is that revisited code:
// Custom function that get the variation id from product attribute option name
function get_variation_id_from_option_name( $term_slug, $taxonomy, $product_id ) {
global $wpdb;
return $wpdb->get_var( $wpdb->prepare( "
SELECT pm.post_id
FROM {$wpdb->prefix}postmeta pm
LEFT JOIN {$wpdb->prefix}posts p ON pm.post_id = p.ID
WHERE pm.meta_key LIKE '%s'
AND pm.meta_value = '%s'
AND p.post_parent = %d
", 'attribute_' . $taxonomy, $term_slug, $product_id ) );
}
// Display the product variation price inside the variations dropdown.
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
function display_price_in_variation_option_name( $option_name ) {
global $product;
$taxonomy = 'pa_tab'; // HERE Define the targetted product attribute taxonomy pa_color
$term = get_term_by( 'name', $option_name, $taxonomy );
if ( is_admin() || ! is_a( $term, 'WP_Term' ) || ! is_a( $product, 'WC_Product' ) ) {
return $option_name;
}
$variation_id = get_variation_id_from_option_name( $term->slug, $taxonomy, $product->get_id() );
if ( $variation_id > 0 ) {
$variation = wc_get_product( $variation_id );
$price_html = wc_price( wc_get_price_to_display( $variation ) );
if ( has_term( $option_name, $taxonomy, $product->get_id() ) ) {
$output = ' <span class="'.$taxonomy.'-price">' . strip_tags( $price_html ) . '</span><span class="'.$taxonomy.'-'.$term->slug.'"> - ('.$option_name.')</span>';
} else {
$output = ' ' . $option_name;
}
return $output;
}
return $option_name;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and works.
The generated html code is something like this:
<td class="value">
<div>
<input type="radio" name="attribute_pa_color" value="option-blue" id="pa_tab_v_option-blue">
<label for="pa_tab_v_option-blue">
<span class="pa_tab-price">$99.00</span>
<span class="pa_tab-option-blue"> - (Option Blue)</span>
</label>
</div>
<div>
<input type="radio" name="attribute_pa_color" value="option-green" id="pa_tab_v_option-green">
<label for="pa_tab_v_option-green">
<span class="pa_tab-price">$299.00</span>
<span class="pa_tab-option-green"> - (Option Green)</span>
</label>
</div>
<!-- ... / ... ... -->
</td>
So you target this specific radio buttons displayed custom text with CSS rules something like:
span.pa_tab-price {
font-family: lato, sans-serif;
font-size: medium;
}
span.pa_tab-option-blue, span.pa_tab-option-green,
span.pa_tab-option-purple, span.pa_tab-option-orange {
font-family: lato, sans-serif;
font-size: medium;
font-style: normal;
font-weight: 300;
}
span.pa_tab-option-blue {
color: blue;
}
span.pa_tab-option-green {
color: green;
}
span.pa_tab-option-purple {
color: purple;
}
span.pa_tab-option-orange {
color: orange;
}
This is just an example
这篇关于可变产品属性:自定义每个显示的单选按钮文本值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!
相关文章
- 以编程方式将可下载文件添加到 Woocommerce 产品Add programmatically a downloadable file to Woocommerce products(以编程方式将可下载文件添加到 Woocommerce 产品)
- 获取今天 Woocommerce 中每种产品的总订单数Get today#39;s total orders count for each product in Woocommerce(获取今天 Woocommerce 中每种产品的总订单数)
- 在 WooCommerce 和电话字段验证问题中添加自定义注Add Custom registration fields in WooCommerce and phone field validation issue(在 WooCommerce 和电话字段验证问题中添加自定义注册字段
- 在 Woocommerce 简单产品中添加一个将更改价格的选Add a select field that will change price in Woocommerce simple products(在 Woocommerce 简单产品中添加一个将更改价格的选择字段)
- 在 WooCommerce 3 中将自定义列添加到管理产品列表Add custom columns to admin products list in WooCommerce 3(在 WooCommerce 3 中将自定义列添加到管理产品列表)
- 自定义结帐“下订单"按钮输出htmlCustomizing checkout quot;Place Orderquot; button output html(自定义结帐“下订单按钮输出html)
最新文章
- 更改 WooCommerce 迷你购物车小部件上的购物车和结
- 基于产品类型的 WooCommerce“添加到购物车"按
- 在最近的订单模板和管理订单(woocommerce)上显示产
- WooCommerce 向客户发送新订单电子邮件
- 在 Woocommerce 中仅向 PayPal 发送订单号而不是商品
- 将 ajax 上的 JS 警报添加到购物车以获取 Woocomme
- 结帐字段:隐藏和显示现有字段
- 使 WC_Cart add_to_cart 方法为 Woocommerce 中的客人工作
- WooCommerce 中的动态同步自定义结帐选择字段
- 根据 Woocommerce 中的付款方式停止特定客户的电子