- This topic has 6 replies, 2 voices, and was last updated 3 years, 10 months ago by
Tom.
-
AuthorPosts
-
June 9, 2017 at 4:57 am #331002
David
StaffCustomer SupportHi Guys
i know this is a little off plan in regards to GP but i hope you can help or tell me if i need to commission some custom development.
I currently use the following CSS to format the background of the shop page product images. All my product images are transparent PNG so it works very nicely.
CSS:
.woocommerce ul.products li.product a img{ width:100%; height:auto; display:block; margin: auto; background-color: rgb(255,220,220); }
I have a requirement to change the colour depending on the category of the product. Scouring the web i found the following code that adds a custom taxonomy to the body class.
PHP:
// add taxonomy term to body_class function woo_custom_taxonomy_in_body_class( $classes ){ if( is_singular( 'product' ) ) { $custom_terms = get_the_terms(0, 'product_cat'); if ($custom_terms) { foreach ($custom_terms as $custom_term) { $classes[] = 'product_cat_' . $custom_term->slug; } } } return $classes; } add_filter( 'body_class', 'woo_custom_taxonomy_in_body_class' );
However i dont know where to go from here?
Any help or pointers appreciated
regards
David
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/GeneratePress 1.3.46GP Premium 1.3June 9, 2017 at 10:35 am #331155Tom
Lead DeveloperLead DeveloperHi David,
Can you see the class being added to the body?: product_cat_whatever
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 9, 2017 at 10:51 am #331168David
StaffCustomer SupportNope
=\Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 9, 2017 at 11:35 am #331187David
StaffCustomer SupportHi Tom
apologies – they show up on the Single Product page…..
What i am trying to achieve is in the shop loop, which would allow me to style each product by category.
I am still getting the gist of all this – so really need assist with the correct php to move forward.appreciate any assistance
regards
David
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 9, 2017 at 6:50 pm #331331Tom
Lead DeveloperLead DeveloperHmm, perhaps instead of
body_class
try filtering intopost_class
.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 10, 2017 at 5:05 am #331488David
StaffCustomer SupportHi Tom – thats great yes of course it needed to be the post class. (like i knew that! lol)
The script didn’t work. So i trawled around and found a guide in wordpress codex for adding classes. And tweaked it to this:// add product category name to post class function diggs_category_id_class( $classes ) { global $post; $product_cats = get_the_terms( $post->ID, 'product_cat' ); if( $product_cats ) foreach ( $product_cats as $category ) { $classes[] = 'diggsprod_cat_'.$category->slug; } return $classes; } add_filter( 'post_class', 'diggs_category_id_class' );
I can now customise categorised products using CSS:
li.diggsprod_cat_soap img { background-color: rgb(255,220,220); }
Next trick is custom product tags that can be used to identify different qualities of a product.
Thanks for the help – maybe someone else may find this of interest.
David
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 10, 2017 at 9:14 am #331608Tom
Lead DeveloperLead DeveloperAwesome! Thanks for posting your solution 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.