Heim  >  Artikel  >  Backend-Entwicklung  >  Wie ersetze ich die Preisspanne durch den gewählten Variationspreis in WooCommerce 3?

Wie ersetze ich die Preisspanne durch den gewählten Variationspreis in WooCommerce 3?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-23 21:45:13262Durchsuche

How to Replace the Price Range with Chosen Variation Price in WooCommerce 3?

Ersetzen Sie den variablen Preisbereich durch den gewählten Variationspreis in WooCommerce 3

Problem:

Bei WooCommerce 3 enthält das variable Produktseitenlayout eine unansehnliche Preisspanne unter dem Produkttitel. Dies kann verwirrend und nicht aussagekräftig sein, insbesondere wenn es nach der Auswahl einer Variante unverändert bleibt.

Lösung:

Die Preisspanne durch den gewählten Variationspreis ersetzen und sicherstellen wird entsprechend aktualisiert:

  1. Unerwünschtes entfernen Preis:

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
  2. Geben Sie den variablen Preis ohne Bereich ein und zeigen Sie den niedrigsten Preis an:

    add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
  3. Kopieren Sie den variablen Preis in einen Hidden Behälter:

    echo '<div class="hidden-variable-price">' . $price . '</div>';
  4. Preis und Verfügbarkeit der ausgewählten Variation ausblenden:

    div.woocommerce-variation-price,
    div.woocommerce-variation-availability {
        height: 0px !important;
        overflow: hidden;
        line-height: 0px !important;
        font-size: 0% !important;
    }
  5. Verwenden Sie jQuery zum Aktualisieren Preis:

    $('select').blur(function() {
        if ($('input.variation_id').val()) {
            $('p.availability').remove();
            $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">' + $('div.woocommerce-variation-availability').html() + '</p>');
        } else {
            $('p.price').html($('div.hidden-variable-price').html());
            if ($('p.availability')) {
                $('p.availability').remove();
            }
        }
    });

Zusätzliche Hinweise:

  • Diese Lösung ist getestet und kompatibel mit WooCommerce 3.2.x und frühere Versionen.
  • Sie können den CSS-Code optional in die Datei „styles.css“ Ihres Themes verschieben Datei.
  • Einige Plugins oder Themes sind möglicherweise nicht mit diesem Code kompatibel.

Das obige ist der detaillierte Inhalt vonWie ersetze ich die Preisspanne durch den gewählten Variationspreis in WooCommerce 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn