Display WooCommerce variation price as main price in Oxygen Builder

2 min read / Custom Code, Oxygen Builder, Plugins, WooCommerce, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: To display the variation price as the main price within Oxygen Builder and WooCommerce, you need the JS snippet.

If you use the Oxygen Builder, presenting the price of product variations as the main price when user select the variation can enhance the user experience significantly. This short guide will give you a simple yet effective solution to achieve this using JavaScript and CSS.

The solution is created with JavaScript. Below is the snippet that updates the displayed price based on the selected product variation.

JavaScript Snippet for Dynamic Price Update

This snippet ensures that when a customer selects a product variation, the price displayed on the page reflects the price of that specific variation. If no variation is selected, the original price is shown.

Use this code in your Oxygen template in code block or in code snippets plugin or your custom plugin. I suggest to use it only in templates where you need it.

(function ($) {
  $(document).ready(function () {
    var originePrice = $(".oxy-product-price .price").html();
    $(".variations_form").on("woocommerce_variation_has_changed", function () {
      if ($(".variations_form select").val() == "") {
        $(".oxy-product-price .price").html(originePrice);
      } else if (
        $(".woocommerce-variation-price .woocommerce-Price-amount").length
      ) {
        var variationPrice = $(
          ".woocommerce-variation-price .woocommerce-Price-amount"
        ).html();
        $(".oxy-product-price .price").html(variationPrice);
      }
    });
  });
})(jQuery);

CSS for hiding the price

To avoid confusion you need to hide the default variation price display with the CSS below:

.woocommerce-variation-price .price {
display: none;
}

You are done :-). Feel free to support my work with comment or beer.

4 comments