[Gelöst] WooCommerce Archive Not Displaying in Astra Theme

[Author]

Artikel

[aaronM-9]

The WooCommerce products archive is not displaying when using the Astra Theme. Instead of showing product listings, it shows a black screen (see screenshot). I am using (and have paid for) the Astra theme because it is on your list of recommended themes that work well with Toolset. Here is what I have done so far to try and figure this out:

1) Reset all Astra settings back to default.
2) Reverted back to Twenty Nineteen theme - product archive displays.
3) Reverted back to default WooCommerce product archive (instead of Toolset) - problem still occurs
4) Removed all content from the custom archive and ran page - problem still occurs
5) Created a product loop inside a brand page and it works properly (see versteckter Link)

Here is the link to the page not working: versteckter Link

Any help would be greatly appreciated. Thanks in advance.

- Aaron

[aaronM-9]

PS: Here is what tech support from Astra says: "As I debugged your website, it seems that there are a series of Toolset plugins installed on your website that are causing a conflict. The Toolset WooCommerce Views is causing the color overlay issue and the others are somehow manipulating the layout of the shop page."

[Nigel]

Hi Aaron

I just tried to reproduce the problem on a local test site but could not.

Could I get access to your site to check your set up?

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

The blacked-out screen is coming from your footer, but I can't determine what exactly is causing it to cover the whole product archive section very easily, so I'm taking a copy of your site to install locally where I can more readily do some debugging.

I'm taking that right now, and I'll update you again when I've done some testing.

[aaronM-9]

Thanks - I look forward to seeing what you find out.

- Aaron

[Nigel]

I was able to identify what triggers the problem and reproduce it on my own test site, but I can't see exactly the cause without some further investigation, so I've escalated this to the second tier.

You just need to activate Layouts (even if there are no Layouts) when the settings in Toolset > WooCommerce Views are to use the WooCommerce Views product archive template.

It happens with Astra and not, say, twentytwenty because it applies float: left to the whole content area.

I'll get back to you with more details.

As an aside I note you are using Blocks and Layouts together, which is not recommended, and if possible I suggest you migrate the couple of Layouts you are using to use Blocks instead (which would have the side effect of resolving this problem).

[aaronM-9]

Hi Nigel,

Can you explain how I can stop it from using both blocks and legacy? When I started designing the site, I found Blocks to be way too frustrating and it was taking me ages to do things that used to be quick, so I switched my editing experience over to legacy so I wouldn't have to re-learn everything. My strong preference is not to use Blocks, so I would be happy using only legacy. Thanks.

- Aaron

[Nigel]

There is no obligation to use Blocks, you can use the Views plugin instead if you prefer, or—without changing plugins—go to Toolset > Settings and specify that you want the classic editor experience.

You may need to recreate some of the content you created with Blocks.

[aaronM-9]

Thanks. I had not realized I had to switch off the plugin (which makes complete sense!). I deactivated Blocks and activated Views so hopefully there are no conflicts moving forward. That being said, how do I modify the Shop page / products archive to not be using blocks? Do I just delete the archive view and recreate it?

- Aaron

[Nigel]

That should be sufficient, but double-check in Toolset > Settings what the default editor is for archives to make sure it is not set to Blocks.

(If it is set to only show the classic Views editor then you may not even see the option for archives.)

[aaronM-9]

I just recreated the archive and it still has the same issue. I'll just wait until your escalation team finds a solution. In the meantime, if I get desperate for time then I will create a Page with a standard Toolset View that loops through the products and use that instead of using the archive page.

- Aaron

PS: I did confirm legacy is set as the default editor.

[Nigel]

Hi Aaron

It seems that if you use Layouts anywhere on your WC site then it is expected that you use it for the product archive, which you are not doing.

You have already created a custom WordPress archive for products.

Now you need to create a new Layout, assigned to the products archive, which can include just a WordPress archive cell, using your existing custom archive.

That should fix the problem (I tested it on my local copy of your site), if you could please confirm.

[aaronM-9]

Hi Nigel,

That did the trick on removing the grey overlay, but now it's not inheriting styling from other pages. Attached please find a screen shot of what it should look like (from the work-around Page I had created) and what it actually looks like (using the WooCommerce Shop endpoint). Something like this also happened on the individual product page (using Layouts) and I had to add the following custom CSS, per some support I received from you guys:

.ast-woocommerce-container .product{
    background-color: transparent;
}

.single-product h1{
    font-weight: 600;
		font-size: 55px;
    font-family: "FHA Condensed French";
    text-transform: inherit;
    margin: 0;
}

Can you provide any direction on what CSS to add in this case? I don't see any similar WooCommerce classes in the page code and CSS isn't really my thing. Thanks for any further assistance.

- Aaron

EDIT: Should've mentioned what I actually did so we're on the same page. 1) Created layout called "Layout-Product-Archive" that contains the View I had created to show product listings; and then 2) associated the layout with the Product archive.

[Nigel]

I looked at your site again and I can see the issue.

Rather than attempting ad-hoc CSS hacks we should address the underlying problem, which appears to be that the dynamic CSS the Astra add-on plugin generates for WooCommerce pages is not loaded when using Toolset's custom shop template, and the solution is to find out how it is added and then make sure it is with the Toolset template.

I need to dig deeper to see how that happens.

I'm not familiar with the styling for WC provided by the theme, so I'm not sure what I'm looking at on your site are default theme styles or whether they are styles that you specified, maybe in the Customizer?

If you have any info about that it will help narrow my research.

[aaronM-9]

Hi Nigel,

Thanks again for your continued support. I've been trying to minimize any custom CSS code and so far the only custom CSS I've put in is pasted below:

/* customize my account */

.woocommerce-MyAccount-navigation {
display:none;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

/* fix bootstrap conflicts */

.ast-woocommerce-container .product{
    background-color: transparent;
}

.single-product h1{
    font-weight: 600;
		font-size: 55px;
    font-family: "FHA Condensed French";
    text-transform: inherit;
    margin: 0;
}

.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-Address-title  {
    background-color: transparent !important;
}

/* horizontal checkboxes */

.croydon-horizontal-checkboxes div.checkbox {
	padding-right: 25px;
	display: inline-block;
}

input.croydon-horizontal-checkbox {
	bottom: 7px;
}