Support Forum - Topic: Single Page Product Modification

Support Forum - Topic: Single Page Product Modification http://www.kriesi.at/support/topic/single-page-product-modification Support Forum - Topic: Single Page Product Modification en-US Sun, 19 May 2013 13:35:36 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Nick on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83796 Wed, 14 Nov 2012 04:56:57 +0000 Nick 83796@http://www.kriesi.at/support/ 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 EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83788 Wed, 14 Nov 2012 03:53:53 +0000 EdgeWP 83788@http://www.kriesi.at/support/ Thank you so much Nick! Your first solution: <code> #top.single-product li div:nth-of-type(even) { display: none; } </code> 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!!! Nick on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83771 Wed, 14 Nov 2012 00:11:57 +0000 Nick 83771@http://www.kriesi.at/support/ Hi, I looked and looks fine to me. Chrome. <a href="http://i.imgur.com/bQOB7.png" rel="nofollow">http://i.imgur.com/bQOB7.png</a> 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: <pre><code>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; ?></code></pre> 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 <pre><code>#top.single-product li div:nth-of-type(even) { display: none; } #top.single-product li div:nth-child(3) { display: none; }</code></pre> 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 EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83753 Tue, 13 Nov 2012 22:05:02 +0000 EdgeWP 83753@http://www.kriesi.at/support/ OK.. got the tab area to line up with pic now by adding this to quick/custom css... <code> #top div.product .woocommerce_tabs { padding: 0 0 0; } </code> now just 2 more things.. breadcrumbs and related text.. EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83747 Tue, 13 Nov 2012 21:05:35 +0000 EdgeWP 83747@http://www.kriesi.at/support/ 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... <code> //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 ); </code> Commented out Lines 132-136, like so... <code> //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 ); </code> Below Line 159 <code> add_action( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab', 30 ); </code> I've added this code.. <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 ); </code> I've also added this code to my custom.css.... <code> /* 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; } </code> I also added this code yesterday to my custom.css, but is only for adjusting the price font size.. <code> /* 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; } </code> 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! Devin on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83712 Tue, 13 Nov 2012 18:21:35 +0000 Devin 83712@http://www.kriesi.at/support/ 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 EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83638 Tue, 13 Nov 2012 14:57:01 +0000 EdgeWP 83638@http://www.kriesi.at/support/ 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 Nick on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83614 Tue, 13 Nov 2012 13:01:59 +0000 Nick 83614@http://www.kriesi.at/support/ Hi, In page woocommerce-hooks.php in the woocommerce plugin directory please copy lines 132-136 <pre><code>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 );</code></pre> 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 <pre><code><ul class="tabs"> <?php echo $tabs; ?></code></pre> 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 <pre><code><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; ?></code></pre> 3) Now please add to your Quick CSS the following: <pre><code>#top.single-product form.cart { margin-bottom: 0px; float: right; } div.product .product_title { display: none; }</code></pre> ---------------------- 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 EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83532 Mon, 12 Nov 2012 23:30:50 +0000 EdgeWP 83532@http://www.kriesi.at/support/ 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... Nick on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83528 Mon, 12 Nov 2012 22:49:33 +0000 Nick 83528@http://www.kriesi.at/support/ Hi, Please open up in the plugins folder /woocommerce/ the file woocommerce-hooks.php and change line 118 which looked like <pre><code>add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );</code></pre> to look like <pre><code>//add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );</code></pre> 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. <pre><code>#top .price_container .price .amount, #top .price_container .price ins .amount, #top .price_container .price ins { font-size: 16px; font-weight: normal; }</code></pre> Please apply these for now, since I am not sure what the button will do, and then we shall proceed. Thanks, Nick EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83523 Mon, 12 Nov 2012 21:50:28 +0000 EdgeWP 83523@http://www.kriesi.at/support/ 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? EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83522 Mon, 12 Nov 2012 21:34:59 +0000 EdgeWP 83522@http://www.kriesi.at/support/ Here is a direct link for you... <a href="http://www.htech.net/?product=ebarometer" rel="nofollow">http://www.htech.net/?product=ebarometer</a> Thanks... Nick on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83521 Mon, 12 Nov 2012 21:31:22 +0000 Nick 83521@http://www.kriesi.at/support/ 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 EdgeWP on "Single Page Product Modification" http://www.kriesi.at/support/topic/single-page-product-modification#post-83270 Sun, 11 Nov 2012 06:50:49 +0000 EdgeWP 83270@http://www.kriesi.at/support/ 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.. <a href="http://screencast.com/t/VaU0wbiLG0Wd" rel="nofollow">http://screencast.com/t/VaU0wbiLG0Wd</a> Thanks!