Digital experiences for all disciplines
Forum Replies Created
-
-
I’m setting up a site in which I also want to use Hero / Content Split.
However, I only want to use it on certain categories. Follow my thread here http://www.swiftideas.com/forums/topic/woocommerce-category-template-halfhalf-split/
Are there any gotcha’s or pitfalls you encountered you wouldn’t mind sharing with the community?
Thanks.
I’m getting closer.
Added this to atelier-child/functions.php
/* Apply half-content-split based on the product category. ================================================== */ add_filter( 'body_class','halfhalf_body_class' ); function halfhalf_body_class( $classes ) { if ( is_product_category( array( 'axle', 'axle-support' ) ) ) { $classes[] = 'hero-content-split'; } return $classes; }Created a copy of taxonomy-product_cat.php from Woocommerce template directory to atelier-child/woocommerce/taxonomy-product_cat-{slug}.php for each category I want to be half/half split and changed line 16 to
wc_get_template( 'archive-product-exploded.php' );Copied archive-product.php from atelier/woocommerce over to /atelier-child/woocommerce/archive-product-exploded.php and changed line 139 to
<div class="content-divider-wrap container"><div class="content-divider"></div></div>It now correctly adds the hero-content-split class to the
<body>tag, causing WP to run the js which sets up the window heights, and applies the hero-content-split css.TODO:
- Find out how to get the hero image to only fill 100% of the width instead of 100% height. I think I’ll need to duplicate and rename all the CSS for hero-content-split and call that new CSS instead.
- Or instead of using a background image in the CSS, instead add the PHP to archive-product-exploded.php which will pull in the category hero image as an actual image, and scale it to fit the width with the zoom class so it does an “inner zoom” on mouse hover.
Attachments:
You must be logged in to view attached files.Fantastic Kyle.
Thanks for the help. I copied atelier/woocommerce/content-product.php over to my atelier child theme and made the change there.
Also, of note (although I’m not sure if it changed anything) I used two different echo’s. The two instances of
echo $product->get_categories( ', ', '<span class="posted_in">', '</span>' );
where actually a little different from each other.One was surrounded by H5 tags, and the other just span. So I used
echo $product->get_sku( ', ', '<h5 class="posted_in">', '</h5>' );
on line 296 and
echo $product->get_sku( ', ', '<span class="posted_in">', '</span>' );
on line 325.Again. Thank you.
Anyone out there found a way to use variable products inside of WooCommerce Grouped products?Creating a grouped product for each “Group” of products showcased by my exploded diagrams, and including all those items inside the group displays quite nicely inside the theme already. Providing the zoom on the explosion image, and a nice list of the products to the right, with qty boxes, and an add-to-cart button which will add all the quantities the user selected all at once.
The catch. I need to list variable items in the group, but WooCommerce doesn’t allow this.
SCRATCH THAT
After further testing, it looks like a product can only take part in ONE grouped product at a time. This won’t work, because on my explosions, there are sometimes products which must exist in more than one category.
Well. Those too plugins introduce a bunch of unnecessary CSS and ID’s into the mix, breaking up the theme styling far too much. I think it will be best to pursue porting the methods already built out by SwiftIdeas for the normal pages over to the Woo Category taxonomy pages.
Could it maybe be inside the scope of support to point me in the right direction regarding which parts of the theme files drive the half/half functionality for the normal pages? Maybe some hints on which files I should read through in your theme so I might be able to learn/extract/port from?
This is the link I meant to supply.
http://codecanyon.net/item/woocommerce-products-layouts/7384574
Combined with this to get the loop into a table.
http://codecanyon.net/item/display-product-multilayout-for-woocommerce/6196331
OK thanks for the response. That is understandable. I think I can accomplish my task via a plugin like this
I can then use Swift Page Builder to split the page in half, and display an image box with my desired image on the left, and their shortcode to run the category loop on the right.
Can you suggest how though I might be able to apply the same Zoom feature this theme uses to the image box I use on the left? Do I just need to add a CSS class to the image, or must I call some JS too?
I’m trying to achieve something like the attached image.
Attachments:
You must be logged in to view attached files. -