[Resolved] WooCommerce Archive Not Displaying in Astra Theme

[Author]

Posts

[Nigel]

I meant are the styles on the shop page entirely theme defaults, or have you updated the styles (maybe in theme options, maybe in the customizr, I haven't looked at how Astra applies styling yet)?

[aaronM-9]

No, I have indeed made changes to the theme's default settings. Fonts, backgrounds, heading sizes, colors, etc. have all been changed via the theme's customizer.

- Aaron

[Nigel]

I have the copy of your site installed locally together with a clean site with the key matching plugins so that I can confirm the steps involved, and I'm having a problem with a key thing that you can perhaps direct me in.

I see that you added the custom background image on all pages with the customizer, and also set the white background with 0.95 opacity for the content area in the customizer, too (in Customizer > Global > Colors > Content > Background).

I've done the same.

The problem is that on my clean install this applies to most pages, but not to the WooCommerce shop page, and this is with just the Astra pro and WooCommerce plugins active, no Toolset plugins are active and I'm just looking at the Astra-designed WC shop page.

As this is the part we're having problems with when customising the shop page with Toolset I need to know how it works without Toolset first.

Do you have any insight you can share?

[aaronM-9]

Hi Nigel,

That's interesting it still isn't working with Toolset activated. I first had this issue very early on and when I deactivated Toolset the problem would go away (that was when it was doing a solid color overlay across the entire page). Astra's technical support also indicated the issue was being caused by Toolset. Since then, of course we've made some changes (using traditional layout) but not sure why that would affect things once Toolset is deactivated. I'm assuming deactivating Toolset would simply revert it back to using the built-in WooCommerce template, but now that my site is live with 40 customers I'm afraid to deactivate any plugins (I still wish Toolset would include a staging site license with single-license purchases!). Sorry if I can't be more help at the moment. Let me think on it some more. Thanks for the continued help. This one is elusive.

- Aaron

[Nigel]

Hi Aaron

I've been sitting on this waiting to see if you had any more insight, and I guess I should check back in with you.

By the way, regarding the licence, there's nothing to stop you temporarily deleting the production site from your account and adding a staging server and using that for as long as you need to, before reverting the account back to the production server.

No rush for you to reply, I have a couple of days off over Easter anyway.

[aaronM-9]

Hi Nigel,

I don't have any further insights at this point. Feeling stuck. Do you have any more thoughts or direction you can give me? Thanks.

- Aaron

[Waqar]

Hi Aaron,

Nigel is on vacation, so I'll be following up on this ticket.

I noticed that the theme's content container styles are not applying on the shop page ( hidden link ), because container divs with ID "primary" and class "ast-article-single" are not included on this page.
( screenshot from the homepage: hidden link )

A workaround can be to include this missing ID and class to the wrapping containers, through a custom script.

jQuery( document ).ready(function() {
	jQuery('div.ast-container div.container-fluid').attr('id', 'primary');
	jQuery('div.ast-container div.container-fluid div.ddl-full-width-row').addClass( "ast-article-single" );
});

You can include this code in "JS editor" tab in the view "View-Products-All".
( screenshot: hidden link )

After that, the shop page's content area will have styles consistent with other pages.
( screenshot: hidden link )

I hope this helps and for a new question/concern, please open a new ticket.

regards,
Waqar

[aaronM-9]

Thanks - that seems to have done the trick 99%. The only thing that still isn't right is the heading text size. See pics attached.

- Aaron

[Waqar]

Thanks for the update and glad that my message helped.

To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

Using the same tool, you'll note that heading styles are different because of the change in the order in which Bootstrap styles are loaded.

You can include some custom CSS code to override those H1 heading styles, for example:

.ast-container h1 {
	font-size: 55px;
	font-size: 3.4375rem;
}

This can be included in the "CSS editor" tab in the view "View-Products-All".

For more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[aaronM-9]

Thanks, team! I think this one is finally closed out.