I would like to change the layout of my WooCommerce checkout page, but I can't figure out how to do it since it seems to consist of multiple PHP pages.
What I'm trying to achieve is moving the summary part and shipping info to the top, and have the input fields for the shipping address shown afterwards.
Should I make these changes using CSS, or can I simply change the order of the hooks in the template?
Thanks!
In the "woocommerce/templates/checkout" folder there is a file called "form-checkout.php". Copy the contents of that file to "yourtheme/woocommerce/checkout/form-checkout.php" On line ~54 there is the following code:
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
Move that to just below
<form name="checkout" method="post" class="checkout" action="<?php echo esc_url( $get_checkout_url ); ?>">
and add:
<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>
to just below the
<?php endif; ?>
and save file the. That will bring the summary and shipping to above the input fields, but you will still have "Place Order" button at the top of the page. Copy the contents of the "review-order.php" to "yourtheme/woocommerce/checkout/review-order.php" and remove the following (from line ~169):
<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>
Removing the above will remove the "Place order" button at the top of the page.
You can edit the "form-check.php" file in "woocommerce/templates/checkout/form-checkout.php", but it is not recommended as when you update woocommerce you will lose those changes. Copying the file to "yourtheme/woocommerce/checkout/form-checkout.php" will override the file and you won't lose those changes if you update woocommerce.
Related
For my checkout page I would like to have more than 1 "place order" button. Is there a script that generates this button? I haven't been able to find it so far.
I only found one where you can change the text of the button. But I need one where I can just generate a new one within the checkout page.
The place order button is located in WooCommerce checkout/payment.php template file (line 51):
<?php echo apply_filters( 'woocommerce_order_button_html', '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>' ); ?>
Where $order_button_text = __("Place order", "woocommerce");
Now as this button is located inside the checkout <form> and if you duplicate it and you want it to work, it requires to be inside the checkout <form>.
So you can include it in any checkout template or using available hooks like for example:
add_action( 'woocommerce_checkout_after_order_review', 'second_place_order_button', 5 );
function second_place_order_button() {
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( "Place order", "woocommerce" ) );
echo '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>';
}
Code goes in function.php file of your active child theme (or active theme).
The hook that you will use need to be located inside the checkout <form>.
Have you tried to use this hook?
add_action( '(specify the hook you wish to place it)', 'woocommerce_template_single_add_to_cart', 30 );
for example:
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
I did not tested it, need to check if it does not produce errors because of multiple buttons on the single product page.
I need to alter the default Woocommerce checkout a little bit. I need to move the payment options ABOVE the order review table, while keeping the "Place Order" button at the bottom below the order review table. I currently have
remove_action('woocommerce_checkout_order_review','woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 5 );
This moves the payment box above the table, but it also moves the button. How can I keep the button at the bottom?
Here below, you will find the necessary code to reorder checkout order review section. This code will put the payment methods and gateways before the checkout review order table and will keep the "Place Order" button at the end.
The code:
add_action( 'woocommerce_checkout_order_review', 'reordering_checkout_order_review', 1 );
function reordering_checkout_order_review(){
remove_action('woocommerce_checkout_order_review','woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_checkout_order_review', 'custom_checkout_payment', 8 );
add_action( 'woocommerce_checkout_order_review', 'custom_checkout_place_order', 20 );
}
function custom_checkout_payment() {
$checkout = WC()->checkout();
if ( WC()->cart->needs_payment() ) {
$available_gateways = WC()->payment_gateways()->get_available_payment_gateways();
WC()->payment_gateways()->set_current_gateway( $available_gateways );
} else {
$available_gateways = array();
}
if ( ! is_ajax() ) {
// do_action( 'woocommerce_review_order_before_payment' );
}
?>
<div id="payment" class="woocommerce-checkout-payment-gateways">
<?php if ( WC()->cart->needs_payment() ) : ?>
<ul class="wc_payment_methods payment_methods methods">
<?php
if ( ! empty( $available_gateways ) ) {
foreach ( $available_gateways as $gateway ) {
wc_get_template( 'checkout/payment-method.php', array( 'gateway' => $gateway ) );
}
} else {
echo '<li class="woocommerce-notice woocommerce-notice--info woocommerce-info">';
echo apply_filters( 'woocommerce_no_available_payment_methods_message', WC()->customer->get_billing_country() ? esc_html__( 'Sorry, it seems that there are no available payment methods for your state. Please contact us if you require assistance or wish to make alternate arrangements.', 'woocommerce' ) : esc_html__( 'Please fill in your details above to see available payment methods.', 'woocommerce' ) ) . '</li>'; // #codingStandardsIgnoreLine
}
?>
</ul>
<?php endif; ?>
</div>
<?php
}
function custom_checkout_place_order() {
$checkout = WC()->checkout();
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
?>
<div id="payment-place-order" class="woocommerce-checkout-place-order">
<div class="form-row place-order">
<noscript>
<?php esc_html_e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?>
<br/><button type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php esc_attr_e( 'Update totals', 'woocommerce' ); ?>"><?php esc_html_e( 'Update totals', 'woocommerce' ); ?></button>
</noscript>
<?php wc_get_template( 'checkout/terms.php' ); ?>
<?php do_action( 'woocommerce_review_order_before_submit' ); ?>
<?php echo apply_filters( 'woocommerce_order_button_html', '<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>' ); // #codingStandardsIgnoreLine ?>
<?php do_action( 'woocommerce_review_order_after_submit' ); ?>
<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
</div>
</div>
<?php
if ( ! is_ajax() ) {
do_action( 'woocommerce_review_order_after_payment' );
}
}
Code goes in function.php file of your active child theme (or active theme). Tested and work.
In WooCommerce, I am trying to add an extra add to cart button below product summary. I successfully added an extra button following this code which works for single products:
add_action( 'woocommerce_single_product_summary', 'custom_button_after_product_summary', 30 );
function custom_button_after_product_summary() {
global $product;
echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
}
But if the product is a variation it doesn't work.
please suggest as what to do?
I have revisited your code a bit, and added a 2nd hooked function for variable products:
// For Simple products
add_action( 'woocommerce_single_product_summary', 'second_button_after_product_summary', 30 );
function second_button_after_product_summary() {
global $product;
if( ! $product->is_type( 'variable' ) )
echo '<button type="submit" name="add-to-cart" value="'. esc_attr( $product->get_id() ).'" class="single_add_to_cart_button button alt">'. esc_html( $product->single_add_to_cart_text() ).'</button>';
}
// For Variable products
add_action( 'woocommerce_single_variation', 'second_button_single_variation', 30 );
function second_button_single_variation() {
global $product;
echo '<br>
<button type="submit" class="single_add_to_cart_button button alt">'. esc_html( $product->single_add_to_cart_text() ).'</button>';
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
You will get this on variable products:
The answer #LoicTheAztec provided is correct but its missing the action attribute for the button click event. Here's the corrected code with the action attribute.
// For Simple products
add_action( 'woocommerce_single_product_summary', 'second_button_after_product_summary', 30 );
function second_button_after_product_summary() {
global $product;
if( ! $product->is_type( 'variable' ) )
echo '<button type="submit" name="add-to-cart" value="'. esc_attr( $product->get_id() ).'" action="'.esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ).'" class="single_add_to_cart_button button alt">'. esc_html( $product->single_add_to_cart_text() ).'</button>';
}
If you are using external products or variation items add the action attribute appropriately. Please refer "plugins/woocommerce/templates/single-product/add-to-cart"
I am using do_shortcode hook that is preventing "Add to cart" to show non-paid members.
I have used the following code and the "Add to cart" doesn't seem to work.
else{
echo do_shortcode( '[ihc-hide-content ihc_mb_type="show" ihc_mb_who="1" ihc_mb_template="1" ]' . '<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>' . '[/ihc-hide-content]" );
');
It's being displayed as :
Output screenshot
Try this code
else{
echo do_shortcode(
'[ihc-hide-content ihc_mb_type="show" ihc_mb_who="1" ihc_mb_template="1" ]' .
'<button
type="submit"
name="add-to-cart"
value="
'.<?php
esc_attr( $product->get_id() )
?>.'"
class="single_add_to_cart_button button alt">
'.<?php
esc_html( $product->single_add_to_cart_text() )
?>.'
</button>' .
'[/ihc-hide-content]" );
');
UPDATE
else{
echo do_shortcode(
'[ihc-hide-content ihc_mb_type="show" ihc_mb_who="1" ihc_mb_template="1" ]' .
'<button
type="submit"
name="add-to-cart"
value="
'.
esc_attr( $product->get_id() )
.'"
class="single_add_to_cart_button button alt">
'.
esc_html( $product->single_add_to_cart_text() )
.'
</button>' .
'[/ihc-hide-content]" );
');
I need a quantity selection block in the add to cart loop on the product list page in woocommerce. Woocommerce codex has a page which allows me to do it by basically putting this block of code instead of the existing one:
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" class="button alt"><?php echo $label; ?></button>
</form>
However, that form doesn't add to my current AJAX setup and other nice tricks that come with my original add to cart button.
This is the original code of the add to cart button, which works like i want it, except for missing the quantity input:
<?php
/**
* Loop Add to Cart
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.1.0
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product, $jckqv;
$jckqv->displayBtn($product->id);
echo '<div class="product-buttons">';
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product );
echo do_shortcode('[yith_compare_button]');
echo do_shortcode('[yith_wcwl_add_to_wishlist]');
echo '</div>';
I need to somehow put the woocommerce_quantity_input in this code, to retain the current functionality, but to add the quantity input. I tried to do it in many various ways, but unfortunately my PHP skills lack.
Please help.
Thank you
For anybody who might still need to use this
<?php woocommerce_quantity_input(); ?>
You need to echo it. As easy as that