I'm using Woocommerce and I've customized my site to display the product titles in a table and when clicked the product is placed via ajax in the Woocommerce mini-cart widget without a page refresh.
When I update to 'Woocommerce 2.5.2' the Ajax add to cart no longer works and the page refreshes.
The current link I use to add a product is:
$html = $html . '<div class="numlist_thumb"><a data-product_id="' . $id1 . '" data-product_sku="' . $number1 . '" class="numbertabanchor add_to_cart_button dp-button product_type_simple" rel="nofollow" href="/?add-to-cart=' . $id1 . '">' . $number1 . '</a></div>';
I would really appreciate any suggestions as to how to add a product via ajax without a page refresh.
This is the theme conflicts with woocommerce. I faced this problem too. So whenever the woocommerce launched any major update, theme also updated according to latest woocommerce. So you have to update your theme according to woocommerce.
Add the "ajax_add_to_cart" class to your <a> tag
As a reference have a look at my code for single-product/add-to-cart/simple.php
<button type="submit" class="single_add_to_cart_button add_to_cart_button button ajax_add_to_cart button--itzel button--text-thick" data-quantity="1" data-product_id="<?php echo $product->id; ?>"><i class="button__icon icon icon-cart"></i><span><?php echo esc_html( $product->single_add_to_cart_text() ); ?></span></button>
You can easily create the add to cart functionality via the [wp_ajax][1] action, and in the callback function you can simply add the following code
add_action( "wp_ajax_custom_add_to_cart", "custom_add_to_cart_callback" );
add_action( "wp_ajax_nopriv_custom_add_to_cart", "custom_add_to_cart_callback" );
function custom_add_to_cart_callback(){
global $woocommerce;
$woocommerce->cart->add_to_cart( $_POST[ 'prod_id' ] );
wp_die();
}
After this you can easily just make an ajax call to the server, where you will post the product id as variable prod_id and add another variable named action with value custom_add_to_cart
Related
I have a WooCommerce checkout page where I have some upsell / crosssell options available using a shortcode which generates the output data (product title, product description, price, thumbnail) in Php.
The PHP output differs depending on, if product is already in cart. E.g. if the product is already in cart, the input checkbox is checked and the description is not shown anymore. And important; instead of the add-to-cart link a remove_item= link for that product is generated / loaded.
Without trying to use AJAX for adding the product to cart, so with page refresh after adding the (upsell) product (?add-to-cart) - it all works well. The page reloads and show the correct input (checked) status and the product data items I don´t want to show (eg. description) are not loaded / shown anymore for that upsell product. Also the correct ?remove_item= link is present.
BUT I want to make it work with Ajax add to cart.
I make use of the WooCommerce built-in AJAX function by giving the product links the classes "add_to_cart_button ajax_add_to_cart".
This also works well... the product gets added to the cart without refreshing the page.
BUT, the input checked status (so if a product is already in cart) or the not displaying of the product description, is something I struggle with. Without Ajax - so only php, thus with page-reload after adding the upsell product to the cart - it works good, but when using Ajax add-to-cart not so much.. yet.
Part of the PHP
// if product is already in cart
if ( ($cart_item['product_id'] == $product_id) || ($cart_item['data']->get_id() == $product_id) ) {
ob_start();
echo '<span class="product-box">';
echo '<span class="abc-product-remove abc-product_'.$product_id.'">';
echo '<a class="lfe-remove remove" href="'.$cart_item_remove_url.'">';
echo '<input class="switch rad-input" type="checkbox" name="checkbox" checked="checked" data-target="'.$cart_item_remove_url.'" />';
echo '</a>';
echo '</span>';
echo '</span>';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
// if product is not yet in cart
ob_start();
echo '<span class="product-box">';
echo '<span class="abc-product-add abc-product_'.$product_id.'">';
echo '<a class="abc-add add_to_cart_button ajax_add_to_cart" href="'.$product_string.'" data-product_id="'.$product_id.'" data-product_sku="" data-quantity="1" >';
echo '<input class="switch rad-input" type="checkbox" name="checkbox" data-target="'.$product_string.'" data-product_id="'.$product_id.'" />';
echo '<span class="product-description">'. $short_description .'</span>';
echo '</a>';
echo '</span>';
echo '</span>';
$output = ob_get_contents();
ob_end_clean();
return $output;
How would I use jQuery Ajax to get the correct $output data from php for the product item that gets added to the cart by jQuery Ajax?
Thanks a lot.
need wordpress advice. I searched for quite some time now but i can't find anything.
I am using organic 01 theme from xstore and i can't find any way to change the product page title to the real product title. Title should match the product .. now string 'Product Information' is written on all pages in that place.
I tried in child theme functions.php write php code but I didn't get it, couldn't even to remove the title for test purpose, which is very simple and i should succeed with remove_action(bla bla..) .. why is that?
In the beginning i just tried to change the title on all pages with the string in language suitable for the page but i couldn't do it either.
remove_action('woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title',5);
add_action('woocommerce_shop_loop_item_title','title',5);
function title()
{
echo 'Produkto informacija';
}
To better understand what I am trying to do I attach a photo
You need to try with high priority
<?php
// Frontend: On shop and archives pages
add_action( 'woocommerce_shop_loop_item_title', 'example_replace_title', 9 );
function example_replace_title() {
global $product;
// Remove the product title
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
$title = "My Sample Text";
// Output
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . $title . '</h2>';
}
I want to add a new button for other actions beside the refund button in Edit Order page for WooCommerce.
I know it may be possible by hooks, but I can't seem to find the right hook to execute for it.
Use the following (where you will replace "custom" by your desired action slug and name):
add_action( 'woocommerce_order_item_add_action_buttons', 'wc_order_item_add_action_buttons_callback', 10, 1 );
function wc_order_item_add_action_buttons_callback( $order ) {
$label = esc_html__( 'Custom', 'woocommerce' );
$slug = 'custom';
?>
<button type="button" class="button <?php echo $slug; ?>-items"><?php echo $label; ?></button>
<?php
}
The hook is located in includes/admin/meta-boxes/views/html-order-items.php (line 288)
Then you will have to enable Ajax for this button, adding some jQuery code (sender) and some PHP code (WordPress Admin Ajax receiver), just like for WC_Ajax refund_line_items()…
On a single product page, I would like to add more information icon (i or ?) on a specific pa_attribute. So if you click on a ? icon you will see a pop up for more information about that specific attribute. (example:https://laadkompas.nl/offerte-aanvraag-1/?car-type=Universeel%2C+verschillende+elektrische+auto%27s&installatie=Ja&compire=Thuislocatie)
I did some research but I could not compile the code, because I could not get a specific php pa_attribute.
Iv found this code: but its not related on an pa=attribute and its a Tooltip.
add_action( 'woocommerce_before_variations_form', 'krank_custom_action', 2 );
function krank_custom_action() {
echo ' <button class="krank-tooltip ttone" type="button" data-toggle="tooltip" data-placement="top" title="this is a text ">?</button>
Can somebody compile this code to get a specific pa attribute with a extra information tooltip or a popup on a single product page (Woocommerce)?
I did some research and found the right code. Its related on a specific pa_attribute but now I need it make the icon (?) clickable and get more information about that specific product attribute.
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'pa_'.$name;
if( $taxonomy == 'pa_montagewijze' )
$label .= '<div class = "customization_image_icon"><img class="alignleft wp-image-25335" src="https://laadkompas.nl/wp-content/themes/laadkompass/images/info.png" alt="" width="10" height="10" /></div>';
return $label;
}
Can somebody make a clickable tooltip on that specific attribute to get more information?
I was in same situation and your question and answer helped me alot. I share my final work here maybe helful for someoneelse later:
I prefered to use fontawsome icons in my situation rather than loading an image and also based on my template opportunities I used to execute my template shortcode (my theme is flatsome with ux-builder) to achieve what I wanted (and same thing you asked for):
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'pa_'.$name;
if( $taxonomy == 'pa_mjattr' )
$label = $label . ' info<i class="fa fa-question"></i> ' . do_shortcode( '[lightbox id="guide-mjattr" width="600px" padding="20px"][block id="guide-mjattr"][/lightbox]' );
return $label;
}
I am attempting to add a buy now button in Woocommerce on the product page so there are two buttons:
add to cart
buy now (which will add the product to the cart and redirect to checkout)
I still want add to cart to function as usual.
How can I achieve this? Many thanks.
http://wordpress.org/extend/plugins/woocommerce/
I managed to resolve this by finding this blog post http://samplacette.com/skip-shopping-cart-in-woocommerce/.
If anyone else finds that they are struggling to implement this, this is how I did it (might not be the best solution but it works for me):
I copied the following text into my theme functions.php
/** * Set cart item quantity action *
* Only works for simple products (with integer IDs, no colors etc) *
* #access public
* #return void */
function woocommerce_set_cart_qty_action() {
global $woocommerce;
foreach ($_REQUEST as $key => $quantity) {
// only allow integer quantities
if (! is_numeric($quantity)) continue;
// attempt to extract product ID from query string key
$update_directive_bits = preg_split('/^set-cart-qty_/', $key);
if (count($update_directive_bits) >= 2 and is_numeric($update_directive_bits[1])) {
$product_id = (int) $update_directive_bits[1];
$cart_id = $woocommerce->cart->generate_cart_id($product_id);
// See if this product and its options is already in the cart
$cart_item_key = $woocommerce->cart->find_product_in_cart( $cart_id );
// If cart_item_key is set, the item is already in the cart
if ( $cart_item_key ) {
$woocommerce->cart->set_quantity($cart_item_key, $quantity);
} else {
// Add the product to the cart
$woocommerce->cart->add_to_cart($product_id, $quantity);
}
}
}
}
add_action( 'init', 'woocommerce_set_cart_qty_action' );
And then I modified theme/woocommerce/single-product/add-to-cart/simple.php (make sure you don't midify the plugin files so make a copy and paste into your theme files into a woocommerce folder) to the following (notice that I had removed my quantity input from my code so if you need it,ensure you rework the code to get it working):
<form class="cart single-product" method="post" enctype='multipart/form-data'>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<button type="submit" class="single_add_to_cart_button button alt cart-buttton add-to-cart"><?php echo $product->single_add_to_cart_text(); ?></button>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>
<form class="cart single-product" method="post" enctype='multipart/form-data' action="/checkout?set-cart-qty_<?php echo $product->id;?>=1">
<button type="submit" class="single_add_to_cart_button button alt cart-buttton buy-now">Buy Now</button>
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
</form>
I added another button next to the existing Add to Cart button but separating the form. The blog post mentions that you can add a hyperlink instead but the above worked for me in terms of the way I needed to customise the page (slightly more long winded)
From blog:
Usage instructions:
Create a hyperlink with a query string argument like so:
?set-cart-qty_=
Where is the numerical ID of your product (something like “167”) and is the >quantity you want set in the user’s shopping cart (most likely this will just be “1”).
Example URL to send user to checkout with exactly one item of product with ID “167” in cart:
http://my.website.com/checkout?set-cart-qty_167=1
I hope the above helps anyone who has a similar problem as I had.
After much searching I was surprised this is not something that is standard.
Here was my solution:
Either use a hook like "woocommerce_single_product_summary"
Or copy the wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php to your child theme like:
wp-content/themes/child-theme/woocommerce/single-product/add-to-cart/simple.php
Edit the file and add the following code where you want the button to appear:
<div class="express-checkout-wrapper">
<a id="dc_express_checkout" href="/checkout/?add-to-cart=<?php echo get_the_ID(); ?>">
Purchase
</a>
</div>
Now the only problem is the button will take you to checkout and add the correct product but without the correct quantity if you changed it so I used js in my custom.js file that is queued in the footer:
// Add and change quantity to express checkout button when the quantity is updated
if($('.cart .qty').length){
var originalUrl = $('#dc_express_checkout').attr('href');
$('.cart .qty').change(function(){
var url = originalUrl + '&quantity=' + $(this).val();
$('#dc_express_checkout').attr('href', url);
});
}
You can change the url from:
href="/checkout/?add-to-cart=<?php echo get_the_ID(); ?>"
to:
href="/cart/?add-to-cart=<?php echo get_the_ID(); ?>"
If you want the button to direct to the cart instead of the checkout page.