I've started to be a bit desperate here. So I have a check-box in the terms area of my woocommerce checkout to agree that you read our T&C. However, we are offering services that ABSOLUTELY require people to read our terms because they include health hazard information. Obviously, legally we will be fine by offering the terms and having people agree that they read them.
What I want to achieve, though, is that a pop-up opens, when that check-box is clicked. It does not have to be fancy or styled, but since this is in woocommerce I am VERY unsure about where to place what.
A simple <input type="checkbox" id="xxx"> type and javascript was my first guess, but I do not know where to put what in this case since Woocommerce seems to be a rather closed ecosystem, so neither did I find where to place my JS (too many different phps?) nor where to link the checkbox. I was so lost.
Maybe you guys have a different approach or know where to put what.
Thanks!
The below code will add an additional custom T&C checkbox in the checkout page, before the "place order" button:
// Additional terms and conditions check box in checkout page
add_action( 'woocommerce_checkout_after_terms_and_conditions', 'add_terms_and_conditions_checkbox', 20 );
function add_terms_and_conditions_checkbox() {
woocommerce_form_field( 'terms_two', array(
'type' => 'checkbox',
'class' => array( 'terms terms-two' ),
'input_class' => array('woocommerce-form__input-checkbox'),
'label_class' => array('woocommerce-form__label-for-checkbox'),
'label' => '<span>' . sprintf(
__( "I have read and accept %s…", $domain ),
'<a class="terms_link" id="terms_link">'.__( "the terms and conditions", $domain ).'</a>'
) . '</span>',
'required' => true,
), '');
}
Or you can also override ,via your theme, the template file checkout/terms.php which displays the WooCommerce terms and conditions checkbox on checkout page, to make it as you want.
In the below function you can include the related javascript / jQuery script on checkout page for your pop up opening event:
// Auto Show hide checkout shipping fields based on chosen shipping methods
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {
// Only on checkout page
if( is_checkout() && ! is_wc_endpoint_url() ):
// Jquery code start
?>
<script>
jQuery(function($){
// Here come your jQuery code
});
</script>
<?php
endif;
}
Code goes in functions.php file of your active child theme (or active theme).
Related: European GDPR additional checkout validation checkbox in Woocommerce
Related
I'm trying to use the WordPress do_shortcode function for the WooCommerce One Page Checkout Plugin which uses shortcode like this: [woocommerce_one_page_checkout template="product-table" product_ids="product, ids, here"]. It seems like I can only use this shortcode IF it's in the content editor and won't allow me to add this to a page template using the do_shortcode function.
Their documentation here says:
If you wish to display the One Page Checkout Shortcode using WordPress’ do_shortcode() function instead of including the shortcode in a post or page’s content, you will also need to attach custom code to the 'is_wcopc_checkout' filter and make sure a boolean true value is returned.
So I tried adding the following to the functions.php file:
add_filter( 'is_wcopc_checkout', function(){ return true; } );
and it didn't seem to do the trick.
I also tried:
add_filter( 'is_wcopc_checkout', 'my_one_page_checkout' );
function my_one_page_checkout(){
return true;
}
add_filter( 'is_wcopc_checkout', 'true' );
That didn't seem to do it either.
Am I adding this code to the functions.php wrong? Any help on how I can get the One Page Checkout Plugin to work using do_shortcode?
Here's my full code in the page template for reference:
<?php
echo do_shortcode('[woocommerce_one_page_checkout template="product-table" product_ids="62, 122, 438, 52, 433, 435, 512, 514"]');
?>
Thanks for your help.
(I tried contacting WooCommerce support and they were no help saying that this is custom code and they can't do anything to help.)
The simplest way to return a true to a filter is like sitting the call back to WP default __return_true. So the function will be like
add_filter( 'is_wcopc_checkout', '__return_true' );
There is no filter named is_wcopc_checkout in the code of WooCommerce one page checkout version 1.0.2
From their doc- You can also manually add a shortcode [woocommerce_one_page_checkout] to any page or post and use the shortcode's attributes.
Usage: [woocommerce_one_page_checkout product_ids="30,45,12"]
Some context from One page checkout readme.
To register your template, attach a callback to the 'wcopc_templates' filter and add a new array of your template's details to the $templates array passed to your function.
For example, to register a custom pricing table template, the code would be similar to:
function eg_add_opc_template( $templates ) {
$templates['my-custom-pricing-table'] = array(
'label' => __( 'My Pricing Table', 'eg' ),
'description' => __( "Display a sophisticated and colourful pricing table with each product's attributes, but not weight or dimensions.", 'eg' ),
);
return $templates;
}
add_filter( 'wcopc_templates', 'eg_add_opc_template' ) );
The key used in the $templates array should be the template's file name (excluding the extension). The label element of the array is the name displayed on the One Page Checkout dialog. The description element is used for the tooltip next to the template's name.
With woocommerce enabled, we sell wine on our e-shop.
I would like an additional button so that customer can buy a case of wine (12 bottles) rather than having to select qty= 12.
I would like to stick the button after the 'add to cart' button on each single product page.
Until now I can't find exactly the way to do it.
It can be done easily with a custom hooked function displaying an additional button that will add 12 products on 1 click on single product pages for simple products only:
add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart', 20 );
function additional_simple_add_to_cart() {
global $product;
// Only for simple product type
if( ! $product->is_type('simple') ) return;
$href = '?add-to-cart=' . esc_attr( $product->get_id() ) . '&quantity=12';
$class = 'ingle_add_to_cart_button-12 button alt';
$style = 'display: inline-block; margin-top: 12px;';
$button_text = __( "Add a case of 12", "woocommerce" );
// Output
echo '<br><a rel="no-follow" href="'.$href.'" class="'.$class.'" style="'.$style.'">'.$button_text.'</a>';
}
Code goes in function.php file of your active child theme (active theme).
Tested and works.
this is a help site designed for coders that hit a wall, not really a substitute for using quick google search and the many free pages and tutorials on managing and tweaking such a popular third party platform.
For example, searching google for "woocommerce custom add to cart button" showed how to affect the urls and text, and a search for "woocommerce add custom button" showed how to add extra ui buttons in various pages.
And as others posted here, there also appears to be many plugins making that even simpler, a few of which show up in those searches i listed above, such as "min/max quantity"
https://wordpress.org/plugins/woo-min-max-quantity-limit/
https://wordpress.org/plugins/minmax-quantity-for-woocommerce/
Please see https://stackoverflow.com/help/how-to-ask if you try implementing those, hit a wall and cant find anything (after searching for a while) to work around it.
Hope that helps too
I designed a WooCommerce template for a customer. Now he wants to remove prices and visitors only add what they want to the list. So there will be no payment method. s:
- I can't change plugin or database. All data must remain how they are.
- I need to remove prices from all over the site. where ever they are. Cart, wishlist, single page & etc.
- I need to change payment method to something like submit list.
- at the end after submit list page there must be a contact info page.
please help.
You can hook into wc_price and remove the prices there
function my_filter_wc_price( $price ){
return '';
}
add_filter( 'wc_price', 'my_filter_wc_price' );
Then you can hook into parse_query and redirect the checkout page to the contact page.
function my_parse_query(){
if( is_page( wc_get_page_id( 'checkout' ) ) ){
wp_redirect( '/contact' );
exit;
}
}
add_action( 'parse_query', 'my_parse_query' );
That will stop people from being able purchasing things. Just hiding the price with CSS will not. They will still be able to craft URL's to add to cart, and find the cart / checkout pages.
since I found no other way I decided to do it width CSS and translation.
I removed all prices by display:none;
and I translated all the strings which are about shop and price.
When a User Buys a Product he can generate up to 3 Serial Keys for his Product. This works fine so far. The User can see his Serials always in "my account"
The Data gets stored in the Database: Table=Usermeta Meta=Product_Serial
So from a Users Perspective evrything works fine but from the Admin Perspective not because the admin can´t see how much Serials the Customer has created and also he cant see the Serials the User is using.
Now I have created a Custom Field in the Theme functions.php with this code:
add_action( 'add_meta_boxes', 'add_meta_boxes' );
function add_meta_boxes()
{
add_meta_box(
'woocommerce-order-my-custom',
__( 'Order Custom' ),
'order_my_custom',
'shop_order',
'side',
'default'
);
}
But from here I don't know how to read out the Serial Key so the admin can see it. :( Any ideas ?
May be i am displaying data in wrong place in your order detail page. But you can check there is multipe hook avilable for this woocommerce/inculdes/admin/meta-boxes-/view/html-order-items.php.
I just take one this hook. Please add this code in functions.php
function my_function_meta_deta() {
echo "I am here";
}
add_action( 'woocommerce_admin_order_totals_after_refunded','my_function_meta_deta', $order->id );
As coder said there is multiple hooks you can also try this out.
add_action('woocommerce_admin_order_data_after_order_details', 'my_custom_order_manipulation_function');
function my_custom_order_manipulation_function( $orderID ) {
//dynamic functionalities / static html to display
}
Credits : Add order metadata to WooCommerce admin order overview
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.