Question

我使用此代码来回显我的WooCommerce Shop上自定义字段的值。但是现在我对这个文本的样式有问题 - 我怎么能这样做？

    // 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

woocommerce_wp_textarea_input接受样式和类参数。

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类中，您可以使用CSS以任意方式设置样式。

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

Answer 2

这是基本的。你必须回应html。在该html中添加一个类，然后使用CSS对其进行样式设置。

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

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

我已显示特定产品的储值。我使用了演示即funcntion来显示产品页面上的值。

WooCommerce中的风格回声

3 个答案: