Woocommerce Sidebar moves to bottom

Thank you for reminding the developer.
Hopefully they will get this fixed and I won’t be asking again in another couple of months :o)

Hello there,

I am sorry for the delay in dealing with this issue but our developer needs time to rectify these kinds of issues.

Best Regards,
Support

Hi there I just updates to woo 3.4.2 and the sidebar moves to bottom. I this issue now fixed somehow or not??

Drives me nuts - sorry. The icon for checkout does not appear either.

Is there some sort of hack to get the sidebar into the content area??

regards Clarisa

I try now since ages to correct this but can’t figure out where the “wrong” ::after and </div> is set I enclose 2 images A) sidebar below content and B) Should be

it shows cleary that on the shop page a wrong ::after and </div> is set PLEASE TELL ME HOW TO SOLVE THIS

Hi kkr17

Unfortunately I am unable to read your first post as it seems to be set to private.

However it sounds like you have identified what causes the problem on the shop page.
This a brilliant start to getting this fixed at last.

Back to Colorlib for a response please…

Hi

all I wrote in the first message was: Hi there I just updates to woo 3.4.2 and the sidebar moves to bottom. I this issue now fixed somehow or not??

Drives me nuts – sorry. The icon for checkout does not appear either.

Is there some sort of hack to get the sidebar into the content area??

regards

what do you mean with: Back to Colorlib for a response please…

Thanks kkr17

No, unfortunately this problem never got fixed. The only way round it (as advised by colorlib) is rollback woocommerce to pre version 3.3 - which is far from ideal.

I am hoping that you have identified the problem and now Colorlib will be able to give us a fix. Hence my line “Back to Colorlib for a response please…” . (we need them to respond with the answer).

Hello there,

I am sorry for the inconvenience caused here.

I have been looking at your page band change the CSS for the sidebar and the primary bar but the changes do not work for aligning the sidebar.

Please try disabling any third party plugins that were not bundled with the theme as one of them may be causing a conflict with the CSS.

Best Regards,
Support

OK on the archive.php page…

look for:
do_action( ‘woocommerce_before_main_content’ );

?>
<header class=“woocommerce-products-header”>

and change it too:
do_action( ‘woocommerce_before_main_content’ );

?>

<div id=“primary” class=“content-area <?php echo of_get_option( ‘site_layout’ ); ?>”>
<main id=“main” class=“site-main” role=“main”>
<header class=“woocommerce-products-header”>


it’s important that the class is onl set to content-area!

Now one should be able to change the other templates accordingly

Dear Support,

this is really awsome… you offer this theme telling people it works with woocommerce and have no idea yourself how to solve the problem… where as the problem this bit of styling from your theme is which needs to get integrated into woocommerce templates: <div id=“primary” class=“content-area <?php echo of_get_option( ‘site_layout’ ); ?>”>
<main id=“main” class=“site-main” role=“main”>

by the way here is the solution for the single-product.php

search for:
get_header( ‘shop’ ); ?>

change it to:
get_header( ‘shop’ ); ?>
<div id=“primary” class=“content-area <?php echo of_get_option( ‘site_layout’ ); ?>”>
<main id=“main” class=“site-main” role=“main”>

Colorlib Support - we established it was the newer versions of woocommerce plugin right from the start that wasn’t compatible with the theme. Hence the title of the thread “Woocommerce sidebar moves to side”.

kkr17 - Your help on this is awesome. I will try your suggestions later (when I get 5 minutes) but it sounds like you’ve sorted it. Many many thanks. I will report back.

Hi kkr17

Firstly thank you for the pointers. On my website I found the following happened…

archive-product.php
Firstly I followed your exact code suggestion and the main content area and sidebar became part of the footer (though they were next to each other so a good starting place).
After experimenting a bit I found if I just used <main id=“main” class=“site-main” role=“main”> <header class=“woocommerce-products-header”>
and didn’t include
<div id=”primary” class=”content-area <?php echo of_get_option( ‘site_layout’ ); ?>”> then it works. All good, archive pages fixed!

single-product.php
Not such good news. Adding your exact code displayed the content area twice (one under the other) with the sidebar next to the bottom one. I have played with it for a couple of hours and can’t get this one to display properly.

Any further suggestions on fixing single-product.php would be very gratefully received… please!

Just add the bits that worked for you on the archive page to the single product page
I enclose my changed php files I simply added them to the woocomerce folder within my child theme

hope it helps

Well unfortunately it won’t let me upload the 2 files… but again… just reproduce what you did on the archive page to the single-product page… then everything will work.

Hope your problems are solved now :slight_smile:

Unfortunately no. I’ve tried many combinations on the single-product page and I can’t get it working.

Here is the archive page (now working)

Here is the product page (still broken)
https://retroprintshop.co.uk/railway/br-aberystwyth-poster/

Any help much appreciated.

Sorry I was out and about…

I took the following screenshots yourarchive… here you can see that the ::after appears after your sidebar
and yoursinglepage >> the ::after appears directly after main and before the sidebar

Try to switch the sidebarhook with the after main content hook - maybe that helps. Otherwise I have unfortunately no ideas - tried CSS but no success. You need to get the sidebar inside of your wrapper.
I hope I was of some help being no expert at all… just another shop owner…
<?php
/**
* woocommerce_after_main_content hook.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( ‘woocommerce_after_main_content’ );
?>

kkr17, you are an absolute diamond!

Switching the sidebar hook with the after main content hook has worked. I cannot thank you enough for your advice on this.

Now we have identified the problems it would be good if Colorlib can update the theme so it’s not necessary to manually override these two woocommerce files in order to get it working properly.

We should not mark this as resolved until the theme has been updated and is truly woocommerce compatible.

I attach the two override files for everyone else who needs them.

Upload these to wp-content/themes/yourchildtheme/woocommerce folder.

Obviously change the file extensions from txt back to php

Dear 1066geoff

you realy made my day calling me a diamond. Glad that I could help. Wish you all the best for the games tomorrow - may Great Britain play better than us germans today :slight_smile:

Hello there,

@kkr17 Nice work providing the solution to this issue here.
Please feel free to contact us again in the future.

Best Regards,
Support