如果可以免费送货，如何加载特定的 CSS？

Question

有没有办法根据免费送货有条件地将以下 CSS 类应用于小计？

.free-shipping-text {
content: "Hurray Free Shipping";
}

.nonfree-shipping-text {
content: "Get Free Shipping over ₹ 1000"
}

如果小计价格低于 1000 卢比，那么 nonfree-shipping-text CSS 应该调用，当大于 1000 卢比时，free-shipping-text CSS 应该调用。

global $woocommerce;
$shipping_methods = $woocommerce->shipping->load_shipping_methods();
if($shipping_methods['free_shipping']->enabled == "yes")
{
.free-shipping-text CSS should call
}        
else
.nonfree-shipping-text CSS should call

Answer 1

您可以在 html 中传递类。然后创建 2 个样式表 CSS 文件，您可以有条件地排队。

add_action( 'wp_enqueue_scripts', function(){
    global $woocommerce;
    $shipping_methods = $woocommerce->shipping->load_shipping_methods();
    if($shipping_methods['free_shipping']->enabled == "yes")
    {
        wp_enqueue_style( 'stylefreeshipping', get_stylesheet_directory_uri() . '/css/free-shipping.css' );
    }        
    else{
        wp_enqueue_style( 'styleNOfreeshipping', get_stylesheet_directory_uri() . '/css/no-free-shipping.css' );
    }
} );

但是，每次他们添加产品并超过 1000 个单位时，都应该重新加载页面。这是它与 PHP 一起工作的唯一方法。如果您在该过程中使用 AJAX，那么您最好使用 JavaScript。这将为用户提供更加动态的体验。

更多关于enqueue风格。

编辑 javascript 的答案：

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");   //add
  element.classList.remove("mystyle");  //remove
} 

To add a class.

To remove a class.

但是，这意味着您需要获取货币价值并向其添加事件侦听器。然后在每次事件更改时检查值是否大于 1000，以便添加所需的类并删除另一个类，反之亦然，当您从 1000 下降时。