在 WooCommerce 产品页面中显示带有标签和值的自定义字段？答案

【问题标题】：Display Custom fields with labels & values in WooCommerce prodcut page?在 WooCommerce 产品页面中显示带有标签和值的自定义字段？
【发布时间】：2021-12-09 17:39:26
【问题描述】：

我对 PHP 不是很好，目前在尝试使用 Advanced Custom Feilds 重新创建如下显示的网格时确实遇到了麻烦 - 我的 Feild 组的图片https://ibb.co/sH4jvLv

标签在左侧，字段在右侧的布局。

我正在尝试使用 Advanced Custom Feilds 在标签后更好地组装 WooCommerce 单一产品页面。帖子类型已设置为产品并输入了值 - 但我一生都无法理解如何同时显示标签和值，而如果值为空则留空。

已添加到 functions.php，但我感觉我要么接近要么一英里。

任何帮助将不胜感激。

代码：

add_action( 'woocommerce_after_single_product', 'property_overview_field', 3 );
  
function property_overview_field() { ?>
 
<?php 

<?php if ( $guide_price != '' || $property_category != '' || $property_type != '' || $bedroom != '' || $bathroom != '' || $listing_status != '' || $city != '' || $county != '' || $location != '' || $epc_rating !='' ) { ?>
                    
<div class="property-overview">

    <ul>
        <?php
            if( $guide_price != '') { ;?>
        <li>
            <?php echo $field['label']; ?>:
            <strong><?php echo $field['value']; ?></strong>
        </li>
         <?php
            if( $property_category != '') { ;?>
        <li>
            <?php echo $field['label']; ?>:
            <strong><?php echo $field['value']; ?></strong>
        </li>
         <?php
            if( $property_type != '') { ;?>
        <li>
            <?php echo $field['label']; ?>:
            <strong><?php echo $field['value']; ?></strong>
        </li>
         <?php
            if( $bedroom != '') { ;?>
        <li>
            <?php echo $field['label']; ?>:
            <strong><?php echo $field['value']; ?></strong>
        </li>
    </ul>
</div>
<?php }     
}

CSS

.property-overview{margin: 0px 0px 30px 0px;padding: 0px;display: flex;} .property-overview ul {background: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.1);padding: 12px 20px !important; width: 100%;margin-top: 0; margin-bottom: 10px;list-style: none !important;} .single-pro_estate .property-overview li {border-bottom: 1px dashed #ddd;clear: left;float: left;line-height: 40px; width: 48%;} .property-overview ul li span{ font-weight:600;} .property-overview li strong.emphasize {color: #666;font-weight: 600;} .property-overview li strong{ float:right;} .property-overview li:nth-child(2n) { float: right; clear: right;}

【问题讨论】：

您能提供自定义字段 slugs 吗？
@Bhautik 订单“字段标签”字段名称“字段类型----------------1”指导价格“guide_price”文本2“属性类别”property_category “文本 3” 物业类型 “property_type” “文本 4” “卧室” “卧室” “文本 5” “浴室” “浴室” “ 文本 6” 房源状态 “listing_status” “文本 7” 位置 “位置” “文本 8” “城市” “城市” “文本 9” “县”县“文本 10”EPC 评级“epc_rating”文本
菲尔德集团ibb.co/sH4jvLv图片

标签： php css wordpress woocommerce advanced-custom-fields

【解决方案1】：

检查以下代码。您可以使用 ACF get_field() 获取数据。

add_action( 'woocommerce_after_single_product', 'property_overview_field', 3 );
function property_overview_field() { 
    ?>                  
    <div class="property-overview">
        <ul>
            <li>
                Guide Price
                <strong><?php echo get_field('guide_price'); ?></strong>
            </li>
            <li>
                Property Category
                <strong><?php echo get_field('property_category'); ?></strong>
            </li>
            <li>
                Property Type
                <strong><?php echo get_field('property_type'); ?></strong>
            </li>
            <li>
                Bedroom
                <strong><?php echo get_field('bedroom'); ?></strong>
            </li>
            <li>
                Bathroom
                <strong><?php echo get_field('bathroom'); ?></strong>
            </li>
            <li>
                Listing Status
                <strong><?php echo get_field('listing_status'); ?></strong>
            </li>
            <li>
                Location
                <strong><?php echo get_field('location'); ?></strong>
            </li>
            <li>
                City
                <strong><?php echo get_field('city'); ?></strong>
            </li>
            <li>
                County
                <strong><?php echo get_field('county'); ?></strong>
            </li>
            <li>
                EPC Rating
                <strong><?php echo get_field('epc_rating'); ?></strong>
            </li>
        </ul>
    </div>
    <?php 
}

【讨论】：