Woocommerce Category Template – Half/Half Split

[purekarting]

I’m reaching out to the pros at Swift Ideas to see if they are willing to lend a hand.

I want to display some of my Atelier Themed Woocommerce categories using the Half/Half Content Split style. Similar to the “Size and Fit” page in your standard demo.

From what I understand (which is little because I’m brand new to WordPress) it is possible to use the WordPress taxonomy hierarchy to get the system to check if a taxonomy-product_cat-{slug}.php file exists in the theme files, and add this file into the building of the page.

I’d like the template to pull in the Hero image as set per that category inside Woocommerce, and then run the products loop on the other side (preferably in a table instead of thumbnail loop, but I can tackle that in a secondary task).

[purekarting]

I’m trying to achieve something like the attached image.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Unfortunately there is no easy way to achieve it without a considerable customization effort that is outside our support scope.

That functionality it’s only present in the normal pages, and not in archives/taxonomy pages like the one in your example.

-Rui

[purekarting]

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?

[purekarting]

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

[purekarting]

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?

[purekarting]

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.

[David Martin – Support]

Hi,

It looks like you have closed the ticket, let us know if you need any help or pointers.

Thanks,

David.

[purekarting]

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:

1. 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.
2. 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.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide a link to that page to see if we can help you out in this final step?

-Rui

[purekarting]

https://www.purekarting.com/product-category/otk-parts/axle

Ive gotten closer to my goal. Setting the page style to standard but applying the body_class hero-content-split via functions.php produces a great layout and page heading for me. Now I think I just need to add a PHP IF to check if it is a shop page with hero-content-split and then inject the div for the image and the content split.

Should i override sf-header.php entirely or just add the IF to my functions.php?

[Rui Guerreiro – SUPPORT]

This if below returns true if you are in the main shop page or in an category shop page

`if( is_shop() || is_product_category() ){

}`

Place just the changed functions from sf-header.php inside the functions.php of the child theme.

-Rui

[purekarting]

Cool thanks for the help.  I’ll play around with that.

BTW:  I meant to say sf-page-heading.php not sf-header.php.  sf-page-heading.php is actually were Atelier sets up the split screen main content layout.

[Rui Guerreiro – SUPPORT]

ok. No problem I didn’t check the entire content of sf-header.php, only checked if it was possible to override the functions.

-Rui

[purekarting]

Getting closer and closer.

I’m now loading the category hero image into the split frame as a regular image.

Now I just need to get it to have the same inner zoom feature as used on the product pages.

https://www.purekarting.com/product-category/otk-parts/axle/