1

I'm building a custom shop archives pages with Oxygen builder to create kind of quick order product list allowing customers to buy all products even thoses with variations without visiting the single product page.

I've found Replace the Variable Price range by the chosen variation price in WooCommerce 4+ well written working answer code. It does it's job on the single product page.

The problem is when used on the shop archives pages, once a variation is selected for a product it also updates the price of the others products on the list and they all display the same price. Before selecting any variations, everything is displayed properly.

Here is the codes used to add the AJAX function to the single product add to cart module. It works on my products archive page too.

/**
 * JS for AJAX Add to Cart handling
 */
function ace_product_page_ajax_add_to_cart_js() {
    ?><script type="text/javascript" charset="UTF-8">
        jQuery(function($) {

            $('form.cart').on('submit', function(e) {
                e.preventDefault();

                var form = $(this);
                form.block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } });

                var formData = new FormData(form[0]);
                formData.append('add-to-cart', form.find('[name=add-to-cart]').val() );

                // Ajax action.
                $.ajax({
                    url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'ace_add_to_cart' ),
                    data: formData,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    complete: function( response ) {
                        response = response.responseJSON;

                        if ( ! response ) {
                            return;
                        }

                        if ( response.error && response.product_url ) {
                            window.location = response.product_url;
                            return;
                        }

                        // Redirect to cart option
                        if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
                            window.location = wc_add_to_cart_params.cart_url;
                            return;
                        }

                        var $thisbutton = null; //
//                      var $thisbutton = null; // uncomment this if you don't want the 'View cart' button

                        // Trigger event so themes can refresh other areas.
                        $( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

                        // Remove existing notices
                        $( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();

                        // Add new notices
                        form.closest('.product').before(response.fragments.notices_html)

                        form.unblock();
                    }
                });
            });
        });
    </script><?php
}
add_action( 'wp_footer', 'ace_product_page_ajax_add_to_cart_js' );
/**
 * Add to cart handler.
 */
function ace_ajax_add_to_cart_handler() {
    WC_Form_Handler::add_to_cart_action();
    WC_AJAX::get_refreshed_fragments();
}
add_action( 'wc_ajax_ace_add_to_cart', 'ace_ajax_add_to_cart_handler' );
add_action( 'wc_ajax_nopriv_ace_add_to_cart', 'ace_ajax_add_to_cart_handler' );

// Remove WC Core add to cart handler to prevent double-add
remove_action( 'wp_loaded', array( 'WC_Form_Handler', 'add_to_cart_action' ), 20 );

This last code are not required. It just display the cart notices.

/**
 * Add fragments for notices.
 */
function ace_ajax_add_to_cart_add_fragments( $fragments ) {
    $all_notices  = WC()->session->get( 'wc_notices', array() );
    $notice_types = apply_filters( 'woocommerce_notice_types', array( 'error', 'success', 'notice' ) );

    ob_start();
    foreach ( $notice_types as $notice_type ) {
        if ( wc_notice_count( $notice_type ) > 0 ) {
            wc_get_template( "notices/{$notice_type}.php", array(
                'notices' => array_filter( $all_notices[ $notice_type ] ),
            ) );
        }
    }
    $fragments['notices_html'] = ob_get_clean();

    wc_clear_notices();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'ace_ajax_add_to_cart_add_fragments' );

Is there is a way, using the code that you can find on the link above, to only change the price of the product targeted by the variation on the shop archives page?

enter image description here

Evan esco
  • 35
  • 7
  • I've tried it however it's still the same result. It works like a charm on the single product page. But in the product archives all the others products get the same price. I don't know if the problem can be something related to the elements I use? I've had a look to your answer at this question: https://stackoverflow.com/questions/55932785/how-can-i-get-min-and-max-price-of-a-woocommerce-variable-product-in-custom-loop I haven't been able to figure if it can help to get the code working? – Evan esco Mar 13 '21 at 20:41
  • I'd like to be able to explain correctly the exact thing I did on the shop archives but it's kinda complicated. I'm not using the shortcode [products] to show the product list. Oxygen builder provide some woocommerce elements like the cart button (the one used on single product page). Using the module repeater on Oxygen I can add wathever I want on archive page.The cart button is fully working when I add an item to the cart it take in consideration quantity and variations without refreshing page. I'd like to send you a screenshot and you'll see immediatly how I built the page, it's uncommon – Evan esco Mar 13 '21 at 22:28
  • **So this is not testable then**… I reopen the thread, but I don't think that someone is going to be able to help you. – LoicTheAztec Mar 13 '21 at 22:49
  • 1
    Thanks for your answer. I've added the screenshots like this it will be easyer to figure how the page are built. Maybe that's something impossible to make it working without having access to admin panel of the website. BTW i've tried a code to show the prices in the variations input and it does works. – Evan esco Mar 13 '21 at 23:20

0 Answers0