WooCommerce Eliminates Content Boxes – Want them Back

Hello @jrothra,

It looks like your Store page is already full width, have you already resolved your issue?

Kind Regards, Roman.

Roman,

Actually no. As stated in the OP, Moesia places the content into bordered boxes, as shown in the second link. When you select “Full width” for the page template, it removes the widgeted sidebar and makes the main content box wider.

However, WooCommerce is ignoring/overriding the theme’s page template. This is evident in the first link, where you can see there is no bordered white box.

So while the store may visually resemble full width, it is, in fact, not. Why? Because WooCommerce is not working within the established page template (in this case, “Full width” as evidenced by the lack of the box. I want that box used for the store, as well).

Another example of this problem would be another site I’m working on using the same theme. The URL is www. keithrothra .com/store (spacing is intentional to prevent links and bots — this store isn’t ‘live’ yet). As you can see, there is no box, the sidebar is shoved down, and the text is almost invisible due to the background image. The template set for the store page is “full width.” Thus, WooCommerce is ignoring/overriding the established page templates and tossing out that desired — if not needed — box used by Moesia.

• This reply was modified 7 years, 9 months ago by jrothra.
• This reply was modified 7 years, 9 months ago by jrothra.

Hello @jrothra,

I have just checked your Store page one more time, your products area is of container width. Can you please try to add two more products?

Kind Regards, Roman.

It’s not about how wide it is nor how many products are showing; the problem is the missing bordered box. There are two products (I only have two) on johnrothra.com. However, as you should be able to see on both sites I mentioned (and back to my OP), there is no bordered box (I provided a link to another page to show what I mean). This indicates that WooCommerce is ignoring or overriding the theme’s default design of using bordered boxes.

• This reply was modified 7 years, 9 months ago by jrothra.
• This reply was modified 7 years, 9 months ago by jrothra.
• This reply was modified 7 years, 9 months ago by jrothra.
• This reply was modified 7 years, 9 months ago by jrothra. Reason: clarity
• This reply was modified 7 years, 9 months ago by jrothra.

Here are screenshots showing what I mean. Remember, Moesia creates bordered boxes around content. However, WooCommerce obliterates them. I want WC to use those boxes.

JLR’s site: https://goo.gl/qVhCRk
KAR’s site: https://goo.gl/sWM0vK

• This reply was modified 7 years, 9 months ago by jrothra. Reason: Provide correct link

SOLUTION FOUND!

After lots of research (even trying out other themes, none of which I liked), I found a working solution here: https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/

What I Did
Since Moesia uses a loop for creating pages, I couldn’t find a way to use the recommended hook option (see link above). So, I used the catch-all.

However, I added a div around the loop and added rules in the child theme’s CSS to regulate the design. I used the same parameters used for the full width pages. Here’s the code:

New woocommerce.php Placed in Child Theme

get_header(); ?>

	<div id="primary" class="content-area fullwidth">
		<main id="main" class="site-main" role="main">
			<div class="wc-storefront">
				<?php woocommerce_content(); ?>
			<div>
		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

CSS Used in Child Theme style.css

.wc-storefront {
    border: 4px double #ebebeb;
    padding: 30px;
    background-color: #fff;
}

It took a while to discover this, but now that I did, I can’t believe it was so simple!

• This reply was modified 7 years, 9 months ago by jrothra. Reason: corrected spelling

Great! Thank you for sharing a solution ??

Kind Regards, Roman.