I need to move the titles of the products, while I am browsing the category page, over their thumbnails
Details:
I have created a shop page where I only display the categories.
Every category contains 1 to 10 products.
Once I click a category, I land on a page where I see all of the products in that category.
I would like to see the titles of those products appearing over their thumbnails.
Thank you
A few more details relating to your parituclar setup are needed to give a proper answer. However, I'm going to assume you have everything at default. This is what you would need to add to the end of functions.php in your active theme folder:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
For reference, check https://github.com/woothemes/woocommerce/blob/master/templates/content-product.php and https://github.com/woothemes/woocommerce/blob/master/includes/wc-template-hooks.php
If this does not work, check:
that you use the latest version of woocommerce. Actually a few versions back should work the same, but not too far back.
that your woocommerce templates are not overwritten. Check your theme folder for a file called content-product.php or in a subfolder woocommerce/content-product.php. If that has been altered, you need to adjust accordingly, perhaps by making changes right there.
that your theme does not already mess around with product display hooks. If it does, find out what's different.
Please note that this changes behavior for all woocommerce loops, such as any shortcodes you might be using and the "related products" section in single product view, if that is enabled. To affect only categories, the changes should be wrapped in a condition check ( is_product_category() ).
If you put code into a plugin, you must wait for WooCommerce loading:
add_action('plugins_loaded', function()
{
// move product's title before product thumbnail instead of next to that
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_title');
}
Added this CSS for the product title and it worked fine for me. I used media query of course.
position: absolute;
top: 0px;
Related
I have been trying to hide the tags and categories from (display only) on my single product page, the developer of my theme sent me the following code, to be added in the customize css section but it is not working.
.wcs-meta__cat, .wcs-meta__tags {
display:none !important
}
I have also read that these tags help you in SEO of your website, what if i just want to hide them in the frontend but they stay in the backend, is it easily possible?
This is the link of the product page:https://www.hodst.com/wp/product/p-a-n-i-s-y-n-t-h-w-a-v-e/#
/**
* Hide SKU, Cats, Tags # Single Product Page - WooCommerce
*/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
Need place above code in theme's function.php file accordingly.
I'm building an affiliate site and obviously for every product I use page not post. But pages don't have categories or tags and even if we add them to pages, our pages won't appear on categories' pages and in widget areas of front page.
Woocommerce functionality is perfect but it looks a little bit weird to use it for an affiliate site, not a store. Is it okay to delete e-commerce features (price, add to card and stuff like that) and use the rest of Woocommerce?
It is nothing weird to use Woocommerce without cart stuff.
Sometimes clients want a catalog of goods, but not always need the cart and delivery staff on a site.
In this plugin it is much more comfortable to organize categories and editing of many products. Plus you get interaction with other plugins that build for Woocommerce.
If you make it thru "Custom Post Type", then it is normal if there are about 10.
If they are more, than you will need to create many solutions by yourself and you will have problems with their further maintenance.
Woocommerce is pretty good for e-commerce sites. As you creating affiliate site for that you can hide some functionality of Woocommerce. As you mention you want to hide (price, add to card and stuff like that). You have to use some actions to remove those functionality. Copy following code and place it in your active theme's function.php file.
Note: If you have child theme then you must have to add this code in child theme's function.php file.
add_action('after_setup_theme','activate_filter') ;
function activate_filter(){
add_filter('woocommerce_get_price_html', 'hide_price_cartBtn');
}
function hide_price_cartBtn(){
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}
comment if you like to remove more things as you mention stuff like that
I would like to hide or remove the category meta from the shops page (catalogue
) which is showing right under the product title in my store. I have tried several things but nothing works.
I tried CSS:
.product__categories {display:none!importamt;}
and this...
.product_meta .sku_wrapper {
display:none!important;
}
.product_meta .posted_in {
display:none!important;
}
I tired this in functions too remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
How can I hide the category meta?
I used this:
.product-details .posted_in { display: none; }
and it worked for me
The .product_meta class you are trying to use is not on the catalogue page - it is on the product detail page.
This is an old question, but you might try
remove_action('woocommerce_after_single_product_summary',
'woocommerce_template_single_meta', 40);
in a theme (like in functions.php) or a code snippet.
The PHP solution should be slightly better because it changes the page before delivering it, rather than still serving the meta section and including some CSS instructions to not display it.
This works in WC 6.7.0. If it doesn't work, perform a search in the WooCommerce plugin for the exact lettering, woocommerce_template_single_meta (You can do this by loading the folder into something like Sublime Text.), and adjust accordingly. For example, if in the future, you find that it's added with add_action( 'woocommerce_random_action_why_was_this_changed', 'woocommerce_template_single_meta', 50 ); you need to use remove_action('woocommerce_random_action_why_was_this_changed', 'woocommerce_template_single_meta', 50);.
Update: This isn't working on my own site and I don't know why.
Another thing you can do to remove the product meta section is to create a file in your theme or child theme within a /woocommerce/single-product path called meta.php, i.e: yourawesometheme/woocommerce/single-product/meta.php. Give it this content:
<?php
if (!defined('ABSPATH')) exit;
This works consistently.
(I think you could leave the file completely blank, skipping the (!defined('ABSPATH')) part, but I'm not certain. Perhaps someone else could clarify.)
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' ); ?>
Has anyone experienced this before? This is my first time working with WooCommerce.
If I don't add products to a category they will show up in the main shop page as well as have a single product page, as soon as I add a category they will not show up on the main shop page, the category page, or the single product page.
I have not manipulated the wp_query in any way on the page.
I am integrating it into my custom theme which is really barebones, the only thing I have changed is the following in my functions.php file:
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'urbantac_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'urbantac_wrapper_end', 10);
function urbantac_wrapper_start() { echo '<div id="products-content" class="products wrap clearfix aligncenter content-container">'; }
function urbantac_wrapper_end() { echo '</div>'; }
I was using another WooCommerce plugin:
http://www.woothemes.com/products/catalog-visibility-options/ to turn off the "store" functionality of WooCommerce and use it as a "catalog"
This adds two settings on the product category pages, and sets defaults to NOT show anyone the content (no idea why this is). The settings are Role Visibility Rules and Location Visibility Rules. It does not mention this anywhere in the documentation for the plugin!
So if you are using this plugin you can no longer create categories directly from a product page, you must first create the category, set the visibility rules, and then create the product.