WooCommerce: Change order display of labels and buttons (That come from different plugins)

Question

I have a Rewards Program plugin in my Wordpress website (Gratisfaction), which displays a label below the "Add to Cart" button to display how many points are needed to purchase the item.

Now, I am displaying a "Buy Now" Button with a plugin called Quick Buy Now Button for WooCommerce. But it is displayed below that label.

Image of how it looks right now

I would like to put it above the text label, but I don't know how. I used the Inspect Element to show how I want it to look and to find the class names for each.

Image of desired display

These are the details that appear for the Text label:

‹div id="gr_product_points_buy_lable" class="grPointsPay"›./div>

And these are the details that appear for the Buy Now (Compra Ahora) button:

`<button type="submit" name="wc-quick-buy-now" value="618" class="wc-buy-now-btn wc-buy-now-btn-single single add to cart button button alt">Compra ahora</button> =`

I'm very new to coding, by the way. I tried using this CSS reorder instructions from another Question, but it doesn't work and I guess it's because the button doesn't say <div>...

Please help! Is there a way to do this with css or what do I need to change de php file?

Here's the html for that section. As you can see, the grPointsPay (points label) is above the button (Buy Now/Comprar Ahora)

<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
    <script>
                        
    var  woocommerce_custom_var_options_params = {
        
        currency_symbol     : "&#36;",
        op_show             : "Options Total",
        ft_show             : "Final Total",
        show_op             : "0",
        show_ft             : "0",
        num_decimals        : "2",
        decimal_separator   : ",",
        thousand_separator  : "."
    }
        
</script><div id="product-options-var-total" product-type="variable" product-price="15"></div>
    <div class="quantity">
        <label class="screen-reader-text" for="quantity_641d93a926dff">Crystal Deluxe quantity</label>
    <input type="number" id="quantity_641d93a926dff" class="input-text qty text" name="quantity" value="1" title="Qty" size="4" min="1" max="" step="1" placeholder="" inputmode="numeric" autocomplete="off">
    </div>

    <button type="submit" class="single_add_to_cart_button button alt wp-element-button">Añadir al carrito</button>

    <style>.grPointsPay{clear:both;color:#582b0c} span.gr_restriction_apply_message{color: #333;text-decoration:none!important;position:absolute;right:0;top:100%;width:300px;background:#fff;padding:20px;box-shadow:0 10px 20px rgb(0 0 0 / 10%);font-size:14px;margin-top:8px;border:1px solid #f5f5f5;z-index: 1040;border-radius:4px} span.gr_restriction_apply_message:before{content:"";display:inline-block;position:absolute;right:23px;top:-7px;background:#fff;width:14px;height:14px;transform:rotate(45deg);border:1px solid #f5f5f5;border-bottom:0;border-right:0} span.gr_restriction_apply_close {cursor:pointer;position: absolute;right: 6px;top: 6px;font-family: serif;} @media only screen and (max-width:600px){span.gr_restriction_apply_message{position:relative;display:block;width:auto;padding:10px 15px;margin:5px 0;box-shadow:1px 2px 3px rgba(0,0,0,.1);font-size:13px}span.gr_restriction_apply_message:before{display:none}}</style><div id="gr_product_points_buy_lable" class="grPointsPay"><small>Utiliza <strong>1500</strong> puntos para comprar este producto. Se aplican restricciones</small></div>
    <button type="submit" name="wc-quick-buy-now" value="840" class="wc-buy-now-btn wc-buy-now-btn-single single_add_to_cart_button button alt">Comprar ahora</button><input type="hidden" name="add-to-cart" value="840">
    <input type="hidden" name="product_id" value="840">
    <input type="hidden" name="variation_id" class="variation_id" value="841">
</div>

Answer 1

Not tested but here what you have to do.

In each plugin they use hooks to output on specific location. In our case both plugins are using woocommerce_after_add_to_cart_button hook. So what we need is to set priority to reorder them. All of the examples bellow should be added into your functions.php file of active theme. Fot the points plugin the hook is

add_action('woocommerce_after_add_to_cart_button', array(&$this, 'gr_show_single_product_buy_lable'));

So we need to unhook and rehook like this

remove_action('woocommerce_after_add_to_cart_button', array(WC_Integration::instance(),'gr_show_single_product_buy_lable'));
add_action('woocommerce_after_add_to_cart_button', array(WC_Integration::instance(),'gr_show_single_product_buy_lable'),20); 

Here we set 20 priority which we can use to swap places.

For the other plugin the hook is:

add_action( 'woocommerce_after_add_to_cart_button', array( $this, 'buy_now_button_single' ) );

Again unhook rehook

remove_action( 'woocommerce_after_add_to_cart_button', array( Woo_Buy_Now_Button_Frontend::instance(), 'buy_now_button_single' ) );
add_action( 'woocommerce_after_add_to_cart_button', array( Woo_Buy_Now_Button_Frontend::instance(),'buy_now_button_single'),10);

Here we set priority 10 which should go above the points label. Again this is not tested and may need try and error. Or contact the author plugins to give you proper solution if this doesnt help.

As last resort you can go with css and reorder elements - https://developer.mozilla.org/en-US/docs/Web/CSS/order