product pages/categories how to set template and product page extra tab? « Support Forum | Kriesi.at

Support Forum » Abundance

product pages/categories how to set template and product page extra tab?

13 posts from 7 voices

Started 1 year ago by mgason
Latest reply from Kriesi
This topic is closed
This topic is resolved

Tags:

mgason
Member

Hi,
2 questions. What determines the template used by the products page and product category pages? How do you assign one? Can I have it NOT be the same as the Blog template?

How do you add another tab to the Individual product page like in the demo. "Additional information" Then how do you feed it the information?

I did not import all the example files because I already had a site full of data that I am migrating to the theme. can I import parts of it? For example I saw that there was a custom Storefront template? I know thats 3 questions now ;-)

Posted 1 year ago #
Dude
Dude

Hey,
1) The template is provided by the woocommerce plugin. Kriesi just hooks into it and adds some content to the default product templates (you can find the code in abundance\woocommerce-config\config.php ). Basically you'd need to edit the plugin files to create a custom template (woocommerce/templates).

2) Basically it's possible to add additional tabs - however it requires some coding knowledge/skills. You can use the "woocommerce_product_tabs" action: http://www.woothemes.com/woocommerce-codex/extending-woocommerce/action-reference/
to add a custom tab to the products panel. If you're no php developer it's a bit tricky though.

3) The importer can import the whole dummy content only. You can open abundance\includes\admin/dummy.xml with a text editor and copy/paste the required demo content manually.

Posted 1 year ago #
mgason
Member

So just to be clear single product page layout changes require PHP template editing, they are not influenced by teh Default page Layout at all.
The product category pages inherit the blog template

On the tabs. I can probably code it but Is there a template in the dummy content that has tabs like the demo? They did catch my attention before I bought the theme, I thought it would be standard if it was in the demo.

Posted 1 year ago #
Dude
Dude

1) Kriesi modifies the standard template - he adds some div containers around it (i.e. he uses the "woocommerce_before_main_content" and "woocommerce_after_main_content" action in abundance\woocommerce-config\config.php ). This also influences the layout/css styling of course. You can also change the action output in config.php.

2) I just noticed that you mentioned the "Additional information" - is this the "additional tab" you mean? If yes, you can create it easily create it via admin backend.
It will display a table which contains the attributes/values you enter for this product (i.e. like shape, color, size, etc.). Go to the product editor page (edit an existing one or create a new one) and then scroll down to the "Product Data" option field. There you'll find the "Attributes" tab which allows you to add a table with additional data. Howevver this tab doesn't allow you to add any content you like but just adds a table.

However it's not a fexible tab (you can insert i.e. information without tables or rename it, etc.).

Posted 1 year ago #
mgason
Member

Thanks great information on the product data, that was exactly what I wanted.

I still can not get this clear though.
I want my blog to have left sidebar and my product category pages to have a right sidebar. Can I do this? If so, please give me basic instructions because I am not understanding it.

Posted 1 year ago #

Dude
Dude

You can try to replace following line in template-blog.php:

<div class='container_wrap <?php echo $avia_config['layout']; ?>' id='main'>

with:

<div class='container_wrap sidebar_left single_sidebar' id='main'>

and set the standard layout to "right sidebar".

Posted 1 year ago #

mgason
Member

Thanks, great support

Posted 1 year ago #
Dude
Dude

Glad that I could help you :)

Posted 1 year ago #
livetooextreme
Member

Another way you could add "additional tabs" is by using the tabs shortcode to add tabs inside of the product description area. It's maybe not as "clean," but I just tried it and it looks pretty good. Not ideal, but not bad either. I think it will work for me.

Posted 1 year ago #
KingRobb
Member
Hey - I don't know if anyone will find this usefull or not but I found a way to add tabs beside the Description tab and then populate them with custom fields which I add on the edit product page. The custom field will support shortcodes as well and the tab will not display if it is empty. Anyway, I had tried the info mentioned above but the link no longer works. Here is what I did ....
(now if only we could get away with adding new tabs and content in the product data box itself instead of using custom fields)

STEP 1
For each new Tab that you want you need to create 2 new pages. (My example below is creating a "Specifications" Tab)
Create new files here ... /plugins/woocommerce/templates/single-product/tabs/
One is for the Tab Label the other is for the Tab Content.

specifications.php <-contains tab contents
```
<?php
/**
 * Specifications Tab
 */
global $woocommerce, $post;
$meta_content = apply_filters('the_content', get_post_meta($post->ID, 'specifications', true));
?>
<div class="panel" id="tab-specifications">
	<?php $heading = apply_filters('woocommerce_product_specifications_heading', __('Product Specifications', 'woocommerce')); ?>
	<h2><?php echo $heading; ?></h2>
	<?php echo $meta_content; ?>
</div>
```
tab-specifications.php <-contains actual tab label text
```
<?php
// Get Custom Field "specifications" meta data and hide tab if empty
global $woocommerce, $post;
$meta_content = apply_filters('the_content', get_post_meta($post->ID, 'specifications', true));
if (!empty($meta_content)) { ?>
<li><a href="#tab-specifications"><?php _e('Specifications', 'woocommerce'); ?></a></li>
<?php } ?>
```
STEP 2
Add your tabs to the woocommerce template here ... /plugins/woocommerce/woocommerce-template.php
Starting at line 375 you should see function definitions for "Product page tabs" and "Product page tab panels".
Add your new tab and panel there ....
```
// THIS IS MY NEW SPECIFICATIONS TAB
if (!function_exists('woocommerce_product_specifications_tab')) {
	function woocommerce_product_specifications_tab() {
		woocommerce_get_template('single-product/tabs/tab-specifications.php');
	}
}
// THIS IS MY NEW SPECIFICATIONS PANEL
if (!function_exists('woocommerce_product_specifications_panel')) {
	function woocommerce_product_specifications_panel() {
		woocommerce_get_template('single-product/tabs/specifications.php');
	}
}
```
STEP 3
Add hooks to your new tabs here ... /plugins/woocommerce/woocommerce-hooks.php
Starting at line 73, add your backticks in the "Product page tabs" sections
```
add_action( 'woocommerce_product_tabs', 'woocommerce_product_specifications_tab', 40 );
add_action( 'woocommerce_product_tab_panels', 'woocommerce_product_specifications_panel', 40 );
```
STEP 4
Edit your product and "Add New Custom Field" and its "Value"

That is it - you should be done!
Posted 1 year ago #
herzfamily
Member

Hey Kriesi,

I have a question (similar to above mgason's question) related to woocommerce Product Pages - I tried to add some intro content before products and for some reason it's appearing under the title as subtitle. How do I fix that? Please help.

Posted 1 year ago #
stickFinger
Member

@KingRobb

Thansk fpr sharing this code. Great :-)

Posted 1 year ago #
Kriesi
Key Master

Hey!

thanks for your help kingRobb!

@Herzfamily: would you mind posting a link to your installation to show what you mean, maybe open a new thread, since this one is getting a little messy :)

Best regards,
Kriesi

Posted 1 year ago #