Tagged: single product page
-
AuthorPosts
-
November 20, 2015 at 9:25 am #539385
Hi,
Why is the sidebar on the single product page displayed on the left/bottom?
My default setting for sidebar position is – right.Also how can I get rid of the sidebar on the product page alltogether?
regards,
PeterNovember 23, 2015 at 2:34 pm #540850Hey!
Sidebar seems to be working correctly there, below the product gallery at the right.
Regards,
JosueNovember 23, 2015 at 6:26 pm #541092Hi Josue,
The sidebar is under the gallery. So it is not the right sidebar it is more like bottom left sidebar.
I would like the side bar to be either:
1. on the right hand side of the page (to the right of the product description) or
2. not have the sidebar on the product page at allHow can I achieve this?
many thanks
- This reply was modified 9 years ago by TheElear.
November 23, 2015 at 7:37 pm #541132Hey!
Try adding this code to the Quick CSS:
.single-product .sidebar { display: none !important; }
That will hide the sidebar in single products view.
Cheers!
JosueNovember 24, 2015 at 12:08 am #541266THank you Josue,
DO you know that this side bar does not display on the right hand side?
Even though this is defined in the template?regards,
November 24, 2015 at 9:49 am #541397That’s actually the intended result, product gallery appears first and then the sidebar.
Regards,
JosueNovember 26, 2015 at 5:55 am #542852I was searching to find information on the same issue, and this is the most current thread. Would you be able to expand on why this is the ‘desired result’? As with the other poster, I want to have an actual sidebar on my product pages, not have it show under the image. Just like the normal behaviour of most other themes. I have to revert to not using a sidebar because my client thinks it looks so bad (and I agree), which is a poor solution.
November 26, 2015 at 8:58 am #542909Josue,
Following torndownunit can you also advise how to make it appear on the right?
regards
November 26, 2015 at 9:22 pm #543377I found the thread. It just seems crazy that this feature seems widely asked about on the forums. Why not just make “Right Sidebar” a right sidebar rather than all the additions to functions and css?
November 26, 2015 at 11:48 pm #543446Hey!
Try adding this at the very end of your theme / child theme functions.php file:
# # wrap single product image in an extra div # function avia_add_image_div() { echo "<div class='single-product-main-image alpha'>"; } function avia_close_image_div() { echo "</div>"; } # # wrap single product summary in an extra div # function avia_add_summary_div() { echo "<div class='single-product-summary'>"; } function avia_close_summary_div() { echo "</div>"; //close out the summary get_sidebar(); } function avf_product_sidebar_layout_mod($layout){ if( is_single() )$layout = "sidebar_left"; return $layout; } add_action('init', 'ava_product_sidebar_mod'); function ava_product_sidebar_mod() { add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2 ); add_action( 'woocommerce_before_single_product_summary', 'avia_close_image_div', 20 ); add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25 ); add_action( 'woocommerce_after_single_product_summary', 'avia_close_summary_div', 3 ); add_filter( 'avf_product_sidebar_layout', 'avf_product_sidebar_layout_mod', 5); }
And this to Quick CSS:
@media only screen and (min-width: 767px) { .single-product .product { width: 68%; margin-right: 4%; clear: none; float: left; } }
That will create a right sidebar in the single product view.
Cheers!
Josue- This reply was modified 9 years ago by Josue.
December 15, 2015 at 10:50 pm #553315This worked for me! thank you – just what I needed.
December 16, 2015 at 12:26 am #553346You are welcome, glad to help :)
Regards,
JosueDecember 19, 2015 at 12:20 am #555265Josue – one follow up question. The Sidebar looks great on the desktop view, but on the mobile view the right nav content disappears, but I think that added divs are still in there creating unwanted space. This makes the main content really compressed on the mobile view. any update to the above code snippet you gave us that could fix that?
December 19, 2015 at 1:25 am #555277December 19, 2015 at 1:48 am #555285December 19, 2015 at 2:01 am #555288Modify the CSS part to:
@media only screen and (min-width: 767px) { .single-product .product { width: 68%; margin-right: 4%; clear: none; float: left; } }
Cheers!
JosueDecember 19, 2015 at 2:08 am #555294Awesome! Works perfectly.
Thank you VERY much!! I really appreciate your help.
December 19, 2015 at 2:15 am #555299Glad to help :)
Regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.