Hi guys,
Recently I installed woocommerce under ethos stack, but let me tell you that nothing works properly as you template, even I cant see the products, the cart, checkout use wide screen with no margins and so on. I’ve been reading all post related to customize woocommerce without find any solutions. If you could help in this regard, would be much appreciated.
Product view
https://www.hoohbe.com/shop/tshirts/skydive-t-shirt/
Thanks
Hello @germancordido,
Thanks for writing in!
I have check your site and it seems to me that the WooCommerce styling were not loaded in your site. After a closer look, I found out that you are using W3 Total Cache and the plugin is serving the old cache version of your site. Please clear your plugin caches or at least temporarily deactivate this W3 Total Cache plugin so that the cache and the minified JS/CSS files were cleared and regenerated.
By the way, your shop page only displays the categories. You can change that and display the product items by going into the Appearance > Customize > WooCommerce > Product catalog > Shop page display. For more details, please check this out:
Hope this helps. Kindly let us know.
Thanks for your response, taking your advise I disable W3 Total Cache plugin, however did no make any difference.
PD: the shop was already configured to display categories and products but products are hidden and I dont know why.
Hey @germancordido,
Thanks for testing. Since it’s not caching that is causing the issue, it could be something else. Caching or optimization, in general, is just one of many factors that could cause issues on a website.
Given there’s no third-party factor that is causing the issue, out of the box, the Ethos - WooCommerce setup should look like our demo: http://demo.theme.co/shop-ethos/
================================================================
Now going to your shop page, I see that the products are actually there. But, they’re hidden because the script that is responsible for displaying the products is being stopped most probably by a third-party plugin. With that said, please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
================================================================
You previously said this:
The reason why that’s happening is you’ve set the Site Width to 100%. Go to Theme Options > Layout and Design and lower the Site Width.
================================================================
Regarding your product page. the texts are actually there. The color is just white like the background so you can’t see them.
Check the colors you’ve set in Theme Options > Typography.
================================================================
Another thing you can check is your child theme. To quickly know if a custom code in your child theme is causing the issue, activate the parent theme.
================================================================
Only if you’ve tried my suggestions above and they don’t help, please give us your site’s WordPress Login URL, admin level Username and Password in a Secure Note so we could take a close look at your setup.
Thanks.
Thanks Christian for your recommendations, in fact, there is a problem with the Cornerstone plugin, after deactivating it the products shows up in the store, but obviously all other web styles gets messed up.
What are the next steps to solve this?
Hello @germancordido,
This css code is causing the products not to display in the shop page.
.entry-featured, .entry-header {
display: none;
}
And then I found out that you have installed a caching plugin WP Fastest Cache. Please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Best Regards.
Actually, I have the W3 Total Cache disabled.
As you said, the ccs code was generating the problem, once removed, the products appear on the shop page, however, I use this code to remove the main image of the article post, is there another way to achieve it?
Talking now about the shop, I know that the margins are set in the appearance of the general theme, but is there a way to modify them only for the store, products and woocommerce in general?
Another thing is that the right panel like your Demo is not there, how can you activate it?
Hello @germancordido,
Please have your code updated and use this:
body:not(.woocommerce) .entry-featured,
body:not(.woocommerce) .entry-header {
display: none;
}
This will make sure that the code will only applied to non-woocommerce pages.
This is the Ethos Shop demo:
Please make sure that you have set the global content layout in X > Theme Options > Layout And Design > Content Layout to “Content Left, Sidebar Right” or “Sidebar Left, Content Right”. And then go to X > Theme Options > WooCommerce > Shop > Shop Layout and select “Use Global Content Layout”.
And if you wish to modify the content width of all the WooCommerce pages, you can make use of this code:
.woocommerce .x-container.max.width.main {
max-width: 900px;
}
Hope this helps.
Thanks Rue for your suggestions, I applied both ccs code and it works to hide the initial image at the post, however there is an issue when applying the right sidebar, first it does not appear at the shop where it is needed, but in the article of the publication appears as you scroll down the page creating a problem.
Hey @germancordido,
Your Shop sidebar is empty. Did you use the Unlimited Sidebars feature of X and assigned a different sidebar for your shop? If so, make sure you add widgets to the Shop Widget Area.
If that is not the case, please give us WordPress Admin access in a Secure Note. We’ve previously asked this already. If it’s not possible to give us access to your live site, please copy your site to a staging server and give us staging access instead. If this still could not be given, this would be hard for us and what we’ll do is guess and that results to back and forth discussion which is not good for you and for us as it often leads to confusion.
The problem with the sidebar in your articles is because you’ve overridden Ethos’ single post design. Specifically, you have this code.
.x-container>.offset {
margin: -18px auto;
}
Please remove that. Or, have a web developer customize our theme for you.
Please note that we do not offer customization services as part of our product support. We can guide you a little bit but we could not give a lot of customization help especially customizations that conflict with the design of our theme.
Hope that helps and thank you for understanding.
At this stage am just setting up the feel and look of the shop as well the post; for the shop I would use the sidebar but not for the post, is this possible? and for the post I would like to have the content as close of the top as possible, hence
.x-conntainer>.offset { margin: -18px auto; } I did try to use negative margin but doesn’t work properly; also for the video content section I would like to use width 100% but this configuration of the general theme affect the shop as well…
Hello @germancordido,
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
You should find the secure note in your original post.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
Hello @germancordido,
If you want to style the product pages, you will have to use this code instead:
.single-product .x-container >.offset {
margin-top: -18px;
}
Take note of the .single-product and .container. Please also make sure that your spelling is correct.