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
Related
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
Someone created a menu in wordpress sidebar. I need to remove that permanently. Can anybody say how can we do that? In this image ( the wordpress dashboard image which you going to see when open this link below ) you can see portfolio, careers, team etc. These are the links someone added before and we need to remove. Thanks :)
http://dev.netbramha.in/projects/image/Untitled.pngenter code here
You can remove menu items using action hook.
function remove_dashboard_menus(){
remove_menu_page( 'wpcf7' );
}
add_action( 'admin_menu', 'remove_dashboard_menus' );
remove_menu_page parameter you can pick up from address URL page parameter like this : http://localhost/wpdemo/wp-admin/admin.php?page=wpcf7
If you are using CPT UI plugin, you can open it in your admin and you will find the portolio cpt created there. Just delete from there.
If you are not using CPT UI plugin, you can go to functions.php and remove the code where portfolio code is defined.
In functions.php check add_action() function. You can find these menu items there.
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' ); ?>
I've tried a lot of things. No results.
My add to cart button for variable product does not work. it works for simple product. but for variable product, it is not even shown up.
I have edited the twenty-thirteen theme to incorporate my custom html theme and over ridden the css and everything else that existed.
When i change the theme to 2015/2014, it works fine. But with my custom theme, it doesnt work.
I have tried WooCommerce jQuery Cookie Fix
and added a hook to function.php as :
/*Add to Cart for variable products*/
function fix_woo_var_cart()
{
wp_enqueue_script('add-to-cart-variation', '/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_scripts','fix_woo_var_cart');
?>
Nothing however seems to work! Please help!
apparently id commented wp_head() and wp_footer(); for some reason.
i was told that isn't necessary while i learnt to integrate html into wp. therefore, the issues.
Uncommented that and all's fine.:)
How can I make a wordpress theme woocommerce compatible ? I want to make cart page, my account page, product loop page, product single page,checkout page design into my wordpress theme.
We Can make WordPress theme compatible with woocommerce here is how you can do that
There are two ways to resolve this:
1] Using woocommerce_content() -
This solution allows you to create a new template page within your theme that will be used for all WooCommerce taxonomy and post type displays.
To set up this template page, perform the following steps:
Duplicate page.php-
Duplicate your theme’s page.php file, and name it woocommerce.php. This file should be found like this: wp-content/themes/YOURTHEME/woocommerce.php.
Edit your page (woocommerce.php)-
Open up your newly created woocommerce.php in a text editor, or the editor of your choice.
Replace the loop-
In woocommerce.php, replace the Loop with woocommerce_content();
i.e., instead of if(have_posts)… endif; should be replaced by
woocommerce_content()
This will ensure that the WooCommerce templates are picked up for the product and taxonomy pages.
2] Using WooCommerce Hooks-
The hook method is more involved that using woocommerce_content, but is more flexible. This is similar to the method we use when creating our themes. By inserting a few lines in your theme’s functions.php file, First unhook the WooCommerce wrappers;
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
Then hook in your own functions to display the wrappers your theme requires:
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10); function my_theme_wrapper_start() {
echo '<section id="main">';} function my_theme_wrapper_end() {
echo '</section>';}
3] Declare WooCommerce support -
Now that you have made the changes, the final thing you have to do, is specify that your theme now supports WooCommerce. You need to add the following in functions.php of your theme.
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
To make it more practical for you this is the video for you, which you
can follow too- How To Make WordPress Theme Compatible With WooCommerce Plugin
You need to install WooC and look at the all the style tags that come accross with it then you can style up the pages and add all of that to your style sheet.
Also you can use hooks but Im not 100% sure how you would check if WooC is active off the top of my head so that hooks in your code only come up when the plugin is active.