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

Question

我对 PHP 不太满意，目前在尝试使用高级自定义字段重新创建如下所示的网格时确实遇到了麻烦 - 我的字段组图片 https://ibb.co/sH4jvLv

左边是标签，右边是标签的字段布局。

我正在尝试使用 Advanced Custom Feilds 来更好地 assemble WooCommerce 在选项卡后生成产品页面。 Post 类型已设置为产品并输入了值 - 但我终生无法理解如何显示标签和值，同时如果值为空则留空。

已添加到 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;}

Answer 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 
}

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

Display Custom fields with labels & values in WooCommerce prodcut page?

css

php

wordpress

woocommerce

advanced-custom-fields