首页 文章

如何在WooCommerce中从自定义字段调用值时使用jQuery删除类

提问于
浏览 次
0

我正在为用户构建自定义字段，以允许在WooCommerce支持的站点中使用自定义销售徽章 . 创建该字段，并且还在商店存档页面上回显该值，显示用户输入销售标记值 . 但是有一个问题 . 默认销售徽章也会显示 . 我怎么能删除这个？

enter image description here

这就是我如何回应 Value

add_action('woocommerce_before_shop_loop_item', 'ac_wc_show_custom_fields', 20); 

    function ac_wc_show_custom_fields(){
        global $post;
        if (get_post_meta( $post->ID, 'ac_custom_badge', true )!==''){
            echo '<div class="ac-loop-cus-badge">' .get_post_meta( $post->ID, 'ac_custom_badge', true ) . '</div>';

        }
    }

我然后尝试了这个's working but it' s将属性 display:none 添加到站点中的所有 .onsale 类

function ac_wc_show_custom_fields(){
            global $post;
            if (get_post_meta( $post->ID, 'ac_custom_badge', true )!==''){
                echo '<div class="ac-loop-cus-badge">' .get_post_meta( $post->ID, 'ac_custom_badge', true ) . '</div>';
echo '<style>.onsale{display:none;}</style>';

            }
        }

我只想在检索销售徽章的自定义字段时应用css或任何其他jQuery方法来删除 .onsale span / class . 希望我有道理 .

谢谢

Addendum

我还尝试使用此功能覆盖销售模板

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_woocommerce_show_product_loop_sale_flash', 10 );

function custom_woocommerce_show_product_loop_sale_flash() {
     global $post;

     if (get_post_meta($post->ID, 'ac_custom_badge', true)) {
          wc_get_template( 'files/sale-flash.php' );

     }
}

但我最终有两个销售市场 . 请看图片

enter image description here

php css woocommerce custom-fields

1 回答

  • 0

    要在JavaScript（w / jQuery）中执行此操作，如果您在页面底部运行此操作，我认为您将获得所需的内容 .

    <script type="text/javascript">
    $(".ac-loop-cus-badge").removeClass("onsale");
</script>

    有关如何工作的文档可以在removeClass找到 .

    如果您只需要将其应用于一个页面或容器div，则可以在商店归档页面中添加一个类 . 这将阻止它删除其他页面或div的 onsale 类 .

    <div class="shop-archive-page"> 
    <!-- page contents do here-->
    <img class="ac-loop-cus-badge"></img>
    <!-- more page contents do here-->
</div>
<script type="text/javascript">
    $(".shop-archive-page .ac-loop-cus-badge").removeClass("onsale");
</script>

    UPDATE 对于使用 :contains 的示例，其中产品A位于其产品图像下方的DOM中，您可以使用以下内容 .

    $(".image-container span:contains('Product A')").parent().find(".ac-loop-cus-badge").removeClass("onsale");

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
  <i class="ac-loop-cus-badge onsale">IMAGE WOULD BE HERE</i>
  
    
  <span class="product-description">This is Product A, it's on sale right now!</span>
</div>
    回复于

相关问题