Adding horizontal lines between categories in list view?
-
Hi James,
I would like to add a horizontal line / rule between the product categories in list view in order to give them a bit better separation. I have this by default when the products are viewed in list view, but not for the categories.
Can you advise how this can be added please? I’m not sure whether it is a setting controlled by your plugin, WooCommerce or my theme (Striking). There seems to be a <hr> in the one view that is absent in the other, but not sure how I would go about adding it.
As an example, my current category list view looks like this:
http://matchlessclueless.com/store/products/leds/And I would like to add the horizontal rules as per the product list which looks like this:
http://matchlessclueless.com/store/products/leds/lucas-564-leds/Advice or suggestions gratefully received!
Thanks, James 🙂
http://ww.wp.xz.cn/extend/plugins/woocommerce-grid-list-toggle/
-
Hey,
Have a look in grid-list-toggle.php and find;
add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_hr'), 30);This is where the hr is hooked in. You’ll need to hook it into the sub categories too.
Off the top of my head try something like;
add_action( 'woocommerce_after_subcategory', array(&$this, 'gridlist_hr'), 30);Thanks James,
The above code you suggested added to the plugins php file worked a treat!
Maybe a good one to add to the next update? Seems odd to have the horizontal line there for one view and not another.
Many thanks, James 🙂
A follow on request on this same topics if I may please James:
So I now have a horizontal rule after each subcategory in the product category list views thanks to your suggested tweak above – great!
However I would ideally now also like to have a hr before the first subcategory item in the list, so as to separate this from the subcategory title and description at the top of the page. For an example please see here.
I tried using the ‘woocommerce_before_subcategory’ hook in the same way as suggested above, but this of course adds a hr before every subcategory, so duplicated the lines between all the following subcategories. Using the ‘before’ instead of the ‘after’ means I then miss the hr after the final subcategory.
So could you suggest the appropriate hook to use please? I couldn’t seem to find anything along the lines of ‘after_category_description’ in the ref doc’s.
Cheers.
@james – I am searching for a way to create a category page in Woocommerce. I clicked on your website and see that you have exactly what I’m looking for. I’m curious how you created this page: http://matchlessclueless.com/store/ where it lists the category image, description and link to view those products. Do you mind sharing how you did this?
Thanks!Nevermind… Just found how to do this in Woocommerce. Thanks!
Any thoughts on above follow on request please James?
Cheers 🙂
Hi James and all,
It seems with the latest updates to WP and WC (and maybe my theme ‘Striking’) that the <hr> that took me so long to include is now somewhat out of place. I went to delete it from my custom functions but found that it has now made its way into the default php file too. So thanks for adding it, but just wanted to let you know that it is now (perhaps) surplus to requirements. Sorry!
Easily removed by a quick edit of the grid-list-toggle.php file as follows (see the line with the two // at the start in the group of addaction functions):
// Setup function setup_gridlist() { if ( is_shop() || is_product_category() || is_product_tag() ) { add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_styles' ), 20); add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_script' ), 20); add_action( 'woocommerce_before_shop_loop', array( $this, 'gridlist_toggle_button' ), 30); add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_open' ), 9); add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_close' ), 11); //add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_hr' ), 30); add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5); add_action( 'woocommerce_after_subcategory', array( $this, 'gridlist_cat_desc' ) );Cheers, James
The topic ‘Adding horizontal lines between categories in list view?’ is closed to new replies.