问题

我使用代码段添加了一个预计交货日期小部件。我希望它可以显示不同产品的不同运输和交货日期。我是否可以在WooCommerce产品编辑器中添加自定义字段，以便我可以选择天数？

这是代码：

add_action('woocommerce_after_add_to_cart_form', 'delivery_status_widget', 40);
function delivery_status_widget() {
?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>
    .delivery-status-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 13px;
        margin-bottom: 10px;
        line-height: 15px;
        padding: 14px 10px;
        color: #121212;
        background-color: white;
        border: 1px dotted black;
        color: #121212;
        border-radius: 6px;
    }
    .delivery-status-widget .status {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
    }
    .delivery-status-widget .status-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #121212!important;
    }
    .delivery-status-widget .status-text {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .delivery-status-widget .status-date {
        font-size: 12px;
        color: gray;
    }
</style>

<div class="delivery-status-widget">
    <div class="status">
        <i class="fas fa-shopping-bag status-icon" style="color: gray;"></i>
        <div class="status-text">Ordered</div>
        <div class="status-date" id="order-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-shipping-fast status-icon" style="color: grey;"></i>
        <div class="status-text">Shipped</div>
        <div class="status-date" id="ship-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-box-open status-icon" style="color: grey;"></i>
        <div class="status-text">Delivered</div>
        <div class="status-date" id="delivery-date"></div>
    </div>
</div>

<script>
    jQuery(document).ready(function($) {
        var today = new Date();

        // Ordered
        var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("order-date").innerHTML = orderedDate;

        // Shipped
        var shipDate = new Date(today);
        shipDate.setDate(today.getDate() + 2); // Change 2 to the shipping days
        shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("ship-date").innerHTML = shipDate;

        // Delivered
        var deliveryDate = new Date(today);
        deliveryDate.setDate(today.getDate() + 6); // Change 6 to the delivery days
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("delivery-date").innerHTML = deliveryDate;
    });
</script>
<?php
}

我尝试了以下代码来添加自定义字段，它成功添加了字段：

function add_custom_fields() {
    woocommerce_wp_text_input(
        array(
            'id'          => '_shipping_days',
            'label'       => 'Shipping Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for shipping',
            'wrapper_class' => 'form-row form-row-first',
        )
    );

    woocommerce_wp_text_input(
        array(
            'id'          => '_delivery_days',
            'label'       => 'Delivery Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for delivery',
            'wrapper_class' => 'form-row form-row-last',
        )
    );
}
add_action('woocommerce_product_options_general_product_data', 'add_custom_fields');


function save_custom_fields( $post_id ) {
    $shipping_days = isset( $_POST['_shipping_days'] ) ? sanitize_text_field( $_POST['_shipping_days'] ) : '';
    $delivery_days = isset( $_POST['_delivery_days'] ) ? sanitize_text_field( $_POST['_delivery_days'] ) : '';

    update_post_meta( $post_id, '_shipping_days', $shipping_days );
    update_post_meta( $post_id, '_delivery_days', $delivery_days );
}
add_action('woocommerce_process_product_meta', 'save_custom_fields');

但是，我尝试的JavaScript代码未能正确显示运输和交货日期。这可能是由于JavaScript中的一个问题。你需要确保正确获取并设置'_shipping_days'和'_delivery_days'的值。检查JavaScript控制台是否有错误消息，并确保这些值在JavaScript中正确使用。

英文:

I added a Estimated delivery date widget using a code snippet. I want it to show the diffrent shipping and delivery date for different product. Can I add a custom field on woocommerce product editor,so I can choose number of days?

Here is the Code :

add_action( &#39;woocommerce_after_add_to_cart_form&#39;, 
&#39;delivery_status_widget&#39;, 40 );
function delivery_status_widget() {
?&gt;
&lt;link rel=&quot;stylesheet&quot; 
href=&quot;https://use.fontawesome.com/releases/v5.14.0/css/all.css&quot;&gt;
&lt;style&gt;
.delivery-status-widget {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
font-size: 13px; 
margin-bottom: 10px;
line-height: 15px;
padding: 14px 10px;
color: #121212;
background-color: white;
border: 1px dotted black;
color: #121212;
border-radius: 6px;
}
.delivery-status-widget .status {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 15px;
}
.delivery-status-widget .status-icon {
font-size: 24px;
margin-bottom: 5px;
color: #121212!important;
}
.delivery-status-widget .status-text {
font-weight: bold;
margin-bottom: 5px;
}
.delivery-status-widget .status-date {
font-size: 12px;
color: gray;
}
&lt;/style&gt;
&lt;div class=&quot;delivery-status-widget&quot;&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-shopping-bag status-icon&quot; style=&quot;color: 
gray;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Ordered&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;order-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-shipping-fast status-icon&quot; style=&quot;color: 
grey;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Shipped&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;ship-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-box-open status-icon&quot; style=&quot;color: 
grey;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Delivered&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;delivery-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
jQuery(document).ready(function($) {
var today = new Date();
// Ordered
var orderedDate = today.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;order-date&quot;).innerHTML = orderedDate;
// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + 2);
shipDate = shipDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;ship-date&quot;).innerHTML = shipDate;
// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + 6);
deliveryDate = deliveryDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;delivery-date&quot;).innerHTML = deliveryDate;
});
&lt;/script&gt;
&lt;?php
}

I tried this code to add custom fields and it added the fields :

function add_custom_fields() {
woocommerce_wp_text_input(
array(
&#39;id&#39;          =&gt; &#39;_shipping_days&#39;,
&#39;label&#39;       =&gt; &#39;Shipping Days&#39;,
&#39;desc_tip&#39;    =&gt; true,
&#39;description&#39; =&gt; &#39;Enter the number of days required for 
shipping&#39;,
&#39;wrapper_class&#39; =&gt; &#39;form-row form-row-first&#39;,
)
);
woocommerce_wp_text_input(
array(
&#39;id&#39;          =&gt; &#39;_delivery_days&#39;,
&#39;label&#39;       =&gt; &#39;Delivery Days&#39;,
&#39;desc_tip&#39;    =&gt; true,
&#39;description&#39; =&gt; &#39;Enter the number of days required for 
delivery&#39;,
&#39;wrapper_class&#39; =&gt; &#39;form-row form-row-last&#39;,
)
);
}
add_action( &#39;woocommerce_product_options_general_product_data&#39;, 
&#39;add_custom_fields&#39; );
function save_custom_fields( $post_id ) {
$shipping_days = isset( $_POST[&#39;_shipping_days&#39;] ) ? 
sanitize_text_field( $_POST[&#39;_shipping_days&#39;] ) : &#39;&#39;;
$delivery_days = isset( $_POST[&#39;_delivery_days&#39;] ) ? 
sanitize_text_field( $_POST[&#39;_delivery_days&#39;] ) : &#39;&#39;;
update_post_meta( $post_id, &#39;_shipping_days&#39;, $shipping_days );
update_post_meta( $post_id, &#39;_delivery_days&#39;, $delivery_days );
}
add_action( &#39;woocommerce_process_product_meta&#39;, &#39;save_custom_fields&#39; );

And Tried this javascript for the above custom fields(but it didn't show the shipping and delivery date at all, it was empty):

jQuery(document).ready(function($) {
var today = new Date();
// Ordered
var orderedDate = today.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;order-date&quot;).innerHTML = orderedDate;
// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value(&#39;_shipping_days&#39;)));
shipDate = shipDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;ship-date&quot;).innerHTML = shipDate;
// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value(&#39;_delivery_days&#39;)));
deliveryDate = deliveryDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
document.getElementById(&quot;delivery-date&quot;).innerHTML = deliveryDate;
});

答案1

得分: 2

I have revisited all your code and removed the unnecessary last function. In the first function you will get now both product shipping custom fields values, to autopopulate dynamically your shipping widget:

add_action( 'woocommerce_after_add_to_cart_form', 'delivery_status_widget', 40 );
function delivery_status_widget() {
    global $product;
    ?>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    <style>
    .delivery-status-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 13px; 
        margin-bottom: 10px;
        line-height: 15px;
        padding: 14px 10px;
        color: #121212;
        background-color: white;
        border: 1px dotted black;
        color: #121212;
        border-radius: 6px;
    }
    .delivery-status-widget .status {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
    }
    .delivery-status-widget .status-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #121212!important;
    }
    .delivery-status-widget .status-text {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .delivery-status-widget .status-date {
        font-size: 12px;
        color: gray;
    }
    </style>
    <div class="delivery-status-widget">
        <div class="status">
            <i class="fas fa-shopping-bag status-icon" style="color: gray;"></i>
            <div class="status-text">Ordered</div>
            <div class="status-date" id="order-date"></div>
        </div>
        <div class="status">
            <i class="fas fa-angle-double-right"></i>
        </div>
        <div class="status">
            <i class="fas fa-shipping-fast status-icon" style="color: grey;"></i>
            <div class="status-text">Shipped</div>
            <div class="status-date" id="ship-date"></div>
        </div>
        <div class="status">
            <i class="fas fa-angle-double-right"></i>
        </div>
        <div class="status">
            <i class="fas fa-box-open status-icon" style="color: grey;"></i>
            <div class="status-text">Delivered</div>
            <div class="status-date" id="delivery-date"></div>
        </div>
    </div>
    <?php
        // Get the product "shipping" custom fields values
        $shipval = $product->get_meta('_shipping_days');
        $delival = $product->get_meta('_delivery_days'); 
    ?>
    <script>
    jQuery(document).ready(function($) {
        var today       = new Date(),
            shipVal     = <?php echo $shipval ? intval( $shipval ) : 2; ?>, // (Default value is "2")
            deliVal     = <?php echo $delival ? intval( $delival ) : 6; ?>; // (Default value is "6")

        // Ordered
        var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#order-date").text(orderedDate);

        // Shipped
        var shipDate = new Date(today);
        shipDate.setDate(today.getDate() + shipVal);
        shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#ship-date").text(shipDate);

        // Delivered
        var deliveryDate = new Date(today);
        deliveryDate.setDate(today.getDate() + deliVal);
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#delivery-date").text(deliveryDate);
    });
    </script>
    <?php
}

add_action( 'woocommerce_product_options_general_product_data', 'add_shipping_custom_fields' );
function add_shipping_custom_fields() {
    
    echo '<div class="options_group product_shipping_custom_fields">';
    
    woocommerce_wp_text_input(
        array(
            'id'          => '_shipping_days',
            'label'       => 'Shipping Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for shipping',
        )
    );

    woocommerce_wp_text_input(
        array(
            'id'          => '_delivery_days',
            'label'       => 'Delivery Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for delivery',
        )
    );
    
    echo '</div>';
}

add_action( 'woocommerce_admin_process_product_object', 'save_shipping_custom_fields' );
function save_shipping_custom_fields( $product ) {
    if ( isset($_POST['_shipping_days']) ) {
        $product->update_meta_data( '_shipping_days', sanitize_text_field( $_POST['_shipping_days'] ) );
    }
    if ( isset($_POST['_delivery_days']) ) {
        $product->update_meta_data( '_delivery_days', sanitize_text_field( $_POST['_delivery_days'] ) );
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

英文:

I have revisited all your code and removed the unnecessary last function. In the first function you will get now both product sipping custom fields values, to autopopulate dynamically your shipping widget:

add_action( &#39;woocommerce_after_add_to_cart_form&#39;, &#39;delivery_status_widget&#39;, 40 );
function delivery_status_widget() {
global $product;
?&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/v5.14.0/css/all.css&quot;&gt;
&lt;style&gt;
.delivery-status-widget {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
font-size: 13px; 
margin-bottom: 10px;
line-height: 15px;
padding: 14px 10px;
color: #121212;
background-color: white;
border: 1px dotted black;
color: #121212;
border-radius: 6px;
}
.delivery-status-widget .status {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 15px;
}
.delivery-status-widget .status-icon {
font-size: 24px;
margin-bottom: 5px;
color: #121212!important;
}
.delivery-status-widget .status-text {
font-weight: bold;
margin-bottom: 5px;
}
.delivery-status-widget .status-date {
font-size: 12px;
color: gray;
}
&lt;/style&gt;
&lt;div class=&quot;delivery-status-widget&quot;&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-shopping-bag status-icon&quot; style=&quot;color: 
gray;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Ordered&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;order-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-shipping-fast status-icon&quot; style=&quot;color: 
grey;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Shipped&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;ship-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;status&quot;&gt;
&lt;i class=&quot;fas fa-box-open status-icon&quot; style=&quot;color: 
grey;&quot;&gt;&lt;/i&gt;
&lt;div class=&quot;status-text&quot;&gt;Delivered&lt;/div&gt;
&lt;div class=&quot;status-date&quot; id=&quot;delivery-date&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;?php
// Get the product &quot;shipping&quot;&quot;custom fields values&quot;
$shipval = $product-&gt;get_meta(&#39;_shipping_days&#39;);
$delival = $product-&gt;get_meta(&#39;_delivery_days&#39;); 
?&gt;
&lt;script&gt;
jQuery(document).ready(function($) {
var today       = new Date(),
shipVal     = &lt;?php echo $shipval ? intval( $shipval ) : 2; ?&gt;, // (Default value is &quot;2&quot;)
deliVal     = &lt;?php echo $delival ? intval( $delival ) : 6; ?&gt;; // (Default value is &quot;6&quot;)
// Ordered
var orderedDate = today.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
$(&quot;#order-date&quot;).text(orderedDate);
// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + shipVal);
shipDate = shipDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
$(&quot;#ship-date&quot;).text(shipDate);
// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + deliVal);
deliveryDate = deliveryDate.toLocaleDateString(&quot;en-US&quot;, { month: &#39;short&#39;, day: &#39;numeric&#39; });
$(&quot;#delivery-date&quot;).text(deliveryDate);
});
&lt;/script&gt;
&lt;?php
}
add_action( &#39;woocommerce_product_options_general_product_data&#39;, &#39;add_shipping_custom_fields&#39; );
function add_shipping_custom_fields() {
echo &#39;&lt;div class=&quot;options_group product_shipping_custom_fields&quot;&gt;&#39;;
woocommerce_wp_text_input(
array(
&#39;id&#39;          =&gt; &#39;_shipping_days&#39;,
&#39;label&#39;       =&gt; &#39;Shipping Days&#39;,
&#39;desc_tip&#39;    =&gt; true,
&#39;description&#39; =&gt; &#39;Enter the number of days required for shipping&#39;,
)
);
woocommerce_wp_text_input(
array(
&#39;id&#39;          =&gt; &#39;_delivery_days&#39;,
&#39;label&#39;       =&gt; &#39;Delivery Days&#39;,
&#39;desc_tip&#39;    =&gt; true,
&#39;description&#39; =&gt; &#39;Enter the number of days required for delivery&#39;,
)
);
echo &#39;&lt;/div&gt;&#39;;
}
add_action( &#39;woocommerce_admin_process_product_object&#39;, &#39;save_shipping_custom_fields&#39; );
function save_shipping_custom_fields( $product ) {
if ( isset($_POST[&#39;_shipping_days&#39;]) ) {
$product-&gt;update_meta_data( &#39;_shipping_days&#39;, sanitize_text_field( $_POST[&#39;_shipping_days&#39;] ) );
}
if ( isset($_POST[&#39;_delivery_days&#39;]) ) {
$product-&gt;update_meta_data( &#39;_delivery_days&#39;, sanitize_text_field( $_POST[&#39;_delivery_days&#39;] ) );
}
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

动态预计交货日期小部件在WooCommerce产品中

问题

答案1

do while循环PHP具有多个条件

php get value of array by unknown index in one statement

Uncaught RangeError: Duration field days not supported by Temporal.Instant (adding 1 day to a temporal instant without using magic numbers)

如何在Next.js中重新加载未加载的图像。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论