Return to previous page

How to Replace Variable Price Range Display with Active Variation Price?

This topic has 4 replies, 3 voices, and was last updated 2 months, 3 weeks ago ago by Andrew Mitchell

Sai Ananth

Participant

November 24, 2024 at 20:13

I recently moved away from minimog because of features with XStore theme. However I found the couple of issues with pricing.

1. I want to change the way pricing looks in front end. Is there any script to acheive this?

Display only the minimum price initially
Update the price when a variation is selected
Reset to the original min price when variations are cleared

2. Elementor Add to cart widget also shows pricing. But it is showing below the variations. Ideally it should be above variations. How to not show this price at all, since I have price below title

3. There’s lot of space between variation swatches and add to card button. Where to fix this.

These are only three issues. Other than that, theme functioning is very good.

passing necessary accesses in private content area

Image showing 2 different pricing sections

#424974 Copied Theme version: 9.4.5

3 Answers

Luca Rossi

Support staff

November 25, 2024 at 13:19

Hi @Sai Ananth,

1. Please add the following code under functions.php file locates in your child theme:


add_action('wp_footer', '_n2t_wp_footer');
function _n2t_wp_footer(){
    if(is_singular('product')){
        ?>
        <script>
            // Custom script to handle pricing display
            jQuery(document).ready(function($) {
                var originalPrice = $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(); // Store the original price

                // Update price when a variation is selected
                $('form.variations_form').on('woocommerce_variation_has_changed', function() {
                    var selectedPrice = $('.woocommerce-variation-price .price').html();
                    if (selectedPrice) {
                        $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(selectedPrice);
                    }
                });

                // Reset price when variations are cleared
                $('form.variations_form').on('reset_data', function() {
                    $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(originalPrice);
                });
            });
        </script>
        <?php
    }
}

2. Then add the following custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:


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

.single-product table.variations {
    margin-bottom: 0;
}

Hope it helps!

#425106 Copied

Sai Ananth

Participant

November 29, 2024 at 21:05

Thank you. that worked like a charm. I’ve slightly modified code show price (if any variation is set as default)


/ Combine price display functionality for variable products
function optimize_variable_product_price_display() {
    // Handle price display in footer for single product pages
    add_action('wp_footer', function() {
        if (!is_singular('product')) return;
        ?>
        <script>
        jQuery(document).ready(function($) {
            const priceElement = $('.single-product .elementor-widget-woocommerce-product-etheme_price .price');
            const originalPrice = priceElement.html();

            $('form.variations_form')
                .on('woocommerce_variation_has_changed', function() {
                    const selectedPrice = $('.woocommerce-variation-price .price').html();
                    if (selectedPrice) {
                        priceElement.html(selectedPrice);
                    }
                })
                .on('reset_data', function() {
                    priceElement.html(originalPrice);
                });
        });
        </script>
        <?php
    });

    // Handle default price display for variable products
    $price_filters = ['woocommerce_variable_sale_price_html', 'woocommerce_variable_price_html'];
    foreach ($price_filters as $filter) {
        add_filter($filter, function($price, $product) {
            $prices = $product->get_variation_prices();
            $min_regular_price = min($prices['regular_price']);
            $min_sale_price = min($prices['price']);

            return ($min_sale_price < $min_regular_price) 
                ? sprintf(
                    '<del style="color: #000; font-size: 20px; font-weight: 500;">%s</del> <span style="color: #dd3333; font-size: 24px; font-weight: 700;">%s</span>',
                    wc_price($min_regular_price),
                    wc_price($min_sale_price)
                )
                : wc_price($min_regular_price);
        }, 10, 2);
    }
}

// Initialize the optimized price display
add_action('init', 'optimize_variable_product_price_display');

You can close this ticket as solved 😊

#425950 Copied

Andrew Mitchell

Support staff

November 30, 2024 at 18:47

Dear Sai Ananth,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#425997 Copied

Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘How to Replace Variable Price Range Display with Active Variation Price?’' has been successfully resolved, and the topic is now closed for further responses

How to Replace Variable Price Range Display with Active Variation Price?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection