I'd really appreciate some help if anyone knows the solution :)
I set up Product page template in Elementor Pro for Woocommerce product.
I added a custom button there "Reserve now" (class .reserve-button) which opens a stripe payment form.
I'd like to hide this button if the product is out of stock.
I've tried a dozen of different solutions and searched through lot of fourms, but Im really stuck :(
Here is one of them:
add_action( 'woocommerce_before_add_to_cart_button', function() {
global $product;
if ( !$product->is_in_stock() ) {?>
<style>
.reserve-button {
display: none;}
</style> <?php
}
});
Thank you in advance!
It seems every conditions you made properly but one thing that you missed is you added with a wrong action, because the woocommerce_before_add_to_cart_button action only fire when the button is enable, as you are checking with out of stock product and in that product there is no add to cart button, so your action is not fired ever. What you can do to add any other action like my code
add_action( 'woocommerce_single_product_summary', function() {
global $product;
if ( !$product->is_in_stock() ) {?>
<style>
.reserve-button {
display: none;
}
</style> <?php
}
});
Here I have added the style with the product summary action. You can choose any other action but not add to cart related any actions. Hope it will work for you. https://prnt.sc/5fGq-RFcaEFn .
I have created a custom theme and I have moved woocommerce folder to my current custom theme but once i came to checkout page there is a div name woocommerce is still showing as main div. I want to hide or rename this div but I don't have any idea what action or filter hooks will be use for that.
I have also attached a image that showing woocommerce class name on check out page.
ALso I have used below hook for change main woocommerce class before checkout form but that will not remove or replace that woocommerce class.
function action_woocommerce_before_checkout_form( $checkout ) {
echo '<div class="checkout_section">';
};
// add the action
add_action( 'woocommerce_before_checkout_form', 'action_woocommerce_before_checkout_form', 10, 1 );
function action_woocommerce_after_checkout_form( $checkout ) {
echo '</div>';
};
// add the action
add_action( 'woocommerce_after_checkout_form', 'action_woocommerce_after_checkout_form', 10, 1 );
Can anyone tell me which hook should i use for remove or replace that div?
I've added a 'Customize Now' button and few dropdowns after the 'add to cart' button using woocommerce_after_add_to_cart_button.
But now when I try to hide the 'add to cart' button (which I have to for a specific scenario my website need) using woocommerce_is_purchasable, the 'Customize Now' button and dropdowns are also hidden. Is there any proper order/sequence to do this?
Filter to add the Customize button and dropdowns:
add_action('woocommerce_after_add_to_cart_button', array($this, 'pn_get_calc_and_customize_btn'));
Filter to remove the add to cart button:
add_filter('woocommerce_is_purchasable', array($this, 'pn_hide_add_to_cart_button'), 10, 2);
As add-to-cart templates display condition is:
if ( ! $product->is_purchasable() ) {
return;
}
2 ways:
1) Use instead woocommerce_single_product_summary hook with a priority between 30 and 40:
add_action('woocommerce_single_product_summary', array($this, 'pn_get_calc_and_customize_btn'), 35 );
Then your function output code should be embedded in a custom <form> and you will need to add some more code to save the data in cart or elsewhere…
2) To remove cart button, use woocommerce_product_is_in_stock filter hook instead of woocommerce_is_purchasable so you will have to change a bit your hooked function code too...
add_filter('woocommerce_product_is_in_stock', array($this, 'pn_hide_add_to_cart_button'), 10, 2);
I have two suggestions here:
The first one will be to try to add the priority to your add_action() as well. As per documentation, the lower the number, the earlier the execution. I would try to add a greater priority to add_action() and try to force the woocommerce_after_add_to_cart_button to be executed after your filter. However, I don't know if removing the button also inhibits the filter (it might be).
Another suggestion I may have is to override the default template for the page (i don't know if you're editing the shop page or the single_product page) and have some if{}else{} login in there to show hide buttons based on the situation.
I don't know if either of these solutions is any good for you but this was just my tough and how I would tackle it.
Hope it helps in any way
On the woocommerce checkout page I want to move the field where the apply coupon input is and place it just below the order summary and above the payment options. I'm not sure how to change the php because the checkout page is comprised of multiple php files therefore I come to you genius people to help. Anybody know how I can achieve this? Thank you in advance!
P.S. I've added pictures; the first is of the top half of the page and the second is of the second half of the page.
#noufalcep you answer is not clear.
Finally after everything i came up with a working solution. i am using woocommerce 3.2.5 and wordpress version of 4.8.3.
As #noufalcep said the form inside form is not the issue. When we do
add_action( ‘woocommerce_checkout_after_order_review’, ‘woocommerce_checkout_coupon_form’ );
coupon container doesn't wrap up with form element. But the button has submit as input type. That's why when we apply coupon main form get suibmitted.
Therefore what i did is inserted the coupon form with jquery insertAfter. Below is the code. It is perfectly working.
var coupon = $(".checkout_coupon");
coupon.insertAfter('.shop_table.woocommerce-checkout-review-order-table');
Then this will add the form after review order table. if you want it with "Have a coupon? Click here to enter your code" text, you have to wrap the element with the form.
A working example can be seen here,
https://themovementfix.com/checkout/
If you are comfortable editing your functions.php file inside your theme directory, then you can add the following lines of code:
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );
This will essentially remove the coupon (which is hooked before the checkout form) and re-add it AFTER the checkout form.
Alternatively, you can use Javascript to "cut&paste" the html block containing the coupon fields, but this is a messy way of coding and I would not suggest taking that route.
This worked great for me:
Add this jQuery:
(function($) {
$(document).ready(function() {
var coupon2 = $(".checkout_coupon.woocommerce-form-coupon");
coupon2.insertAfter('.shop_table.woocommerce-checkout-review-order-table');
})
})
(jQuery);
Add this css:
/*unhide copuon code checkout*/
.checkout_coupon {
display: block !important;
}
/*hide message have a coupon?*/
.woocommerce-info {
display:none;
}
/*coupon code checkout style*/
.checkout_coupon button.button{
background-color: #insert button color here;
}
This how I put the coupon form after the billing total. So it would be more helpful to use while customization.
Just place this code inside your functions.php and see the customization on the frontend.
/*
* Removing default "Coupon form" from the top of the checkout page
*/
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
/*
* Hooking "Coupon form" after order total in checkout page with custom function
*/
add_action( 'woocommerce_review_order_after_order_total', 'woocommerce_checkout_coupon_form_custom' );
/*
* Rendering html for "Coupon form" with custom function
*/
function woocommerce_checkout_coupon_form_custom() {
echo '<tr class="coupon-form"><td colspan="2">';
wc_get_template(
'checkout/form-coupon.php',
array(
'checkout' => WC()->checkout(),
)
);
echo '</td></tr>';
}
After reading about the form within a form issue that stops the usual add_actions from working, it inspired me to create a form-checkout.php file in my theme’s woocommerce folder, and simply move the order review's starting < form ... > code to right after the do_action( ‘woocommerce_checkout_before_customer_details’ ); line, then used these two lines to move the coupon form down to under the Your Order review display, and it worked great in v3.0.x of WooCommerce:
remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );
add_action( ‘woocommerce_checkout_after_order_review’, ‘woocommerce_checkout_coupon_form’ );
Without moving the starting form code, it wouldn’t work due to the form within a form issue mentioned, but once moved, works easily.
As of woocommerce 2.6 (or maybe even earlier) placing it "after order review" no longer works. If you apply a coupon it will place the order automatically. It's caused by the form within a form issue.
In Woocommerce 2.6, using hooks alone, only these 2 options currently work:
option 1:
add_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');
option 2:
add_action('woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form');
The problem is that the whole checkout page is inside a form, and the coupon is a form also. And you are unable to nest two forms. So even though you could technically move the coupon form above the review order section, it won't work properly. You need to rearrange your form and split them into two to make it work.
Move WooCommerce Coupon Field in Checkout Page
Using process: You can use the code using any plugin like (Code snippets) or function.PHP
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_after_cart_contents', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
echo '<tr class="coupon-form"><td colspan="2">';
wc_get_template(
'checkout/form-coupon.php',
array(
'checkout' => WC()->checkout(),
)
);
echo '</tr></td>';
}
A slight revision on a suggested answer:
remove_action('woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10);
add_action('woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form');
This places the coupon input below the order and above the payment options.
I've seen many tutorials dealing on how to customize woocommerce's checkout page by adding or removing fields.
But what I want is to place a link or button on the Woocommerce Checkout page saying "Return to Cart" (obviously linking to the cart page) but I want it placed just after the "Your Order" section, (the section where you review your order). I want it there because I want it along with a text saying something like "If you want to change your order return to Cart".
If I edit the actual checkout page and add the link there, it shows all the way to the bottom so maybe I have to add code to the theme's functions file? Any guidance will be greatly appreciated.
Thank you.
EDIT:
Ok, I've found a very crappy way of doing it.
I just added this line to the review-order.php file located in woocommerce/templates/checkout/ , right after the shop_table class:
<?php echo "<strong>If you'd like to change your order, go back to <a href='http://www.mysite.com/cart/'>My Cart</a></strong><br />"; ?>
This does the trick, but everytime I update woocommerce I will have to added it again.
Any suggestion of a more practical and intelligent way of doing it?
Create a child theme.
Put this in the child theme's functions.php
/**
* Add link back to cart after order review on Checkout
*/
add_action( 'woocommerce_review_order_before_payment', 'my_back_to_cart_link' );
function my_back_to_cart_link(){
//get the cart link
global $woocommerce;
$cartUrl = $woocommerce->cart->get_cart_url();
//the HTML markup to add
$backToCartLink="<p class='backtocart'><a class='button alt' href='".$cartUrl."'>".__('Edit Cart','wooint')."</a></p>";
echo $backToCartLink;
}
Well, if you created a child theme you could have put that line in your child's functions.php and then the only way an update would affect it is if they changed the coding.