[Resolved] Woocommerce Shop page missing layout CSS

[Author]

Posts

[ImranF8658]

I have exactly same problem which was mentioned 7 months ago in

https://toolset.com/forums/topic/styling-woocommerce-shop-with-layouts/

but no solution was provided. So I have to ask again

The CSS I added in "Layout | Layout CSS" doesn't get imported in my Woocommerce Shop page. I counted CSS files in the 'pages source' which were 30 but in my all other page I have 31 CSS files. The missing file is

<link rel='stylesheet' id='wp_ddl_layout_fe_css-css' href='hidden link' type='text/css' media='screen' />

I am sure something is missing in the "plugins/woocommerce-views/templates/archive-product.php" file

Can you please let me know how to fix this problem?

[Beda]

Thank you for contacting us here in the Support Forum

I will take care of your ticket.
Could you please share your Debug Informations with me?
https://toolset.com/faq/provide-debug-information-faster-support/

This will help me replicate the issue with the Plugins and theme you are using.

May I also ask, if you created a Custom WordPress Archive with Views, which is used on your Layouts?
Have you also followed this DOC to customize your Product templates with WooCommerce Views?
https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/

Please could you provide me the additional Infos?

Thank you for your patience.

[ImranF8658]

I did not make any change in "plugins/woocommerce-views/templates/archive-product.php". I get error with the default template file which we get with woocommerce-views plugin.
Yes I did follow the getting started with woocommerce-views.

For shop page I created a page called "purchase" and added it in
"woocommerce | Settings | Products | Display | Shop page"
also added it in the
Setting | permalinks | Product permalink base | Custom Base

Then I created a Layout and in the "This layout is used for these posts" section I ticked on the page called "purchase". In this layout I created a Achieve cell.

[Beda]

I apologize the delay here

So I deployed a similar setup, locally.

1. I added WooCommerce and WooCommerce Views, Layouts and a Layouts Supporting Theme.

2. The WooCommerce Views Settings are:
- WooCommerce Views plugin default single product template
- WooCommerce Views plugin default product archive template
- Add a container DIV around the post body for WooCommerce styling.

3. My Layout is assigned to Page "Shop" and "Products Archives" ( I did not change default WC Settings for this test )

4. The Layout holds a WP Archive Cell, that Archive is set to "Products" and holds a simple Loop:

<h1 class="page-title">[wpv-post-title]</h1>
[wpv-post-featured-image]

5. I changed some CSS in Layouts > CSS:

h1.page-title {
  color: red;
}

This works fine on the Front End.

Am I missing a step to reproduce this?

Please could you confirm me the additional Details?

Thank you

[ImranF8658]

I have same setting as yours but I still get this error.
I have added this missing line at the top of my product archive template.

<link rel='stylesheet' id='wp_ddl_layout_fe_css-css' href='hidden link' type='text/css' media='screen' />

Which worked for me and my Layout CSS is applied as usual.

But I'm not sure about the "c74fbcbea8ae4a50abdd51fde957e72a.css" in the above code whether it will change in future automatically.

So can you please let me know if it will change itself in future automatically? Which will bring the same problem again. I need a permanent solution.

Thank you for your time

[ImranF8658]

After spending couple of hours, I have fixed the error. The error was in the template "archive-product.php" file on Line:75, shown below.

the_ddlayout( 'home', array('post-loop-callback' => 'woocommerce_default_index_loop') );

Because the layout I created for the shop page is called "purchase" , so in the above line of code I changed 'home' to 'purchase' and it worked.

I think this is a bug! You can ask developers to have a look.

[Beda]

Thanks for the Details

This is not a solution, and it should not be necessary.

I can not replicate this problem.

CSS Added to Layouts > CSS is working just fin on the front end, in every case, no matter if on a Products Archive, Single Posts or other content.

You should not have to hack the Plugin's core files, firstly this will change after every update and second, this should work out of the box just as on my end.

I would need to request temporary access (WP-Admin and FTP) to your site
- preferably to a test site where the problem has been replicated if possible -
in order to be of better help and check if some configurations might need to be changed

Your next answer will be private which means only you and I have access to it.

❌ Please backup your database and website ❌

✙ I would, if possible, need access to a site where only a minimal set of Plugins and a default theme is active.
This to avoid eventual compatibility issues with other software.

✙ Please add the Links to:

- The Layouts Edit Screen

- The Page/Post where you use the Layout

- The corresponding Front End Page/Screen

- The Corresponding View

Please could you provide me the additional Infos?

Thank you for your patience.