可变产品属性:自定义每个显示的单选按钮的文本值 [英] Variable product attribute: Customizing each displayed radio buttons text value
问题描述
在WooCommerce中,我正在使用 WC Variations单选按钮 插件(由8manos提供),以将典型的下拉选择器替换为 Radio Buttons .
In WooCommerce I am using WC Variations Radio Buttons plugin (by 8manos) to replace the typical dropdown selectors with Radio Buttons.
我已将以下代码添加到我的子主题function.php
中:
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;
}
我已经能够设置所有四个变体名称的样式,只是看是否可行. 尽管我需要将它们分别设置为4种不同的颜色.在这里,我可以提供一些帮助.
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?
谢谢
推荐答案
以下是您重新访问的代码,该代码将仅在"Tab"属性单选按钮周围显示仅,而自定义显示的文本为 $term_slug
的组合的不同类别值.
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
.
因此,您将能够将某些CSS样式颜色仅应用于显示为'pa_tab'属性的每个单选按钮的自定义文本,并将这些CSS规则添加到活动主题style.css
…
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
…
这是重新访问的代码:
// Display the product variation price inside the variations dropdown.
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name', 10, 1 );
function display_price_in_variation_option_name( $term ) {
global $wpdb, $product;
// Define HERE the targetted attribute taxonomy slug
$tax_slug = 'pa_tab';
// compatibility with WC +3
$product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
if ( empty( $term ) || empty( $product_id ) )
return $term;
$result = $wpdb->get_var( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
$term_slug = ( ! empty( $result ) ) ? $result : $term;
$variation_id = $wpdb->get_var( "
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
");
$parent = wp_get_post_parent_id( $variation_id );
if ( $parent > 0 ) {
$_product = wc_get_product( $variation_id );
if ( has_term( $term, $tax_slug, $_product->id) )
$output = ' <span class="'.$tax_slug.'-price">' . wp_kses( woocommerce_price( $_product->get_price() ), array() ) . '</span><span class="' . $tax_slug . '-' . $term_slug . '"> - ('.$term.')</span>';
else
$output = ' ' . $term;
return $output;
}
return $term;
}
代码会出现在您活动的子主题(或主题)的function.php文件或任何插件文件中.
此代码已经过测试并且可以正常工作.
This code is tested and works.
生成的html代码如下:
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>
因此,您可以针对特定的单选按钮使用CSS规则来显示自定义文本,例如:
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;
}
这只是一个例子
这篇关于可变产品属性:自定义每个显示的单选按钮的文本值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!