Product view > Design and layout issues

[Ideenbeckerei]

Hallo Swift team, me again 🙂

I progressed a bit but now I need your help to finalise the way our products are viewed (single/detail view).

1) I got rid of all the breadcrumbs 😉 but was wondering if there was a possibility to make the producer/brand name clickable. E.g.:
Dark Chocolate from Nicaragua, 72%
by <u>Amedei Chocolate</u>
And when you click ‘Amedei Chocolate’ it’s like clicking on the category ‘Amedei’ and it shows all Amedei products (default right now).
Amazon is using this functionality as well. It would be so much better looking as it is right now.
The implication would be that it’s showing the same way (title + clickable brand) in the shop page….

2) How can I remove the ‘SKU’ info?

3) Are there other Tab designs to choose from? And how to change?

4) I want to change the titles of the three tabs and followed a previous forum thread, but without success: http://docs.woothemes.com/document/editing-product-data-tabs/
I used dot notation and copied it into CSS and JS (I’m a noob). No success. Can you help?

5 and last) Is there a way to define the ‘Similar bars’ functionality? How does it work and where can it be manipulated?

Thanks a lot, you rock!

[David Martin – Support]

Hi,

1) Not by default, you would need to get a developer to make this modification for you: http://www.swiftideas.com/customization/

2) Sure please add this custom CSS to your theme options panel:

span.sku_wrapper {
    display: none;
}

3) What did you want them to look like? You can adjust the colors, line thickness with CSS.

4) Sure, please activate your child theme, inside the child theme functions.php file please add this CSS:

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'More Information' );		// Rename the description tab
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the reviews tab
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab

	return $tabs;

}

5) This based on the tags/categories from the item being displayed.

Thanks,
David.

[Ideenbeckerei]

1) Clickable title: Thanks, I’ll check with your ‘customisation’ team
2) Remove SKU: Thanks. Works well.
3) Customise tabs: I’d like it to be more visible. The little ‘hook’ is not too clear. Is there a way to highlight the chosen tab. Like with the SPB element ‘Tour Section’?
Otherwise, making the line thicker might help already.
4) Rename tabs: works like a charm. Thanks.
5) Ok.

So, would be great if you have a solution on the the tabs ‘visibility’.

Thanks.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #998675;
}

– Kyle

[Ideenbeckerei]

Thanks, Kyle, that works. Once we have our Graphic charter agreed I will adapt the color.

(In the CSS box, I got some ‘warnings’ that some inputs are ‘overqualified’. But it works.)

Thanks team!

[Kyle – SUPPORT]

No problem 🙂

– Kyle