Elementor - Add Buy now button dynamically next to add to cart - wordpress

I am attempting to add a buy now button in elementor on custom single product page so there are two buttons:
add to cart
buy now (which will redirect to checkout & skip cart)
I still want add to cart to function as usual.
How can I achieve this? Many thanks.

After a little research I came up with a solution to this problem
using PHP code snippet
<?php
$product = wc_get_product();
$id = $product->get_id();
echo home_url('/checkout/?add-to-cart='.$product->id);
?>
then i linked the button to this code using shortcode

Related

Can we replicate ACF functionality in our theme?

Hi i want to add advance custom fields in my wordpress theme. I don't need editor functionality but to provide the users the facility to enter the values to view in the frontend.
basically i want to add the custom fields in my theme just like ACF but i don't want to use the plugin. Is there anything anyone can help me out with this please do.
I'm using ACF plugin right now to add custom fields in my theme.
For example I'm getting the designation from user in the admin panel and our team members custom post type. and showing it on the home page by using this code.
<p><span class="fa fa-user-circle"></span> Designation</strong>:<?php echo the_field( 'designation' ); ?> </p>
I don't want to use ACF plugin to perform this task. I know about the wordpress custom field. The problem with wordpress custom field is I've to select the key every time when I create a post. Here's a sample of what I'm trying to do. I want to add the this in my add new post.
Right now I've to select the key value whenever a new post is created. I want something similar to the image attached in my add new post. Thanks.
You can use native WordPress function(s) to do the same thing. Of course, you lose the extensive ACF features and slick ACF admin panels.
Instead of using ACF's get_field(), you can use get_post_meta(get_the_ID(), 'field', true);
List all items in the meta field 'appartments' like so:
$meta_name = 'appartments';
$fields = get_post_meta( $post->ID, $meta_name, true );
foreach ( $fields as $fieldValue )
{
echo $fieldValue . ' ';
}

Customise my wordpress site to have the add to cart button appear when someone hovers over the products. I have attached the scree

I have very beginner level understanding of wordpress, woocommerce and elementor. I am still learning a lot of things. I believe that the best way to learn is to imitate. So, I go through various themes and try to imitate their behaviour and appearance using Elementor. But, this particular theme caught my eye. The Add to cart button appears when someone hovers over the product image instead of always being there. Can you guys please help me figure this out or atleast point me in the right direction?
This is how it should look when someone hovers over the images
This is how it looks when the mouse pointer is away
More info
<?php if($available) {?>
Buy now
<?php } ?>
This code solves my problem as expected.
WooCommerce documentation reference
Solution: Add code in your theme's function.php file.
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo 'Add to cart';
}
Solution: Install Custom WooCommerce Add to Cart plugin
Custom WooCommerce Add to Cart Plugin
Solution: You can use hooks with shortcodes:
custom add to cart button
Or create overrides for WooCommerce files in your own template

Woocommerce: on archive page after on_click add to cart show custom data via ajax

So basically, what i want, to show product added in cart also on archive page. I did this functionality, you can refer with image (1 item- already in cart) but my code work on refresh the page. I want to show the same with ajax. As soon as "add to cart" clicked, the data added in mini cart, at same time data will show on product listing page. enter image description here
Go to
Woocommerce > Settings > Products > Enable AJAX add to cart buttons on archives
add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' );
function custom_add_to_cart_message() {
global $woocommerce;
$return_to = get_permalink(woocommerce_get_page_id('shop'));
$message = sprintf('%s %s', $return_to, __('Continue Shopping', 'woocommerce'), __('Product successfully added to your cart.', 'woocommerce') );
return $message;
}
If you want to add your product with quantity using Ajax then definitely WooCommerce default checkbox Enable AJAX to add to cart buttons on archives not works for quantity purpose.
There are many solutions to add this feature. I have implemented it earlier. You just need to add some classes, functions, and script to achieve this.
This is the link which is really helpful for me and you can go through it or you can also check this one. It's not complicated.
If you want to add this in your headers like a mini cart or something. So for that, this one is the best solution for you.
Hope this will helpful for you. Thanks.

WooCommerce Shop page : Customize sorting dropdown to product categories dropdown

I would like to modify the products sorting on the shop page to product categories filter where the user can select the browse the products of categories from there.
I am a rookie in programming. I checked the WooCommerce directory to find the .php file I should work on. I got some clue it is in archive-product.php but I don't see the code which display the sorting dropdown.
Can anyone give me some clue to achieve this ? Or is there any workaround ? Thanks.
I added this in functions.php :
// remove default sorting dropdown
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
// now add the new dropdown
add_action( 'woocommerce_before_shop_loop', 'add_product_category_dropdown' );
function add_product_category_dropdown(){
print '<span class="woocommerce-ordering">'; // So it takes the same position as the default dropdown
the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' );
print '</span>';
}
The reason you wouldn't see the code is that majority of what is generated by Woocommerce is handled by actions and hooks. In easier terms this means Woocommerce creates functions that spits out content and assigns them to different areas of the website.(For more information on Woocommerce actions and hooks, read here - https://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/ )
I'd recommend using the plugin below. It does exactly what you seem to be asking for and you can avoid having to play in parts you might not be comfortable with yet.
https://wordpress.org/plugins/yith-woocommerce-ajax-navigation/
Most awesome thing is that it's not one of those plugins that force you to get premium to actually get the desired effect.
I just found the solution few days ago. I use the function of WooCommerce product categories widget on the shop page.
This line of code will output the dropdown of product categories:
<?php the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' ); ?>

How to add an "add to cart" button in single-product.php page in woocommerce?

I am using woocommerce to develop a ecommerce site
In single-product.php I am facing a problem.
I can't display the add to cart button under the product in this page.
So far I am using this code:
<?php
//global $post;
echo do_shortcode('[add_to_cart id="$post->ID"]');
?>
But no luck for me yet!
Maybe you made a simple writing mistake? Try this:
<?php
echo do_shortcode('[add_to_cart id="'.$post->ID.'"]');
?>
I would suggest using the WooCommerce default content-single-product.php template.
By default, the single product's add to cart template is added via the woocommerce_template_single_add_to_cart() function and is added to the woocommerce_single_product_summary hook (priority 30).
If you must change the single product content very radically, you can either call woocommerce_template_single_add_to_cart() directly or add it to a different hook. There's no reason to use a shortcode here.
If I understood you right, you want to move the Add-to-Cart button from the top of the page to the bottom of the page, so that it would go below the main product description.
Here is how I've done this on my website:
/* Removing the Add-To-Cart button from right below the product summary.
*/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
/* Adding the Add-To-Cart button so that it would go after the main product description.
*/
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 12 );

Resources