How to change the layout of the product price in a cycle in Woocommerce?

Question

WordPress

How to change it

<span class="price">
  <del>
    <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.00</span>
  </del>
  <ins>
    <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2.00</span>
  </ins>
</span>

on this

<div class="product_price">£3.00<span>£2.00</span></div>

Answer 1

In general, you should not do this, but if you really really want to add it to functions.php or the Code Snippets plugin

add_filter( 'woocommerce_get_price_html', 'override_default_price_html', 100, 2 );
function dw_change_default_price_html( $price,$product ){
    if ( $product->price > 0 ) {
      if ( $product->price && isset( $product->regular_price ) ) {
        $from = $product->regular_price;
        $to = $product->price;
        return ( ( is_numeric( $to ) ) ? woocommerce_price( $to ) : $to ) .'<span>'. ( ( is_numeric( $from ) ) ? woocommerce_price( $from ) : $from ) .' </span>';
      } else {
        $to = $product->price;
        return '<span>' . ( ( is_numeric( $to ) ) ? woocommerce_price( $to ) : $to ) . '</span>';
      }
   } else {
     return __( 'Free!', 'woocommerce' );
   }
}

In a child theme in the file templates/loop/price.php
Change

<span class="price"><?php echo $price_html; ?></span>

on the

<span class="product_price"><?php echo $price_html; ?></span>