Full Width Shop with Sidebar

[ronin]

Hi,

I’ve been making a shop page with the full width option and a sidebar. This is fine, but it would make my life a lot easier if the products were wrapped in a container, because the sidebar keeps overlapping the products or pushing them out of whack because they’re trying to float around the sidebar. Is there a quick way to change the template so that the sidebar is say 16% wide and then the products are wrapped in a container that’s 84% width?

To view the site, put this in your host file:

27.131.106.211 zqracing.com.au
27.131.106.211 http://www.zqracing.com.au

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Yes you can do this, you would need to edit the file: /themes/uplift/woocommerce/archive-product.php.

Please install and activate the supplied child theme, inside the child theme create a directory /woocommerce/ within that add the file: archive-product.php containing your changes.

Thanks.

[ronin]

Hi David,

Thanks, but what exactly should I put in the archive-product.php file to make these changes?

[David Martin – Support]

You will want to wrap the sidebar and content elements within a two new div’s from what I understand from your initial post?

The sidebar wrap could look like this:

<div class="my-custom-sidebar-wrap">
	<div class="sidebar left-sidebar <?php echo esc_attr($width); ?>">
		<?php dynamic_sidebar($left_sidebar); ?>
	</div>
</div>

The main content wrap could like this:

<div class="my-custom-content-wrap">
	<?php while ( have_posts() ) : the_post(); ?>

		<?php wc_get_template_part( 'content', 'product' ); ?>

	<?php endwhile; // end of the loop. ?>
</div>

If you are not familiar with HTML/PHP it maybe best to work with a developer to integrate these changes. The default masonry layout for this case is to wrap the products around the sidebar for a true fullwidth masonry effect.

The changes you are looking for are not a simple task as such.

Thanks,
David.

[ronin]

Thank you for pointing me in the right direction. I’ve added those divs but it’s still not quite right. Essentially what I want is for it to behave like this page with the aside sidebar that makes sure nothing flows underneath it, but I want the page to be full width.

[David Martin – Support]

What CSS have you added for those div’s?

– David.

[ronin]

I just added
(sidebar) width: 20% float: left (content) width: 80% float: left

But the 80% content section didn’t do anything to force it into the 80% width, it continued flowing underneath the sidebar.

[David Martin – Support]

Please create a test page for this if you wish to pursue this, it looks like you have reverted the changes?

[ronin]

Hi David,

Sorry we needed to get the site live and working so I ended up setting the page to be not full width so that the sidebar works as desired (where the products don’t flow underneath) and cheated the full width look by adjusting the container size. It would be nice to be able to do this more easily next time though, but I suppose there’s no longer a need to get this resolved, thanks though.

[Rui Guerreiro – SUPPORT]

No problem. Apologize for any inconvenience.

-Rui