在单个产品视图的“添加到购物车”按钮中显示包括附加组件的价格

Question

我试图在按钮的单个产品视图中显示产品的价格。我尝试了这个解决方案WooCommerce display price on add to cart button - 但我有产品附加组件（使用 YITH 的插件）。

价格显示在按钮上方的表格中，因此是计算出来的。但是怎么弄啊，在源码里找不到，把它移到按钮里面（见图）。

我现在尝试了几种解决方案，但遗憾的是没有任何效果。任何人都可以给我一个正确方向的提示吗？抱歉，我是这方面的初学者，但我正在努力。

Answer 1

我使用jquery 读取total amount 值，然后更改按钮的text。

var myTotalPrice = $(".yith_wapo_group_final_total .price").text()
$("button.single_add_to_cart_button").text(myTotalPrice)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yith_wapo_group_total
        yith_wapo_keep_show" data-product-price="7.2" data-product-id="63">
        <table>
            <tbody><tr class="ywapo_tr_product_base_price">
                <td data-nosnippet="">Product price</td>
                <td data-nosnippet=""><div class="yith_wapo_group_product_price_total"><span class="price amount">€&nbsp;7,20</span></div></td>
            </tr>
            <tr class="ywapo_tr_additional_options">
                <td data-nosnippet="">Add-Ons Total:</td>
                <td data-nosnippet=""><div class="yith_wapo_group_option_total"><span class="price amount">€&nbsp;2,40</span></div></td>
            </tr>
            <tr class="ywapo_tr_order_totals">
                <td data-nosnippet="">Gesamtsumme:</td>
                <td data-nosnippet=""><div class="yith_wapo_group_final_total"><span class="price amount">€&nbsp;9,60</span></div></td>
            </tr>
        </tbody></table>
    </div>

<button type="submit" name="add-to-cart" value="63" class="single_add_to_cart_button button alt">In den Warenkorb</button>

将此 JS 插入主题的最简单方法是使用 Code Snippets 插件。那里有一个示例 JS sn-p。只需将此处的 2 行 JS 代码复制/粘贴到该示例 sn-p 中即可。

确保将此snippet 注入主题的footer 部分。

编辑：请尝试此代码以获取页面上更改时的最新价格值。

var priceElement = $(".yith_wapo_group_final_total .price")
$(priceElement).change(function(){
  var myTotalPrice = priceElement.text()
  $("button.single_add_to_cart_button").text(myTotalPrice)
});