I want to make a tooltip for the "conditionnal fees" option in the cart.
I need to put the "Question mark" icon next to "Fee" and when I click on it, a prompt should tooltip with a description of the fee terms.
I'm trying to add the icon via the function.php file of my child theme.
function action_woocommerce_after_fee( $method, $index ) {
if( $method->get_class() == 'fee' ) {
echo '<th>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></th>';
}
}
add_action( 'woocommerce_after_fee', 'action_woocommerce_after_fee', 1 );
I think my problem that the element is in an array and can't reach the "th" tag
<tr class="fee">
<th>Service</th>
<td data-title="Service">
<span class="woocommerce-Price-amount amount">
<bdi>4,82 <span class="woocommerce-Price-currencySymbol">€</span></bdi>
</span>
</td>
</tr>
Tell me how this icon can be added to the "conditionnal fees" option using hooks in the Functions.php file? I just don't want to add this code to WooCommerce templates. And how can you make this code work in the cart and on the checkout page?
I will be glad for your help!
Related
I am making a WooCommerce website where I want to have a pop-up when someone clicks on apply now button. There I want to have two fields 1) All the class(custom field) that product has. 2) Kids that the current logged in user has.
And there would be Add to Cart button which would add the item inside the cart.
I have successfully been able to get those on my product page. I am using toolset https://toolset.com to create my product listing page and single product page.
This is my code for a single product list (Template View)
<div class="school">
<div class="top">
<div class="image">
[types field="logo"][/types]
</div>
<div class="city">
<img src="link_to_img">
[types field="city"][/types]
</div>
</div>
<div class="middle">
<p>[wpv-post-title]</p>
</div>
<div class="bottom">
[wpv-post-read-more]
<button class="applynow" href="#">Apply Now</button>
</div>
</div>
Also this is the code to render those fields 1 & 2 in the popup. I am using this in my single product page.
function iconic_output_engraving_field() {
global $product;
$classes = get_post_meta($product->get_id(),'wpcf-classes-opened-for-admission',array('show_name' => 'true'));
print_r("<label>Select Class</label>");
print_r("<select name='class'>");
print_r("<option disabled selected value> -- Select a Class -- </option>");
foreach ($classes as $class) {
print_r( "<option value='".$class[0]."'>".$class[0]."</option>");
}
print_r("</select>");
$args = array(
'id' => 1538,
);
echo render_view( $args );
}
add_action( 'woocommerce_before_add_to_cart_button', 'iconic_output_engraving_field', 10 );
How can I pass the id through the button, so that I can create a template which loads up with correct data and Add to Cart button.
https://wordpress.org/plugins/easy-login-woocommerce/
This plugin does what you're looking for, BUT it uses wp_user_login or some other function that you would need to change.
Basically, download, check the code of the plugin, your answer should be there.
Plugin is to create a popup when a button is clicked, plugin uses it to login/register, but you could edit to do whatever.
I am trying to create a shortcode for a click-to-copy coupon button. I am using HTML.
How do I use HTML dynamically so that it takes input in the form of shortcode attribute?
This is the HTML code I want to shortcode:
<span class="copy-button click-to-copy" data-clipboard-action="copy" data-clipboard-target="#copy-target">
<span id="copy-target" class="target">Click Here</span>
<span class="hidden copy">Copy</span>
<span class="hidden copied">Copied</span>
</span>
The part Click Here has to be dynamic. It should be replaced by the shortcode attribute.
Suppose the shortcode is [coupon] then Click Here should have the value that I put inside [coupon value=" "] or any other attribute.
Okay, I checked the WordPress documentation as suggested by Scuzzy and got it working.
I created a separate PHP file and included it in WordPress functions.php
Then I used the following code:
<?php
function coupon_function( $atts = array() ) {
// set up default parameters
extract(shortcode_atts(array(
'code' => 'Coupon Code Here'
), $atts));
return '<span class="copy-button click-to-copy" data-clipboard-action="copy" data-clipboard-target="#copy-target"><span id="copy-target" class="target">' . $code . '</span><span class="hidden copy">Copy</span><span class="hidden copied">Copied</span></span>';
}
add_shortcode('coupon', 'coupon_function');
?>
Then I tried this shortcode [coupon code="test"] and it worked perfectly.
Thanks
I wish to completely remove any redirection after a user click on the ADD TO CART button.
Actually I am not using the products page.
I am using a simple button with the link to the product, like this: ?add-to-cart=492.
My user will click on several "add to cart" buttons on my page, so he cant be redirected to any page after clicking in the first button.
At the end of the page he will find a CHECKOUT button to pay and that is it.
Any ideas how to achieve this?
Thanks
Update:
Your simple html "add-to-cart" button links are actually for example like that (the href value):
<a href="http://my-domain.com/site2/?add-to-cart=492" target="_self" class="button white is-larger carrinho">
<span>ESCOLHER PACOTE</span>
</a>
So they are redirected each time to your home page
2 SOLUTIONS:
1) Use the WooCommerce short code [add-to-cart] this way:**
Without price: [add_to_cart id="492" show_price="false"]
With the price: [add_to_cart id="492"]
2) Html code in your page text editor - To prevent redirections, the href attribute should be:
<a href="?add-to-cart=492" class="button white is-larger carrinho">
<span>ESCOLHER PACOTE</span>
</a>
This time your customers will not be redirected as before…
THE CHECKOUT BUTTON
To finish, here is a custom shortcode that will output the "Proceed to checkout" button:
if( !function_exists('proceed_to_checkout_button') ) {
function proceed_to_checkout_button() {
$checkout_url = wc_get_checkout_url();
$button_txt = __('Proceed to checkout', 'woocommerce');
$output = '<div class="wc-proceed-to-checkout">
<a href="'. $checkout_url .'" class="checkout-button button alt wc-forward">
'. $button_txt .'
</a>
</div>';
return $output;
}
add_shortcode( 'checkout_button', 'proceed_to_checkout_button' );
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Usage: just add this to your pages editor: [checkout_button]
Original answer:
First, In WooCommerce settings you need to:
Enable **Ajax on add-to-cart button (Woocommerce > Settings > Products > Display)
Disable the add-to-cart button redirection (Woocommerce > Settings > Products > Display)
Then you can add a custom "Proceed to checkout" button using:
Any classic WordPress menu (Appearance > Menus)
With that custom code on single product pages and product archives:
add_action('woocommerce_after_single_product', 'custom_checkout_button', 100);
add_action('woocommerce_after_shop_loop', 'custom_checkout_button', 100);
function custom_checkout_button() {
$checkout_url = wc_get_checkout_url();
$button_txt = __('Proceed to checkout', 'woocommerce');
?>
<div class="wc-proceed-to-checkout">
<a href="<?php echo $checkout_url; ?>" class="checkout-button button alt wc-forward">
<?php echo $button_txt ?>
</a>
</div>
<?php
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
The button "Proceed to checkout" will be show at the bottom of this pages.
If you want to skip the cart page:
add_action('template_redirect', 'skip_cart_page_redirecting_to_checkout');
function skip_cart_page_redirecting_to_checkout() {
// If is cart page and cart is not empty
if( is_cart() && ! WC()->cart->is_empty() )
wp_redirect( wc_get_checkout_url() );
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
All code is tested and works.
Like in the woocommerce itself does in the product-code shortcode you could just use the filter for the simple-add to cart button 'woocommerce_add_to_cart_form_action'.
// Change form action to avoid redirect.
add_filter( 'woocommerce_add_to_cart_form_action', '__return_empty_string' );
On my WooCommerce checkout page, I am selling only one product. The checkout page is showing this product and there is ckeckbox next to it, to show the shipping details, when clicked. This is on the default form-checkout.php WooCommerce template.
I would like to have this ckeckbox always selected, to show billing details by default.
I have tried to set:
$checkout = 1;
With no luck so far. The radio button is displayed by the following hook:
<?php do_action( 'woocommerce_checkout_before_customer_details'); ?>
Any help letting me know how I can achieve this will be very helpful.
Thanks.
If you look to the code of checkout/form-shipping.php WooCommerce template, inside the <h3> tag, where the checkbox code is located, there is woocommerce_ship_to_different_address_checked hook that you can use to achieve that. Here is an extract of this code template, that shows it:
?>
<div class="woocommerce-shipping-fields">
<?php if ( true === WC()->cart->needs_shipping_address() ) : ?>
<h3 id="ship-to-different-address">
<label for="ship-to-different-address-checkbox" class="checkbox"><?php _e( 'Ship to a different address?', 'woocommerce' ); ?></label>
<input id="ship-to-different-address-checkbox" class="input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 1 ); ?> type="checkbox" name="ship_to_different_address" value="1" />
</h3>
<div class="shipping_address">
So you can use this hook this way, to get this checkbox always selected and displays billing details:
add_filter( 'woocommerce_ship_to_different_address_checked', '__return_true');
This code goes in function.php file of your active child theme (or theme) or also in any plugin file.
The code is tested and fully functional.
I seen many similar questions but no solution. I am trying to make yamm3 work with Wordpress.
I know there is plugins but they are extremely bloated.
I think it should be very simple just using a custom metabox.
This example adds a metabox but only allows links.
http://pastebin.com/hj1cxYQg
Here is the basic function:
/* Mega Menu */
function mynav_add_custom_box() {
add_meta_box(
'add-mynav',
'Mega Menu',
'mynav_show_custom_box',
'nav-menus',
'side',
'default');
}
add_action( 'admin_init', 'mynav_add_custom_box' );
//display nav menu meta box
function mynav_show_custom_box() {
// code to create mega menu
?>
<p class="button-controls">
<span class="add-to-menu">
<input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-custom-menu-item" id="submit-customlinkdiv" />
<span class="spinner"></span>
</span>
</p>
<?php
}
Metabox options:
The first option I would have would be 'how many columns?' using
bootstrap grid system for its width (up to 5).
The second option, you will choose to add menu item(s)/image(s) in the column(s) or use html w/builtin wp editor.
The li that has the mega menu dropdown should have a wrap div with class 'yamm-content', that is the only thing that makes yamm3 structure different.