0

I am trying to show the price of the product in the single product view in the button. I tried this solution WooCommerce display price on add to cart button - but I have product-add-ons (with the plug-in from YITH).

The price is shown in the table above the button, so it is calculated. But how do I get it, I can't find it in the source code, to move it into the button (see picture).

I tried now several solutions, but sadly nothing works. Can anybody give me a hint in the right direction? Sorry, I am a beginner at this, but I'm trying.

enter image description here

webwurm
  • 75
  • 1
  • 7

1 Answers1

2

I used jquery to read the total amount value and then changed the button's 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>

The easiest way to insert this JS to your theme is to use Code Snippets plugin. There is an example JS snippet there. Just copy/paste the 2 line JS code here into that example snippet.

Make sure you inject this snippet into the footer section of your theme.

EDIT: Please try this code to get the latest price value on the page when it is changed.

var priceElement = $(".yith_wapo_group_final_total .price")
$(priceElement).change(function(){
  var myTotalPrice = priceElement.text()
  $("button.single_add_to_cart_button").text(myTotalPrice)
});
Ozgur Sar
  • 2,067
  • 2
  • 11
  • 23
  • Thanks, I will check it and let you know! – webwurm Nov 19 '20 at 22:24
  • So, I tried it now. I put the following code on the very bottom of the page: `jQuery(document).ready(function($) { // when opening the page var myTotalPrice = $(".yith_wapo_group_final_total .price").text(); $("button.single_add_to_cart_button").text('In den Warenkorb: ' + myTotalPrice); // on change of the form $(".cart :input").change(function() { var myTotalPrice = $(".yith_wapo_group_final_total .price").text(); $("button.single_add_to_cart_button").text('In den Warenkorb: ' + myTotalPrice); }); });` It basically works, but always shows the value of 1 click before – webwurm Nov 20 '20 at 08:47
  • @webwurm Sorry for my late reply, I suggested an updated code that should take care of the price changes. Please see the edit in my answer – Ozgur Sar Nov 23 '20 at 08:08