php - Reemplace el rango de precio variable por el precio de variación elegido en WooCommerce 3

wordpress product

Question

En WooCommerce, me gustaría cambiar el diseño de página de un solo producto variable. Porque, cuando tienes un producto variable, obtienes esta rabia de precios por cable (debajo del título del producto) en la página de Producto Variable y también se muestra en la página de la tienda.

Para mí, la forma estándar es mostrar el precio más bajo del producto en la tienda, así como la página del producto y cambiar ese precio de acuerdo con la selección de variables del usuario. No puedo creer por qué.

Puedo eliminar el rango de precios y mostrar el precio más bajo con este fragmento de código.

https://businessbloomer.com/disable-variable-product-price-range-woocommerce/

Pero, de nuevo, ese precio más bajo no cambia según las variables seleccionadas. De nuevo hay dos precios en el diseño de producto variable. Este es mi diseño de página de producto variable actual

http://www.preorders.lk/product/beats-solo3-wireless-on-ear-headphones/

Entonces, ¿alguien puede ayudar a eliminar el rango de precios de la página de producto variable y mostrar solo un precio más bajo (debajo del título del producto) del producto por defecto. Por lo tanto, ese precio debe cambiar de acuerdo con las variables que tiene ese producto. Y ese precio más bajo también debe mostrarse en la página de la tienda.

Espero que esto esté claro. Avíseme si algo no está claro. Consulte la imagen adjunta para más detalles.

Gracias.

Answer 1

Nueva actualización mejorada en el siguiente hilo (junio de 2018) :

Reemplazar el rango de precios que maneja la variación predeterminada del precio mostrado en Woocommerce 3

Actualización (diciembre de 2017) : para evitar problemas relacionados con productos no variables en algunos temas y un error de disponibilidad de repetición en algunos temas

Nota: Algunos complementos como el mercado alemán o algunos temas no funcionarán con este código, ya que realizan sus propios cambios en los ganchos o en la estructura html.

Esto es completamente posible.

1. Primero eliminamos el precio no deseado.
   
2. En su lugar, mostramos el precio variable sin el rango de precios y mostramos el precio más bajo.
   
3. Hacemos una copia de este precio variable en un contenedor oculto (para ser utilizado / leído por nuestro script jQuery)
4. Luego ocultamos los contenedores del precio de variación elegido (y la disponibilidad de stock)
   
5. Con la ayuda de nuestro script jQuery , cuando obtenemos el precio de variación elegido, reemplazamos el precio variable (y mostramos la disponibilidad de stock).
6. Si el cliente cambia de variación, actualizamos el precio ... Si el precio de variación no se muestra durante ese proceso de cambio, se muestra nuestro precio variable

Aquí está ese código:

add_action( ''woocommerce_before_single_product'', ''move_variations_single_price'', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( ''variable'' ) ) {
        // removing the variations price for variable products
        remove_action( ''woocommerce_single_product_summary'', ''woocommerce_template_single_price'', 10 );

        // Change location and inserting back the variations price
        add_action( ''woocommerce_single_product_summary'', ''replace_variation_single_price'', 10 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( ''min'', true ), $product->get_variation_price( ''max'', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( ''From: %1$s'', ''woocommerce'' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( ''min'', true ), $product->get_variation_regular_price( ''max'', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( ''From: %1$s'', ''woocommerce'' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = ''<del>'' . $saleprice . $product->get_price_suffix() . ''</del> <ins>'' . $price . $product->get_price_suffix() . ''</ins>'';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $(''select'').blur( function(){
            if( '''' != $(''input.variation_id'').val() ){
                if($(''p.availability''))
                    $(''p.availability'').remove();
                $(''p.price'').html($(''div.woocommerce-variation-price > span.price'').html()).append(''<p class="availability">''+$(''div.woocommerce-variation-availability'').html()+''</p>'');
                console.log($(''input.variation_id'').val());
            } else {
                $(''p.price'').html($(''div.hidden-variable-price'').html());
                if($(''p.availability''))
                    $(''p.availability'').remove();
                console.log(''NULL'');
            }
        });
    });
    </script>
    <?php

    echo ''<p class="price">''.$price.''</p>
    <div class="hidden-variable-price" >''.$price.''</div>'';
}

El código va en cualquier archivo php de su tema secundario activo (o tema) o también en cualquier archivo php de complemento.

Este código se prueba y funciona en WooCommerce 3.2.x (también debería funcionar en WooCommerce 2.6.x)

Opcionalmente, puede mover el CSS ( <style></style> ) al archivo styles.css de su tema secundario activo (o tema activo) y luego eliminarlo de esta función ...

Relacionado:

• Mover la ubicación del precio de variación en WooCommerce

Answer 2

Soy consciente de que estoy resucitando un hilo viejo aquí, pero algo que descubrí al usar este código es que debes tener en cuenta que con este código, ya que corres el riesgo de evitar que se muestren precios únicos no variables en algunos temas como:

remove_action( ''woocommerce_single_product_summary'', ''woocommerce_template_single_price'', 10 );

se activa en todas las páginas de productos, independientemente de que sea un producto variable o no.

Puede usar la versión siguiente que simplemente comprueba si el producto actual es variable o no antes de ejecutar el resto del código.

    add_action( ''woocommerce_before_single_product'', ''check_if_variable_first'' );
function check_if_variable_first(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( ''variable'' ) ) {
            // removing the price of variable products
remove_action( ''woocommerce_single_product_summary'', ''woocommerce_template_single_price'', 10 );

// Change location of
add_action( ''woocommerce_single_product_summary'', ''custom_wc_template_single_price'', 10 );
function custom_wc_template_single_price(){
    global $product;

// Variable product only
if($product->is_type(''variable'')):

    // Main Price
    $prices = array( $product->get_variation_price( ''min'', true ), $product->get_variation_price( ''max'', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( ''From: %1$s'', ''woocommerce'' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( ''min'', true ), $product->get_variation_regular_price( ''max'', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( ''From: %1$s'', ''woocommerce'' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = ''<del>'' . $saleprice . $product->get_price_suffix() . ''</del> <ins>'' . $price . $product->get_price_suffix() . ''</ins>'';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $(''select'').blur( function(){
            if( '''' != $(''input.variation_id'').val() ){
                $(''p.price'').html($(''div.woocommerce-variation-price > span.price'').html()).append(''<p class="availability">''+$(''div.woocommerce-variation-availability'').html()+''</p>'');
                console.log($(''input.variation_id'').val());
            } else {
                $(''p.price'').html($(''div.hidden-variable-price'').html());
                if($(''p.availability''))
                    $(''p.availability'').remove();
                console.log(''NULL'');
            }
        });
    });
    </script>
    <?php

    echo ''<p class="price">''.$price.''</p>
    <div class="hidden-variable-price" >''.$price.''</div>'';

endif;
}

        }
    }
}