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' ); ?>
Related
I have seen this question and answer. That does not work.
Setup
I am running:
WordPress 5.4.1
WooCommerce 4.1.1
I have a custom theme that overrides some of the WooCommerce templates by placing my own templates in: themes/my_theme/woocommerce/template-name.php
I have established that the shop page (homepage) uses the template archive-product.php. I have copied the this from plugins/woocommerce/templates/archive-product.php into my theme and made some minor HTML changes which work perfectly. There are no functional changes in my theme's copy, just some HTML.
The problem
I want the homepage to only show the store categories, as thumbnails. There is an option to set the shop page to show categories instead of products:
Appearance > Customize > WooCommerce > Catalogue
Shop page display has been set to Show Categories
However the shop homepage seems to ignore this setting entirely, and it still shows the products. It seems surprising that WooCommerce's own template does not honour this setting!
How do I find this setting in the template and then show the categories (as thumbnails) on the shop homepage?
Is there an equivalent to woocommerce_product_loop() for looping categories?
As a side note, the Storefront theme does honour the setting but Storefront does not have the template archive-product.php. Storefront seems to be highly abstracted and after much debugging of it / trying to take it apart I have so far not worked out which template file it is using for the shop page.
My theme is already in production and I just want to make an update so that the homepage shows the categories instead of going directly into the products list.
I found a workable solution. The WooCommerce default templates don't support the setting to show categories on the Shop page.
However using a shortcode with do_shortcode(), and a condition this can be achieved as follows:
if (is_shop()) {
echo do_shortcode('[product_categories hide_empty="0"]');
} else {
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
}
Still:
I would like to know how to pick up the 'show categories' customisation setting shown in the question, so my theme responds to that.
Is there a better way than using do_shortcode(), this feels like a bit of a hack
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
I'm looking like a crazy person if there is a way to display the tags of a product on the single product page with woocommerce ( wordpress plugin). I can not find anything about ti and I've been trying to tweak the code, but without success . . .
if anybody has some high lite, it will be wonderful,
thank you very much
Ok, so depending on the WordPress theme you use, they might show automatically (just checked and it works right away with the "official" Storefront theme).
If you're writing a plugin (or a theme) though, you're most likely to want the PHP solution. In that case, according to this, you should be good to go with the following:
global $product; // gets the Product object (correspoding to the single page)
$product->get_tags( $product ); // returns an array with product tags
According to this post, you have to use get_terms('product_tag').
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;
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.