WooCommerce 中的风格呼应

Question

我使用此代码从我的 WooCommerce 商店的自定义字段中回显值。但是现在我在设置此文本的样式时遇到问题 - 我该怎么做？

    // Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

    global $woocommerce, $post;

    // Text Field
    woocommerce_wp_textarea_input(
        array(
        'id'          => '_textarea',
        'label'       => __( 'My Textarea', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' )
    )
    );
}
function woo_add_custom_general_fields_save( $post_id ){

    // Textarea
    $woocommerce_textarea = $_POST['_textarea'];
    if( !empty( $woocommerce_textarea ) )
    update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );

}

Answer 1

这是基本的。你必须回显 html。将 class 添加到 html，然后使用 CSS.

设置样式

echo '<p style="color:blue;">'.get_post_meta( $post->ID, '_textarea', true ).'</p>';

Answer 2

woocommerce_wp_textarea_input 接受样式和 class 参数。

woocommerce_wp_textarea_input(
        array(
        'id'          => '_textarea',
        'label'       => __( 'My Textarea', 'woocommerce' ),
        'placeholder' => '',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the custom value here.', 'woocommerce' ),
        'class' => 'special-class'
    )
    );

那么该项目应该被包裹在 special-class class 中，您可以使用 CSS 以任何您喜欢的方式设置它的样式。

.special-class {
  border: 3px solid red;
}

Answer 3

function woo_add_custom_general_fields() {
    woocommerce_wp_textarea_input(
            array(
            'id'          => '_textarea',
            'label'       => __( 'My Textarea', 'woocommerce' ),
            'placeholder' => '',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'class' => 'special-class'
        )
    );
}
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

function woo_add_custom_general_fields_save( $post_id ){
   $woocommerce_textarea = $_POST['_textarea'];
   if (!empty($woocommerce_textarea)) {
        update_post_meta($post_id, '_textarea', esc_html($woocommerce_textarea));
    }
}
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );


function demo(){
    global $product;
    $meta = get_post_meta($product->id, "_textarea", true);
    ?><p class="custom-text"><?php echo  substr($meta, 0, 300); ?> </p><?php 
}
add_action('woocommerce_single_product_summary','demo');

我已经显示了特定产品的储值。我使用了 Demo 即在产品页面上显示价值的功能。

WooCommerce 中的风格呼应

Style Echo in WooCommerce

php

wordpress

woocommerce