Single Page Product Modification « Support Forum | Kriesi.at

Support Forum » Abundance

Single Page Product Modification

14 posts from 3 voices

Started 6 months ago by EdgeWP
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

No tags yet.

EdgeWP
Member

I have several things I would like to modify on the Single Page Product sheets

1.) Remove what I consider the short description area all together and moved the tab area up in it's place.

2.) Will need to move the add to cart button once this is complete.

3.) Would like to reduce the Price Font just a little.

4.) Would like to remove any descriptions from Related prices or also interested.

5.) and lastely, change bread crum above image to reflect the product category, while removing reference to the main product area itself..

I have put together an example pic to hopefully explain things better, as it's alwasy easier to see what it is someone is refering too..

http://screencast.com/t/VaU0wbiLG0Wd

Thanks!

Posted 6 months ago #
Nick
Moderator

Hi,

Please provide a real link to the page so that we don't have to build something and hope that it resembles your version as there are multiple paths to reach the same goal. Also please explain what you considered the short description.

Thanks,

Nick

Posted 6 months ago #
EdgeWP
Member

Here is a direct link for you...

http://www.htech.net/?product=ebarometer

Thanks...

Posted 6 months ago #
EdgeWP
Member

Sorry.. missed the question of short description.. Guess I'm not familiar with the proper terminology.. I personally would consider the full description that under the tab description, and the short description listed above the tab area.. but from my reading I guess one is considered content and the other exceprt? Is content or excerpt under tab?

Posted 6 months ago #
Nick
Moderator
Hi,

Please open up in the plugins folder /woocommerce/ the file woocommerce-hooks.php and change line 118 which looked like
```
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
```
to look like
```
//add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
```
now add this to your Quick CSS located in the admin area Abundance > Theme Options > Styling at the bottom of the page. It used to be 30 now is size 16.. Up to you how you change it.
```
#top .price_container .price .amount, #top .price_container .price ins .amount, #top .price_container .price ins {
font-size: 16px;
font-weight: normal;
}
```
Please apply these for now, since I am not sure what the button will do, and then we shall proceed.

Thanks,

Nick
Posted 6 months ago #
EdgeWP
Member

Changes Made.. Price size is fine there, but now I know how to adjust, thanks.. Product name and Add to Cart Button still there though...

Posted 6 months ago #

Nick
Moderator

Hi,

In page woocommerce-hooks.php in the woocommerce plugin directory please copy lines 132-136

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
	add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
	add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
	add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
	add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

and then put two forward slashes in front of each line //

2) Please open up tabs.php in the plugin directory folder /woocommerce/templates/single-product/ , and find lines 19-20 which look like

<ul class="tabs">
<?php echo $tabs; ?>

Paste all 5 lines from previous step that we copied from woocommerce-hooks.php (*without* the forward slashes //) and paste them *in between* lines 19 and lines 20 (just push line 20 down one line and paste in there.

Your end result should look like

<ul class="tabs">
	add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
	add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
	add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
	add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
	add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
<?php echo $tabs; ?>

3) Now please add to your Quick CSS the following:

#top.single-product form.cart {
margin-bottom: 0px;
float: right;
}
div.product .product_title {
display: none;
}

----------------------

I don't have whatever you are using to add the descriptions to the 4 related products, and its not a part of 1.6.5.2 Woocommerce. So If you want to remove it, I would search whatever additional extension you are using for ... itemprop="description" ... and make certain that the filter after it is removed or commented out with two forward slashes.

Thanks,

Nick

Posted 6 months ago #

EdgeWP
Member

Ouch.. that didn't work so well... I could swear the first time I did it the add to cart button was still on the top of the page next to the breadcrum.. but re-did it think'n I did something wrong and it wasn't there the second time or the third time.. but the toolbar isn't good.. did I do something wrong?

Thanks

Posted 6 months ago #
Devin
Moderator

Hi EdgeWP,

Typically this isn't something covered under normal support though I think Nick has gotten you quite far with it.

You may need to start from the first step (re-installing WooCommerce) and then go through each individually. The biggest hurdle doing these kinds of changes will make is that you will no longer be able to update WooCommerce without re-doing all of these changes once again. So security updates, bug fixes etc. So keep that in mind when doing this level of customization.

The alternative is looking into a freelance developer to completely modify the theme files to re-build all the woo-commerce page content in the way you are looking for with plugin hooks and completely new functions.

Regards,

Devin

Posted 6 months ago #
EdgeWP
Member

Yes, through Nick's suggestions, I've definitely gotten further than I could have on my own! It's looking much closer to how I would like to see it. The tab area is still not up as high on the page as I would like it.. Would like it to start and be even with the top of the thumbnail pic of the product, and for some reason, it's offset down just a bit.. and still trying to figure out how to get the breadcrumb above the product pic to display... Home>>Product Category>>Product.... instead of... Home>>Products>>Product... but just in case anyone else is interested, to get where it's at now.. I've made the following changes to the woocommerce-hooks.php

Commented out Lines 116-120, like so...

//add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); //add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); //add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); //add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); //add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Commented out Lines 132-136, like so...

//add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); //add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 ); //add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 ); //add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 ); //add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

Below Line 159

add_action( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab', 30 );

I've added this code..

add_action( 'woocommerce_product_tabs', 'woocommerce_template_single_add_to_cart', 40 ); add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 40 ); add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 40 ); add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 40 ); add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 40 );

I've also added this code to my custom.css....

/* Modification to Right Align "Add to Cart" Button in Tab area of Single Product Page */ #top.single-product form.cart { margin-bottom: 0px; float: right; }

I also added this code yesterday to my custom.css, but is only for adjusting the price font size..

/* Modification to adjust Price font Size in Title Container of Single Product Page */ #top .price_container .price .amount, #top .price_container .price ins .amount, #top .price_container .price ins { font-size: 20px; font-weight: normal; }

Can you see or forsee any problems with the modifications I've made? Also, would those other two modifications I mentioned, getting tab area even with top of pic, and changing the breadcrumb (the way I've invisioned setting this site up, I'd really like there to be no reference back to the shop/product page at all), be something that is easy to fix?

and still can't figure out why those descriptions are being listed under the related items.. feel like I'm so close to being done with these stupid design changes, and on to what really matters.. Content!

Thank You guys Very Much for your help!

Posted 6 months ago #
EdgeWP
Member

OK.. got the tab area to line up with pic now by adding this to quick/custom css...

#top div.product .woocommerce_tabs { padding: 0 0 0; }

now just 2 more things.. breadcrumbs and related text..

Posted 6 months ago #
Nick
Moderator
Hi,

I looked and looks fine to me. Chrome. http://i.imgur.com/bQOB7.png But i guess some browsers may have a problem since I stuffed that button inside an unordered list which is invalid html but can usually get away with it. So its second part of step 2 here should look like this:
```
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
	add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
	add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
	add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
	add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
<ul class="tabs">
<?php echo $tabs; ?>
```
If button disappears, that's fine, the change in location would affect css, so just gotta look for it since certainly long distance moves like that are invalidating some of the selectors.

The descriptions are difficult since they don't have any class names, and are some extension for woocommerce which i don't have (please refer to bottom of my previous post) please try *either* one of these below in Quick CSS
```
#top.single-product li div:nth-of-type(even) {
display: none;
}

#top.single-product li div:nth-child(3) {
display: none;
}
```
Ok, I spent way too much time with this... Sorry but not fair to others waiting. I'll see if I have time later on to get back to this.

Thanks,

Nick
Posted 6 months ago #
EdgeWP
Member

Thank you so much Nick! Your first solution:

#top.single-product li div:nth-of-type(even) { display: none; }

worked perfectly to get rid of those descriptions under the related products...

I'm not sure when you look'd at the page to get your capture, but when I originally modified the code as you suggested in your third post, the code was printing out as text in the tab area (could be because I'm using IE, not sure), but I took that nugget you gave me, and posted what I came up with as an alternative solution, right above this last post of yours.. I'm not sure if it's the proper way, but seems to work ok, so far anyway.. If you see any problems with the way I did it, please let me know.. I would have never got there without your help though! Thank you so much!!!

I believe as far as the single product page goes, the only other thing I'm still trying to figure out, is how to get the breadcrumb above the product pic to display... Home>>Product Category>>Product.... instead of... Home>>Products>>Product... (I'd really like there to be no reference back to the shop/product page at all, anywhere).. The products category page is perfect.. it shows Home>>Product Category, with no reference to Shop/Products... Not sure, but it's now second on my priority list, as something strange has happened to a text area/callout/quote element on my home page, below the header, and above the slider.. But I will post that in a different thread as to not clutter up this one with anything else...

And again.. definitely want to thank you again for all your time and assistance!!!

Posted 6 months ago #
Nick
Moderator

Hey,

Thanks for the kind words, the support team does its best.

Glad it worked out, That last nugget i am surprised is working on all browsers (i checked now) besides IE8, I would use the second nugget and check IE8.

The breadcrumbs... if you check the forum, i remember 2-3 months ago posting something identical to what you are asking , and Dude also posted something or maybe Devin. It's a common request.

Actually, In admin backend you can try WooCommerce > Settings > Pages > and there are 2 checkboxes:
first one: Prepend product permalinks with shop base page (shop) (uncheck)
second: Prepend product permalinks with product category (check)

Experiment with some other permalink settings in middle that look promising on that page, and do check the support forum, i think Propulsion theme breadcrumb solutions might be similar enough as well.

I am gonna close this ticket and if you have problems with the breadcrumbs please just open another one and add my name as a tag so i see it, because this ticket getting a bit big.

Thanks,

Nick

Posted 6 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Single Page Product Modification

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…