I'm looking for some help in WooCommerce. I would like to hide the mini cart and topbar when there are no items in the cart (as it won't be used that often).
Below is the HTML output.
Is there some kind of "WooCommerce Hook" that needs to be added in functions.php?
Sorry, I don't even know what PHP files to look in to post any code snippets for this particular area, if they are required.
Please let me know if they are.
Thanks.
Your header.php file located in your main theme is displaying that Mini-cart. (Is better to use a child theme and to copy that file from the parent theme to the child theme, avoiding loose the customizations when updating main theme).
Editing that header.php file, you will have to use a simple condition around the code that is displaying Mini-cart, this way:
// If cart is not empty display the mini-cart
if(!WC()->cart->is_empty()){
// Here goes the code that display mini cart in your header
}
This should work, but if ajax is enabled for add-to-cart, the mini-cart will be displayed only moving to another page or refreshing the actual page.
ALTERNATIVE: THE EASY WAY (HIDDING WITH CSS)
Another alternative, should be to inject a CSS rule in html head, when cart is empty this way:
add_action('wp_head', 'hook_css', 99999);
function hook_css() {
// If cart is empty hide the mini-cart
if(WC()->cart->is_empty())
echo '<style type="text/css">#top > #cart{display:none !important;}</style>';
}
This code goes on function.php file of your active child theme (or theme) or in any plugin file.
The code works.and if you want to hide all the top bar (and the mini-cart at the same time), replace the css rule by (just removing > #cart):
#top{display:none !important;}
Fixed it thanks to your suggestion LoicTheAztec, played around with the code a little! Thanks.
<!-- TOPBAR -->
<?php if (sizeof(WC()->cart->get_cart()) != 0) { get_template_part( 'topbar' ); }?>
<!-- END TOPBAR -->
Here is a simple workaround which works for
the new mini cart "Gutenberg" block
and modern browsers supporting :has
(and the quantity is the first string in the aria-label)
.wc-block-mini-cart:has(.wc-block-mini-cart__button[aria-label^="0 "]) {
display: none;
}
Related
I have been trying for a while now to remove the image link from a Woocommerce product. I tried snippets, css and plugins. But nothing seems to work, until I came across Vitaly Gritsienko's answer of Jul 5 2017.
Although the code he suggests (see below) for the functions.php file works, the hand icon is still visible. How can I remove the hand icon?
//Removes links
add_filter( 'woocommerce_product_is_visible','product_invisible');
function product_invisible(){
return false;
}
//Remove single page
add_filter( 'woocommerce_register_post_type_product','hide_product_page',12,1);
function hide_product_page($args){
$args["publicly_queryable"]=false;
$args["public"]=false;
return $args;
}
Actually, the simplest way is to edit the theme's woocommerce listing page to remove the link from the templating engine, although it's better to do it via a child theme so as not to interfere with the main theme's updates.
You can read more about child themes here: https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/
I'm making a WordPress theme by myself since I'm working for the first time in Wordpress I've watched some tutorials about it.
I have page.php header and footer and ofc an index. I insert the content from the pages with this:
<?php echo get_post_field('post_content', $post->ID); ?>
but I tried the get_post in a while loop with same result..
Everything is fine but when I want to use a plugin I can't add to my page... When I insert the shortcode of it it shows only the shortcode string... There are some plugins where I can click a "view" option and it would show a page with my plugin (for example a calendar) but that page is empty...
When I activate an original theme it works instantly... So I'm sure something is missing from my theme something which can load the plugins but I couldn't find solution for it.
Any ideas?
Did you add the <?php wp_head(); ?> function before the head area of the html document is closing? It imports important scripts and styles from wordpress itself (and probably also from the plugins).
See here:
https://developer.wordpress.org/reference/functions/wp_head/
Before closing the body area, the template should also include
<?php wp_footer();?>
See here:
https://developer.wordpress.org/reference/functions/wp_footer/
So I have attached an image of my issue.
Basically I followed the instructions on this Stack Overflow question thread right here:
Text under Add to cart (woocommerce)
I posted my question there 5 times and someone kept removing it, so I'm posting it again here. Please advise.
Update: I have already tried the paragraph tag, the break tag, and the pre tag.
You could try this (as you will see this is a CSS styling issue with the margin-top):
add_action( 'woocommerce_after_add_to_cart_button', 'custom_content_after_addtocart_button', 100 );
function custom_content_after_addtocart_button() {
// custom content.
echo '<br/><div><p style="font-size:10px; font-style=italic; margin-top:20px;">(*Contact us for bulk purchase enquiry)</p></div>';
}
Code goes in function.php file of your active child theme (active theme or in any plugin file).
Tested and works. You will get that:
This code will place it nicely below the Add to Cart button :
add_action( 'woocommerce_after_add_to_cart_form','content_after_addtocart', 100 );
function content_after_addtocart() {
// place your content below.
echo 'Hello There !!';
}
So, I have this PHP function that adds the X-UA-Compatible meta tag to the head of every page of my Wordpress site. (I'm new to Wordpress and PHP so forgive me about terminology). It's in the functions.php file of my StudioPress child theme.
The problem is the tag only works if it's placed very near the top, and the way I have it set up now causes the tag to appear halfway down, so it doesn't work. How can I force this tag to appear at the top of the head of each page?
Ex : You can use wp_head action. The wp_head action hook is triggered within the <head></head> section of the user's template by the wp_head() function. Although this is theme-dependent, it is one of the most essential theme hooks, so it is widely supported.
function aaa_custom_function() {
?>
Your Tag
<?php
}
add_action('wp_head', 'aaa_custom_function', 1000);
Use the third parameter to control the position. Change 1000 to another values to find the perfect position.
Create your custom hook like this way.
open header.php then write this below line where you want to show meta tag
<?php do_action("my_custom_metatags");?>
Now open your functions.php and write down this below code
function my_custom_metatags_fn()
{
//your tag goes here.
}
add_action("my_custom_metatags","my_custom_metatags_fn");
//Test this code it will work like a charm for you.
adding to #Damith answer wp_head action will work.
Refrence
also you can override header.php file into your child theme.
add this code in function.php
<?php function your_custom_function() {
// your custom code which you want to add in header file
}
add_action('wp_head', 'your_custom_function', 1);
As I understand by default Woocommerce shop page uses product archive template. What I am looking for, is to use a custom template for shop page.
Here is what I did:
Create template "my-shop"
Create page "My shop" -> choose template "my-shop"
Choose "My shop" as Woocommerce shop page
But none of the changes I made to "my-shop" template are present on the shop page.
What am I missing here? I would not like to change product archive itself, just the shop page.
Is there a way to disable product archive from being a default for shop page?
Thanks
I know it's too late and you may have figured it out by now. In any case, the changes that you would like to make to the WooCommerce Shop Page need to be done in the archive-product.php and it would be safer to create a child theme and do these changes. Making enhancements and customizations in a Child theme is best practice so that you can update the parent theme at any time and it won't affect your store.
I hope this helps, for more information on how you can use WooCommerce short-codes to customize your store can be found here.
To add to Silver Ringvee's answer - he used is_page but that only works on wordpress pages. For woocommerce you need to use something like is_woocommerce() . See Woocommerce conditional tags page.
My example code uses the is_shop conditional tag as that was the page you wanted to change. the code get_template_part( 'content', 'shop' ); will call the file content-shop.php in your theme root folder. This code is to be added at the top of wp-content\themes\*theme*\woocommerce\archive-product.php that you can copy from wp-content\plugins\woocommerce\templates\archive-product.php
You can add it just before get_header( 'shop' ); line 23 in my file - and the entire page will be drawn from your template. If you want to keep the header of the shop page, then put this code after the get_header code. Remember to include a footer in your file as well
if (is_shop()) {
get_template_part( 'content', 'shop' );
} else {
#normal archive-product code here
}
The solution (not perfect) that I figured to work best, until someone finds a way to actually change the template from dashboard:
Adding:
<?php
if (is_page( 'Page Title' ) ):
# Do your stuff
endif;
?>
to content-product.php in my theme's woocommerce folder.
If you prefer to go with code, you can create a redirect from the original shop page to your page via wp_redirect.
add_action('template_redirect', 'bc_010101_redirect_woo_pages');
function bc_010101_redirect_woo_pages()
{
if (is_shop())
{
wp_redirect('your_shop_url_here');
exit;
}
}
More detailed tutorial can be found here
This is not possible to create custom template for shop page , just copy and paste woocommerce Templates into you theme folder and Try to work in content-product.php template .